3D Slides Built with HTML5, CSS3, and SVG


I've created a 3D slide deck that uses HTML5, CSS3, and a bit of SVG (video). The main idea behind this deck is to be able to 'zoom' into topics to as deep a level as necessary. Slides are nested, like an outline.

For example, I gave a talk at Future of Web Apps recently on HTML5, CSS3, and other web technologies and only had 40 minutes, so I just skimmed the surface of the slides. However, in a few days I'll be speaking at Fronteers and will be diving deep into SVG and Canvas, so those slides can be zoomed into. The goal is for me to have a universal slide deck that can 'accordian' open and closed to fill either a 40 minute session or an all day workshop, kind of like stretchtext.

You can view the presentation yourself; however, it currently depends on CSS 3D transforms which only work on Safari/Snow Leopard currently. CSS 3D transforms are coming to Firefox 4 and the next version of Chrome though so the features powering this slide deck should be more universal soon. The slides also might take a few seconds to load as they were designed for me to load from my local system rather than over the network, as there are a fair number of images and I haven't optimized things yet.

Whenever you see a blue arrow, you can pres the keyboard arrow keys in the direction indicated and 'dive deeper'. You can also use the keyboard arrow keys to jump through the slides. Press the space bar to zoom in and out of the slides themselves.


In creating the slide deck I wanted to find something that was between being purely linear like Keynote or Powerpoint and completely non-linear like Prezi. I think there's real power in applying this same kind of quasi-3d ability to zoom in and out of topics. You could just create an outline in your presentation tool and have it generate into something like this. I've also realized how powerful HTML5, CSS3, and SVG are, as they can generate almost all the effects of Keynote now and all we need is an authoring tool to generate things in HTML5 (or maybe just convert Keynote files to HTML5/CSS3/SVG)?

The presentation itself is a series of nested HTML5
elements, representing an outline. Sections are animated and positioned using CSS 3D transforms, and the blue arrows are SVG. There are lots of embedded demos and live controls that let you experiment with HTML5, CSS3, and SVG and learn by doing.

For the WebGL demo to work you will have to be using a WebGL capable browser.

The slide deck could be extended in the future to work with gesture events on the iPhone and iPad, and since CSS 3D is hardware-accelerated on those platforms it would be quite fast. It is also pure text, so it is search engine friendly. In addition, it could be made to degrade nicely for older browsers using media queries or other tricks.

I'm continuing to fill out the slide deck, and am available to use it for corporate training sessions, workshops, and presentations at conferences on the new web technologies coming down the pipeline. I'm also looking to join a great startup in San Francisco applying things like HTML5 and real software engineering with JavaScript to enable new kinds of web applications.

Comments

Kevin marks said…
I think you're missing the point of Prezi - it's not completely non-linear, it's a 2D mindmap that you can create a linear path through, not pictures on a grid.
Now, getting Prezi to be pure HTML5+SVG+CSS would be neat...
Brad Neuberg said…
@Kevin Marks: I actually started by taking a look at the Prezi XML file format which can be exported from their desktop tool, and seeing how I could implement it using SVG transforms. However, I realized that Prezi is overkill for my needs and I actually don't generally want to present in the Prezi style. What I do want is something closer to stretchtext but for presentations so that I can tailor presentations for the audience much better.
Anonymous said…
damn. that is the hottness. marvelous!
Ricardo Tomasi said…
Snow Stack anyone?

http://www.satine.org/archives/2009/07/11/snow-stack-is-here/
garethj said…
This is great work Brad, really impressive stuff. I had a similar idea and threw together a prototype that allowed zooming/rotating through a path of HTML elements using CSS transitions. It's nowhere near as nice looking as yours and doesn't do any WebGL stuff but shows how you'd take more of a Prez-like approach to this kind of thing.

As you mentioned in your post, the real problem here would seem to be the lack of authoring tools - we need a way of navigating the 'slides' whilst editing.

I look forward to seeing what other people put together in this space.
Brad Neuberg said…
@Ricardo Tomasi: I learned a great deal from studying the Snowstack code for this, and adapted some of his camera and layout code for this.
Brad Neuberg said…
@garethj: Nice!
Benabus said…
Hey there. This is really pretty. I thought you might be interested in my master's thesis project I presented last May: http://thestumblingponcho.com/Featured/23
Anonymous said…
Sounds cool but I wish it would work in Safari html5 :(
Unknown said…
Interesting - as a Product Marketing Manager in the enterprise software space, you spend a lot of your time building ways of presenting information at different levels. These get used to provide high-level overviews for CxO-level conversations, product-level overviews for business decision maker conversations, and detailed technical presentations for technical evaluators. And half of them use much of the same content.

I've always desired the ability to build a master deck, and then simply overlay a navigation path through the material, thus eliminating a lot of work in maintaining such decks.

Looks like a promising model.