Demo for Alice's Adventures in Wonderland, by Lewis Carroll
Using CSS Shapes to enhance visual storytelling.
UPDATE August 2014:
The full demo is obsolete because the
shape-inside property was removed from browser implementations of CSS Shapes. What remains here is only a redux of the original demo. It demonstrates just one use-case with the
The original source still exists in the archive tag. Use an old Chromium build and enable experimental Web Platform features in
chrome://flags to run the demo.
There is a video recording of the original demo.
See "Using CSS Shapes to Enhance Visual Storytelling" to learn more about the project.
- Use Google Chrome.
- If you're using Chrome version 36 or below (see
chrome://version), enable the flags to support CSS Shapes. Learn how.
Clone repo and change to directory:
git clone https://github.com/adobe-webplatform/alice.git
Install dependencies defined in package.json:
Watch for changes:
CSS files are overwritten by SASS with source from
.scss files. Do not edit
.css files directly.
All code is offered under the Apache License Version 2.0. For licenses on third-party libraries used see NOTICE file.
All assets are offered under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 license.
I think the instructions should be slightly more subtle. Please ask Yohei to suggest a design that is both more subtle, and that blends a little better with the site. (For instance, the green animation doesn't fit in with the site's design.)
Change instructions title
Please make the following changes to the instructions:
I found myself wanting to jump between scenes. Maybe a scene menu that expands from the lower right? (Yohei could probably design something in the same aesthetic.)
Big time enhancement request (and very low priority), but it would be visually interesting of the shafts of light -- especially in the opening scene -- transitioned, moved, danced, etc. creating an otherworldly, underwater kind of effect. (If this isn't clear, ping me and I'll explain.)
Opening text should scroll rather than "drain"
When scrolling the opening scene, the screen dims, then at some threshold, the text seems to "drain" down the rabbit hole. I think it would be more effective if the text scrolled down (and up). The dimming of the scene should be correlated to the position of the text: as the last of the text goes down the hole, the scene should fully fade to black.
(I think this is my highest priority enhancement request.)
layout wrong with big default font size
I use Chrome (39) on Mac 15" Retina with 18px default font size and the layout in the demo is wrong - the text doesn't properly avoid the image countours. The problem seems to be in using em for the size of the scene--alice div, and px for the shape sizes.
The demo works perfectly if I set my default font size to 16px, and with the size of 18px when I scaled the scene--alice div's height and width to 16/18ths of the original values, it works again. Alternatively, adding "font-size=16px" to body style also fixes everything.