A good friend of mine, Fai Leong has built a cool, really simple blogging service called SmugBox.
SmugBox is in Alpha at the moment, but it’s already got some nice features. Just write something you want to post in an e-mail and send it to post AT smugbox DOT com. You can even attach pics or video. SmugBox posts it for you online and can also auto post stuff to Facebook, Twitter and FriendFeed.
Please give Fai your feedback as well, he’s working hard on polishing SmugBox.
Click here to open the Snow Stack live demo. Arrow keys to move, “Space” to toggle magnify mode. Mouse click on an image to view on Flickr. You need to “right arrow” on the right wall to get more photos loaded in.
Many thanks to Simon Fraser for his help with performance profiling Snow Stack.
And yes, OS X Leopard with WebKit nightly will also do accelerated 3D transforms now, just like iPhone Safari.
Implementation Notes
Larger images load in after 2 seconds for high quality zoomed images.
State changes are handled via CSS.
Reflections use CSS masks instead of a Canvas draw (standard box reflections don’t quite work yet).
Reflections sit on a scaleY(-1.0) coordinate system and are tracked independently, which is surprisingly easy.
This demo pushed a few performance limits and currently avoids drawing and animating a drop shadow and border.
Animating transforms with a transform list must have only 1 function to animate in hardware.
Snow Stack’s 3D transforms, transform and opacity animations all run on the GPU. Layout and networked image loading happens on the CPU.
Key states are tracked manually (timers handle keyboard delay and repeats) so a smooth motion can be achieved when the keys are held down.
Cell sizes are chosen at initial window load time and don’t change on window resize, although the origin does. It’s rather slow, however, so I may end up changing that.
The computedStyle transform matrix is used to calculate how far away the dolly is from the target image, which is then used to assign a scaled rotation to the “camera”. Ideally, this might be done a different way, but the results are pretty good, and fast.
To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
Snow Stack’s source code is now available from the CSS-VFX project.
Google Chrome OS is real and now we know that V8 has a ARM JIT compiler coming soon. Nicely done, team Google. Next up, ARM Cortex A9 based Apple and Google tablets… er, netbooks…
