satine.org

by Charles Ying

Snow Stack is Here

July 11th, 2009

What is Snow Stack?

A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.

You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or later for a slightly slower experience.

Instructions

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.

Other CSS Visual Effects Demos

Updates and iPhone Apps

Technorati Tags: , , , , , , , ,

Tags: , , ,

155 Responses to “Snow Stack is Here”

  1. Ajaxian » 3D CSS Effects with Safari on Snow Leopard Says:

    [...] Charles Ying shows us Snow Stack: [...]

  2. macLover Says:

    genius.

  3. ErneX Says:

    I just tried it, it’s way too cool, congrats!

  4. CSS 3D transform effects on Safari, impressed « Position Absolute Says:

    [...] This video show it all, more info. [...]

  5. zzen Says:

    Amazing. Just stunning! Congratulations.

  6. Sean Says:

    Nifty! What is the song?

  7. satine.org » Snow Stack is Here « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit Says:

    [...] satine.org » Snow Stack is Heresatine.org [...]

  8. Al Says:

    Hahaha…. looks like Silverlight!

  9. Ben Ward Says:

    Stunning work!

    One thing that, from an open web evangelism point of view when we talk about Flash and Silverlight: This demo works (mostly) in regular Safari 4 too, just with less whizzy effects. That core principal that on the web, content remains accessible.

    The regular release-version Safari 4 seems to have some image overlap issues on the selected item, which can be corrected with a higher z-index on the containing div. Would be a great example of the progressive enhancement that these effects that can be implemented with.

  10. 3D CSS Effects with Safari on Snow Leopard | Guilda Blog Says:

    [...] Charles Ying shows us Snow Stack: [...]

  11. dahlia's me2DAY Says:

    홍덕의 생각…

    나: Snow Stack is Here / 미친 WebKit / 경배하라 // 기준: 헐 / Adobe는… // 나: Adobe는 IE6한테 감사해야함…

  12. Ramón Says:

    Awesome.. BTW:

    The song is track number 1 from the unofficial Ratatat album “9 Beats”, ~2006 Hero Music Ltd.

  13. Patrick Aljord (patcito) 's status on Monday, 13-Jul-09 04:35:23 UTC - Identi.ca Says:

    [...] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  14. Snow Stack | Jeff Siarto Says:

    [...] Snow Stack: 3D visual effects using web stan­dards Amaz­ing 3D effects with OS X Snow Leop­ard and Webkit using only HTML, CSS and JavaScript. Flash and Sil­verlight must be los­ing sleep at night. [...]

  15. Defn Says:

    What song is playing in the background of the video?

  16. SILK ROUTE » Blog Archive » Snow Stack – Safari 在 Snow Leopard的3D特效 Says:

    [...] 只要用CSS就可以完成這些效果: 這個連結有作者的詳細開發說明, 據說只花了三天晚上的數小時就做出來了, [...]

  17. Antipode - Article - 3D CSS Transforms hit WebKit trunk Says:

    [...] Last night, WebKit got more interesting: the hardware-accelerated CSS 3D Transforms spec that is supported on the iPhone came to Leopard. CSS Animations are quite nice to work with on Safari, and this new platform for it enables some pretty cool effects. [...]

  18. Toine Says:

    Wow. Javascript taking flash head on.

    Now come the f*ck on Microsoft. Stop holding back the web.

  19. 28 fresh design-links « Adrian Zyzik’s Weblog Says:

    [...] Choose the Moon: Pre-launch JSON: What It Is, How It Works, and How to Use It Blog Custom-B… satine.org Snow Stack is Here How to Photograph a Sunset: 6 steps (with pictures) – wikiHow 36 Color Gradient Sets For [...]

  20. Josip Says:

    I’m using Opera browser (which is known to be most standard compilant), and all I can see is a small static picture on black background. Congratulations on all the effort wasted on non-portable code.

    @Toine, if this stuff runs only in Safari, then it’s as good as Microsoft single-platform products.

  21. millenomi Says:

    @Josip: This is using CSS Transforms, which is a (Apple-submitted) W3C in-development standard. Don’t blame Opera for not having implemented it yet. :)

  22. millenomi Says:

    (Er, that should’ve been: ‘Don’t blame the dev/Apple for Opera…’.)

  23. Martina Says:

    Hey, my pic is there! Orange wilted gerbera!

  24. Jan Says:

    Woah! This is badass. I can’t wait for the finished version.

  25. glide Says:

    I agree with Ben Ward’s comment #9 re: z-index in latest Safari 4 on Win (..may just be installing Snow Leop­ard over Winblows :)

    Seriously hoping the W3C embrace it – simply awsome work!!

  26. snow stack is here — award tour Says:

    [...] satine.org » Snow Stack is Here. a demo of 3D CSS in webkit. only works in latest safari but it’s pretty damn cool. [...]

  27. Toine Says:

    @millenomi exactly.

    CSS transformations are almost a sealed deal. When Gecko (Firefox) and Presto (Opera) support them fully it\’s time for some non-IE javascript driven sites.

    Only by temporarily splitting the web\’s user base can Microsoft be forced to adjust their policy for web browser development.

  28. Chris Marrin Says:

    “Animating transforms with a transform list must have only 1 function to animate in hardware”

    Actually all transform animations will be in hardware unless you have more than one function AND one of those functions is a rotation animation of >= 180 degrees. If you’ve discovered other cases that fallback into software animation, it’s a bug. It would be really helpful if you could report it:

    http://webkit.org/quality/reporting.html
    

    and someone can look into it.

    Thanks…

  29. Chris Marrin Says:

    Ah, one thing I forgot. The rule I mentioned before (more than one function AND one of those functions is a rotation animation of >= 180 degrees) only applies to SnowLeopard. On Leopard, your rule (list must have only 1 function) is correct. This is actually overkill. We can animate many (most) function lists in hardware. I will look into tightening up the rule so we can avoid software fallback more often.

  30. Carsonified » Five Interesting Links to Brighten Your Day Says:

    [...] 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript An amazing demo that shows what’s possible with CSS3, HTML 5 and JavaScript. [...]

  31. Dave Nattriss Says:

    Isn’t it just Cooliris (but using CSS) – as released in 2007?

    http://www.cooliris.com

  32. Sharon Says:

    Can’t believe this is one person’s work. Great!

    I know a company is doing the similar thing, using totally different technologies(C++, OpenGL, etc): http://www.cooliris.com/

  33. Sharon Says:

    Just saw Dave’s comments. @Dave, a team is doing that in Cooliris. They use C++, OpenGL, ect. Totally different technoligies, but similar results. Cooliris calls this “3D wall”. You download it and install it as a browser plugin or as a desktop application, I think.

    I think Charles’ one person work can beat the whole team in Cooliris!

  34. rascunho » Blog Archive » links for 2009-07-13 Says:

    [...] satine.org » Snow Stack is Here A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. (tags: http://www.satine.org 2009 mes6 dia13 3d JavaScript CSS WebKit) [...]

  35. TheJackal Says:

    Anyone know where I can get that wallpaper with the two stick figures looking at the hourglass?

  36. Patrick Says:

    “Only by temporarily splitting the web\’s user base can Microsoft be forced to adjust their policy for web browser development.”

    That sounds an awful lot like the talk we heard in the bad old days of the browser wars. Thinking like that is counter to the whole idea behind the web standards movement.

  37. WebKit para Leopard agora suporta transformações tridimensionais em CSS; confira demonstração | MacMagazine Says:

    [...] “parede” tridimensional para visualização de imagens obtidas do Flickr, intitulada Snow Stack. Um vídeo dela pode ser conferido a seguir, caso você não queira testar no [...]

  38. links for 2009-07-13 | :neil_middleton Says:

    [...] Snow Stack is Here So Mr Flash and Silverlight, how do you expect to bat back things like this? Full 3D and reflections support in CSS/Javascript and HTML5 (Requires Snow Leopard) (tags: javascript css 3d webkit) [...]

  39. links for 2009-07-13 « Mandarine Says:

    [...] satine.org » Snow Stack is Here A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. [...]

  40. Jakub Pawłowicz Says:

    Very nice! I’m curious if Apple would transform their website to use some of these effects one day.

  41. Manis Says:

    I’m sure, this is the end of Internet Explorer. If we all use those things in our Web-Sites…

    I can’t find words, this is so cool.

  42. Webkit the new flash killer? « Robin Southgate actually believes people read his blog. Says:

    [...] Here’s a demo of what you can do with CSS3 and a webkit browser (that means chrome and safari). If it stays in webkit and doesn’t get adopted as part of the CSS3 standard then Flash is pretty safe. If it becomes part of the standard – and I see no reason why it wouldn’t in some form very similar to what webkit suggest then Flash might be a little bit more redundant. Sadly – with HTML5 now dropping video codec definitions Flash will definitely be the video presentation layer for a lot of developers for the next few years. Full details at satine. [...]

  43. Snow Stake is here / 3D CSS Effekte « bamaru.com - Über Design, Business und die Welt 2.0 Says:

    [...] via satine.org: Snow Stake is here [...]

  44. Watch this: Hardware-accelerated 3D CSS is coming to a browser near you! – The Next Web Says:

    [...] H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions [...]

  45. Snow Stack, impresionantes efectos CSS 3D con HTML puro y Javascript | aNieto2K Says:

    [...] Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio. [...]

  46. Watch this: Hardware-accelerated 3D CSS is coming to a browser near you! « The best social media guide on the Internet Says:

    [...] H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions [...]

  47. » Blog Archive » Snow Leopard: Safari avrà il CSS 3D, chi rimpiangerà Flash? Says:

    [...] [via satine] [...]

  48. Snow Stack, impresionantes efectos CSS 3D con HTML puro y Javascript : Blogografia Says:

    [...] Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio. [...]

  49. Olivier G. (lespacedunmatin) 's status on Tuesday, 14-Jul-09 09:35:21 UTC - Identi.ca Says:

    [...] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  50. TheZign.nl @ 2009 » Blog Archive » Watch this: Hardware-accelerated 3D CSS is coming to a browser near you! Says:

    [...] H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and [...]

  51. Snow Stack – 3D CSS Effects with Safari Says:

    [...] sin blogg. Det är sånt här jag vill se mer utav!Det finns ett demo att tillgå på hans blog (satine.org) som går att köras om du har Snow Leopard och Safari. Du kan även köra demot om du har Webkit [...]

  52. Michael Says:

    Stunning work mate!

  53. satine.org » Snow Stack is Here | ScriptRemix.com Scripts Says:

    [...] See original here: satine.org » Snow Stack is Here [...]

  54. Infinite Style Blog » Snow Stack demo … bye bye Flash Says:

    [...] you like this pay a visit to the developer Charles Ying’s blog and leave him your praise.   Tags: Apple, CSS, Web [...]

  55. 3D CSS in Safari di Snow Leopard??? | Apple Planet Says:

    [...] video dimostrativo fatto da Charles Ying, utilizzando una Nightly Build di Webkit su Safari di Snow Leopard, mostra tutte lo potenzialità [...]

  56. Webkit añade transformaciones 3D : Blogografia Says:

    [...] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit [...]

  57. Cocoia Blog » Snow Stack Says:

    [...] ‘demos’ like Snow Stack, however, this will soon change. If you’re running Snow Leopard and Safari right now, you can [...]

  58. Moova! News on the Move » Webkit añade transformaciones 3D Says:

    [...] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit [...]

  59. anonymous Says:

    Not sure what is so wonderful about this. First time loading in Firefox 3.5 nothing seemed to work. Second time, OK it worked but I don’t see the “wow” effect for the end user.

  60. Webkit y transformaciones 3D | NoticiasMIX - ¡El Periodico ON-LINE! - Noticias De Actualidad - Informacion - Articulos De Prensa - Farandula - Moda - Internet - Tecnologia - Espectaculo - Cine - Cocina Says:

    [...] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow [...]

  61. Brad Says:

    Well good thing there’s a youtube video of how it’s supposed to work….

    wont run right in safari or firefox… sooo call me when it works right!

    (I love the idea tho don’t get me wrong. Just a tad much attention for something that isn’t worked out yet.)

  62. Hola PO! » Webkit añade transformaciones 3D Says:

    [...] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit [...]

  63. Javier Beaumont (dewonik) 's status on Tuesday, 14-Jul-09 17:14:28 UTC - Identi.ca Says:

    [...] Un pequeño video de lo que se puede hacer con efectos CSS 3D y JS: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  64. IONIZED: A Journal of Witty Commentary - Snow Stack Says:

    [...] ✖ [...]

  65. 3D в CSS | 77even Says:

    [...] демки: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ Кроме того, блог содержит еще некоторое количество [...]

  66. BG-Bar » Es geht auch ohne Flash Says:

    [...] Aber es gibt Alternativen zu Flash. Welche Effekte sich allein mit HTML-Code, dem WebKit’s 3D CSS Effects Extensions und JavaScript erzielen lassen, zeigt Charles H. Ying. [...]

  67. Philippe Normand (philn) 's status on Tuesday, 14-Jul-09 21:09:55 UTC - Identi.ca Says:

    [...] Nice 3D effects using CSS/JS/HTML on webkit: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  68. CSS Effects in Safari~ | Wikinerd'z Says:

    [...] satine.org via MacRumors. Share: This entry was posted on Tuesday, July 14th, 2009 at 6:00 pm. You can [...]

  69. WebKit nightly builds enable 3D CSS transforms for OS X | BlogoFlux - Information Technology Blog Says:

    [...] build of WebKit, and then after that you’re ready to go. Then you can follow the link from the website where the Snow Stack demo is hosted, which’ll lead you to the demo itself. Try this out and tell us how it [...]

  70. Cube Navigator « Dukedomain’s Blog Says:

    [...] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  71. Hebiflux » Snow Stack : du cooliris/papervision like en CSS Says:

    [...] que Youtube se met au caroussel en 3D avec flash, Snow Stack est un nouvel effet visuel avec les extensions 3D des CSS dans Webkit sous MacOS X. Plus besoin d’un plugin Cooliris ou [...]

  72. Download Snow Stack Webkit 3D CSS Visual Effects | Free Download Blog Says:

    [...] this videos Snow Stack Webkit 3D CSS Visual Effects form which you will gain some knowledges.Then you can follow the Snow [...]

  73. Effetti CSS 3D su Safari: Snow Leopard | Zoomingin Says:

    [...] prendere già forma: nell’ultima nighty build di Webkit sono già presenti. Sul blog di Charles Ying è presente (oltre al video che ho riproposto) anche una piccola analisi. Related Posts:The Simpson [...]

  74. Webkit 3D CSS | Soliman n H4ck3rZ Says:

    [...] Snow Stack new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. In a little while we will not need flash any more, with HTML 5 released an implemented in most decent browsers andCSS extensions like snow stacks rolling out. [...]

  75. Links LV • Peter Kröner, Webdesigner & Frontendentwickler Says:

    [...] Snow Stack – CSS 3D Visual Effect with WebKit – Nett, beschleunigtes 3D-CSS… irgendwelche Standards die sowas vorsehen gibt es [...]

  76. Snow Stack « Martin Szymanski - Blog Says:

    [...] is Snow Stack? A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and [...]

  77. WebKit支持OS X 3D CSS变换 « 每日IT新闻,最新IT资讯,聚合多站点消息,保证你与世界同步 Says:

    [...] CSS特效提交到W3C,让促使其成为正式的CSS标准。苹果开发者Charles Ying在博客上演示了3D CSS的视觉效果(Youtube)。 权相龙在另一篇文章中称 [...]

  78. was so möglich ist: HTML, CSS, JavaScript und WebKit | ugotit.de Says:

    [...] Auf satine.org kann man nun bewundern, wozu WebKit mit HTML, CSS und JavaScript inzwischen in der La…. [...]

  79. João Miguel Neves (jneves) 's status on Thursday, 16-Jul-09 17:07:00 UTC - Identi.ca Says:

    [...] RT @theory Snow Stack is here. WANT. http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  80. CSS3/HTML/WebKit « motionpaused Says:

    [...] Snow stack [...]

  81. Rohit Nair Says:

    This is wicked! Awesome stuff

  82. 3D Funktionalität @ CSS « Says:

    [...] etwas weiter geht allerdings die neue 3D-CSS-Funktionalität. Sie erlaubt fast schon spektakuläre Animationen direkt aus dem Browser heraus. .. Und wenn man [...]

  83. Spicy iPhone » Blog Archive » 3D animations coming to Safari Says:

    [...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

  84. RSS News Portal » 3D animations coming to Safari Says:

    [...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

  85. Nedanfor Says:

    It’s really great!

  86. Apple Bloog » Blog Archive » 3D animations coming to Safari Says:

    [...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

  87. Safari spielt mit CSS 3D | macforlife - think different? be different! Says:

    [...] will, kann sich den aktuellsten “nightly build” von Webkit laden und Snow Stack hier ausprobieren. Es sei denn man ist im Besitz des aktuellen Entwicklerbuilds von Snow Leopard. Denn [...]

  88. Pooria Says:

    oh man… ooooooooooh man !!! awesome!

  89. Apple-Overload! » 3D animations coming to Safari Says:

    [...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

  90. Snow Stack, impresionantes efectos CSS 3D con HTML puro y Javascript | El blog de Webmarket Says:

    [...] Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio. Para probarlo necesitaremos la última versión de WebKit (r45824 o superior) y acceder a esta demo. swfobject.embedSWF("http://www.youtube.com/v/3R6sb4NO25E&color1=0×999999&border=1&rel=1&fs=1&showsearch=0&showinfo=1", "vvq-1735-youtube-1", "550", "445", "9", vvqexpressinstall, vvqflashvars, vvqparams, vvqattributes); (Sin votos)  Loading … [...]

  91. Jason Says:

    Pick yourself up a copy of Screenflow, your viewers will thank you for it. Shaky-camming your screen is ugly and aggravating. And Screenflow is easy, clean, and beautiful.

    I apologize for coming off as rude and/or arrogant, it’s not my intention. But when I see people taking pictures/videos of their screen where completely unnecessary, well, it’s just a pet peeve of mine.

    (When is it necessary? Here’s a personal example; I had a weird Xorg Driver incompatibility some years back, the primary display worked fine, the secondary display was having an acid trip. Screenshotting it didn’t show the problem, so I did take a picture of the two screens physically in order to demonstrate the issue.)

  92. 3D animations coming to Safari Says:

    [...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

  93. Charles Ying Says:

    @Jason Sure wish it was that simple, I tried a screen capture, but the frames per second just wasn’t showing the full potential coming out of the animation, so I had to resort to a 3GS shaky cam for a recording.

  94. Technikwürze – Web Standards Podcast » Blog Archive » Technikwürze 142 – wenn alle sich streiten Says:

    [...] ist in der Browserentwicklung mal wieder weit vor allen anderen: Snow Stack zeigt CSS 3D Visual [...]

  95. Flashliknande effekter i Safari med nya CSS 3D-tekniken » Allt om Mac, iPod och iPhone - och vi älskar det! Says:

    [...] Läs mer här [...]

  96. Safari’s forthcoming CSS 3D transform features | aaronaiken/blog Says:

    [...] Safari’s forthcoming CSS 3D transform features via satine.org [...]

  97. WebKit CSS 3D Transforms & Leopard/Flash demise ? « Cjed Audio blog Says:

    [...] on the WebKit site a new demo that features CSS 3D Transforms : Poster Circles. We could also see Snow Stack demo at satine.org, and Animated CSS3 Cube at fofronline.com. The CSS 3D Transforms have been [...]

  98. Georg Portenkirchner (portenkirchner) 's status on Saturday, 18-Jul-09 17:02:39 UTC - Identi.ca Says:

    [...] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ [...]

  99. Alex Says:

    Fantabulous piece of code! I’ve you’re interested I’ve enhanced it a bit: – JS: added Google Picasa support – JS: added a configuration section – JS: renamed function “flickr” to “loadImages” – JS: moved all variables to the top and gave them lowercase names – HTML: moved jQuery file to the bottom – HTML: added encoding tag – ALL: modularized the files (html, css, js) Download at http://alexanderwillner.de/files/snow-stack-with-picasa.zip

  100. vice Says:

    I’m not a web developer, so can someone explain to me how this is different from the cooliris plugin.. other than it’s not a plugin?

  101. Web Apps with Accelerated Graphics | Future Tech Says:

    [...] that mimic desktop applications in graphical responsiveness. Charles Ying wrote a simple image gallery application that demos this new [...]

  102. Frank Jonen Says:

    Oh yes the typical ignorance just because you chose an example that may be familiar to people, the cooliris view. And of course the Opera user had to chime in with some flaming. Opera users are always somewhat amusing, both of them. :)

    For all of those who think that this is the only thing possible with that technology… REALLY? And electricity can only be used for light bulbs just because that was one of the first use case?

    I think this is really exciting for interfaces to come as it finally gives us ways to create immersive user experiences for more than just web applications. Point of sale units for example, right now that’s either a locked Keynote, a locked Director app or if you want something for people to grow eye cancer, PowerPoint in kiosk mode. I hope we can get this soon on a touch display for the POS assistant display we have on during concerts.

  103. Jubal Says:

    Well done! Can’t wait until Snow Leopard arrives.

    For the demo, might I suggest adding an option to use a local directory of images?

  104. Snow Stack shows off Safari’s CSS visual effects | Social Nibble Says:

    [...] If you’re not excited about the potential of updated CSS and HTML standards support in the newest WebKit browsers, you might be after you check out Snow Stack. [...]

  105. Snow Stack, desata todo el potencial gráfico de Safari Says:

    [...] información: Snow Stack Tags: 3D, CSS, efectos, flickr, imagenes, Safari, WebKit Otras entradas que te pueden [...]

  106. Ejemplo del potencial gráfico de Safari | Bitelia Says:

    [...] ejemplo del potencial gráfico de Safari y sobre todo de WebKit lo tenemos en el proyecto Snow Stack, una demo que utilizando HTML, CSS y algo de JavaScript nos muestra galerías de Flickr con [...]

  107. Snow Stack | Superposition Kitty Says:

    [...] Snow Stack: A 3D CSS visual effects demo. [...]

  108. links for 2009-07-21 « temp Says:

    [...] satine.org » Snow Stack is Here Absolutely ridiculous demo of 3D CSS Effects. (tags: development webkit software apple css html demo video) [...]

  109. Snow Stack : Effets 3D CSS et JavaScript avec Safari | ALLNews.fr Says:

    [...] [via] [...]

  110. Superheld » Blog Archive » Ratata Says:

    [...] Quelle Myspace [...]

  111. Everything is Gray » Snow Stack 3D CSS Says:

    [...] name of Charles Ying of Satine.org has developed a new 3D CSS visual effects demonstration called Snow Stack, which runs entirely on JavaScript, native WebKit CSS extensions, and XHTML/HTML. If you’re [...]

  112. Webkit’s new 3d transforms « number61.net Says:

    [...] out Charles Ying’s Snow Stack, for one [...]

  113. Webkit añade transformaciones 3D | Ricón de Ocio Says:

    [...] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit [...]

  114. Monthly Interesting Links Roundup (July 2009) Says:

    [...] full hardware support in Safari, fast, smooth, amazing http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ Firefox is already quite behind, now even more. It looks like no budget community development [...]

  115. Snow Stack — 3D CSS Visual Effects Demo « Says:

    [...] Fireballed at the moment; here’s the main link in Google’s cache. [...]

  116. designfloat.com Says:

    satine.org » Snow Stack is Here…

    What is Snow Stack?

    A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.

    You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or…

  117. web design sussex Says:

    This is just like the cooliris app i’ve used for firefox! Like the way this works using only css, webkit & javascript. Great effect, but currently I still prefer jquery carosel effects for displaying images or any sort of gallery/portfolio!

  118. » Flashliknande effekter i Safari med nya CSS 3D-tekniken En pixel om dagen Says:

    [...] Flashliknande effekter i Safari med nya CSS 3D-tekniken Om du gillade de nya 3D-effekterna i Safari 4 kommer du gilla vad som väntar bakom hörnet. Med hjälp av den nya tekniken, CSS 3D, så går det få flashliknande effekter med hjälp av bara HTML och CSS i webbläsaren utan något krav av plugins överhuvudtaget. Utvecklaren Charles Ying har skapat en liten demo av vad som går att göra med hjälp av den nya CSS 3D-tekniken. Har du tidigare testat Cooliris så känner du nog igen dig en del. Läs mer här [...]

  119. Paul Grunt » Blog Archive » Snow Stack Says:

    [...] Read more about Snow Stack. [...]

  120. Steve Jobs hates the App Store | FactoryCity Says:

    [...] all that didn’t succeed in killing off the App Store, well, he’d butter up a few tasty carrots to entice developers away from building native iPhone apps by making WebKit a formidable [...]

  121. Snow Stack : Effets 3D CSS et JavaScript avec Safari Says:

    [...] [via] Share and Enjoy: [...]

  122. The Back Button » HTML5: 60 Spinning 3D Cubes in Space Says:

    [...] my co-worker, Charles Ying, posted his 3D CSS Snow Stack demo online a couple of weeks ago, I felt compelled to give 3D CSS in HTML5 a try [...]

  123. Effetti 3d con safari | MAZZJOE Says:

    [...] discoveries and tech. Gli ingredienti sono webkit, css 3 e javascript. C’è chi è già al lavoro, con ottimi spunti per creare interfacce grafiche di grande effetto senza appoggiarsi a tecnologie [...]

  124. madhatter Says:

    this is retarded and a complete waste of computational resources.

  125. I’m excited about the future of the web at don’t explain Says:

    [...] Just how quickly, you ask? Here’s what you can already do in the latest version of Safari/WebKit (even on the iPhone version!), with nothing but CSS, and JavaScript to push it along (source: [...]

  126. Filling the gaps with Flash – szafranek.net Says:

    [...] This is an exciting time for web standards. HTML 5 is starting to catch on, JavaScript is faster than ever before and CSS allows for accelerated 3D animation. [...]

  127. reisekrankenversicherung Says:

    Great work, THANKS!! Greetings from Germany

  128. More sneak peeks at xTuio Says:

    [...] scene is the wall grid scene. This layout is heavy influenced by this wonderful webkit CSS demo: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ (and by heavily influenced, I mostly mean stolen, altho I must say that the unity implementation [...]

  129. Google Chrome Frameを入れてみたよ | gaspanik weblog Says:

    [...] ものは試しで一番手っ取り早いかなぁと思って、「Snow Stack」という名で有名なWebKitの3Dエフェクトとかを実装されたsatine.orgさんとこの実際のテストページにリンクしてみました。 [...]

  130. Raju Bitter Says:

    This is amazing, can’t imagine what JavaScript will be like in a 2 years from now! Great post!

  131. Limmuel June Says:

    congrats.. stunning work.. :D amazing

  132. Павел Векшин Says:

    ))))) хорошо пишешь

  133. Hochzeitsfotografie aus Hamburg Says:

    Great work, THANKS!! Greetings from Hamburg

  134. grimmwerks » Blog Archive » Snow Stack Says:

    [...] info can be found here. Posted by grimmwerks Filed in technology No Comments [...]

  135. Damir Says:

    By far the most amazing thing on the Web in 2009. Congratulations my friend.

  136. Canuck Says:

    Very cool! Anything that might help kill flash/silverlight and IE is very welcome to me!

    Runs alot smoother for me in Chrome(4.0.302.3) then Safari(4.0.4) on Win7 x64(Core2 3.16ghz). Safari gets choppy eating up a full core, but Chrome is smooth as butter.

  137. Yohane Says:

    Hello!

    What must I do, to take only my own Pictures into this application?

  138. Snow Stack Says:

    [...] info can be found here. No Responses to “Snow [...]

  139. CSS-Design Says:

    Awesome CSS feature, but I guess we have to wait a long long time until we can implement somethin’ like that into webprojects, because of the missing IE-Support. Thx for sharing the video!

  140. Texture plus Says:

    Yea its great but if there is missing IE support how we can use for webproject? will have soon IE supporting also??

  141. Implementasi HTML5 | HadiGunawan.net Says:

    [...] 1) Snow Stack [...]

  142. 闲谈CSS3动画 - David’s Blog Says:

    [...] 见live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only,类似于http://www.cooliris.com/的效果),没Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看视频演示。 [...]

  143. CSS3 Bookshelf « Steve Workman Says:

    [...] what books he’s found helpful over the years. After a little consideration, and watching the CSS 3D transform demo (snow stack), I thought that this is a perfect candidate for some CSS [...]

  144. GPU Acceleration and CSS 3D Transforms for Chromium nightlies « Peter Beverloo Says:

    [...] really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next [...]

  145. Chromium/Chrome 开始支持 GPU 硬件加速三维合成 Says:

    [...] 坦白的说不是特别重要,绝大多数的网页还是不适用于这个酷炫的功能,如果所有的网页都用上这个功能估计什么都看不了了。但不得不说 CSS 3D 转换在某些应用上还是非常关键的,比如以 3D 方式呈现的图片墙应用,有了这个功能就方便多了,不需要安装任何的插件或扩展就可以实现。 [...]

  146. 3D animations coming to Safari – 13 Point Bold Says:

    [...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform… < HMV selling Modern Warfare 2 [...]

  147. Chromium moving towards the GPU: CSS 3D Transforms « Peter Beverloo Says:

    [...] really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next [...]

  148. Ankit Desai Says:

    Any way to make the images click-through to another webpage (if i’m using my own personal images)?

  149. Ankit Desai Says:

    By click-through I mean for the zflow on the iphone.. Anyone have any ideas?

  150. Phewommaorago Says:

    A Seattle Transmission Repair and Service Betray dedicated to sending adjust and rebuilding, Clutch Repair, Locomotive Revamping, Upraise Extinguish Into working order, 4X4 Repair, Effort crease Repair, Fashionable Moving, Worn Transmission, Transmission parts and more.. transmission seattle

  151. Chrome Says:

    http://build.chromium.org/buildbot/snapshots/chromium-rel-xp/

    Snow Stack works great in the latest Chrome 7.0.549.0 and later versions.

  152. Laptop Driver Says:

    Amazing. Just stunning! Congratulations :)

  153. Frank Says:

    Hammer! Hätte gar nicht gedacht, dass es so etwas gibt.

  154. Power Balance Says:

    olarmı?

  155. CSS3_淘宝UED浅谈CSS3技术 - 红黑盟 Says:

    [...] 见live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only,类似于http://www.cooliris.com/的效果),没Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看视频演示。 [...]