satine.org

If you have a recent browser build of WebKit nightly, you’re going to love this movie trailers demo I’ve been hacking on. Click on the image above, select a movie trailer, and check out Safari 4’s video reflections using CSS Effects. Recent WebKit nightlies with the latest QuickTime installed give the best experience, with flawless transitioned video reflections. Safari 4 Beta also provides a decent experience, but doesn’t transition reflections.

What you are seeing is:

• A WebKit reflection applied to a HTML5 video tag. It’s also just 1 line of CSS, and the same reflection is applied to the movie poster thumbnails as well:

-webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));

• HTML5 video events, “loadstart” and “finished” which then change the page state.

• CSS Transitions handle all of the animation, so my code simply adds and removes the “darker” class to make the text and the movie thumbnails fade out while the video is playing. Things like stopping the video before it fully fades in just works.

Up until Safari 4, video reflections had not been working very smoothly. But times sure have changed.

I should note that video reflections are really tough to do, especially in a web browser. Flash makes it somewhat possible, but not easy, and certainly not as fast as what you see here. And I hope this example gives you a taste of what a cinematic user experience might look like in a web browser.

You may also be interested in my post on CSS CoverFlow, complete with snapping, physics, and perspective correct 3D.

Technorati Tags: Safari 4, Apple, WebKit, CSS, HTML5, video

I have always been frustrated with writing song lyrics. Almost all my songs have been instrumental, except for one, which had terrible lyrics and took forever to write.

Before starting PixVerse, I prototyped a NLP lyric writing helper with a markov-chain language model. Sadly, it didn’t seem to offer much practical help when I actually tried to write some lyrics with it. Back on the shelf it went, until recently.

I came back to song writing, but this time on iPhone. I changed the goal to be: “A rhyming dictionary that works really well for songwriters.”

I looked at the existing rhyming dictionaries on the web and iPhone. A lot of them really don’t work well – you get all these words that don’t really fit thematically with what you’re trying to write. No soul, just obscure terms that happen to rhyme.

So it was time for a new approach: Use a lot of interesting data and simple algorithms.

iRhyme constructs its rhymes database from a simple natural language analysis of a very large song archive (corpus). Think of iRhyme as the collective knowledge of songs and songwriters condensed into a 16 MB iPhone app. Most of the effort went into packing all those rhymes in a easily retrievable format.

It was very cool to see the results of the analysis. With some tweaks, iRhyme had linked over 1.5 million relevant words and rhymes together, with some pretty canny free-associative rhymes emerging from the data. iRhyme has over 50,000 unique words, all used in real songs.

For now, you can buy iRhyme for $0.99 on iPhone. It’s a pretty good value compared to the cost of an “old world” printed 100,000 entry rhyming dictionary. iRhyme also fits better in your pocket (the entire database is stored locally).

I am also currently working on upgrading iRhyme’s database, increasing iRhyme’s depth even further, which will part of an upgrade once I can figure out how to pack all the new data into the 10MB over-the-air App Store limit.

iRhyme is available from getirhyme.com or directly from the App Store.

Technorati Tags: iRhyme, iPhone, NLP, rhymes, App Store

Did you know that 3D graphics and animation is possible with Safari on iPhone?

If you have an iPhone, try out the CoverFlow (zflow) demo live with a live Flickr feed.

This CoverFlow demo is part of a new open source project I’ve started, CSS-VFX. The idea with CSS-VFX is to demonstrate all the cool things that are possible with Apple’s CSS Visual Effects extensions.

How does it work?

The zflow demo in CSS-VFX uses the Apple CSS Visual Effects extensions for hardware accelerated (on iPhone!) 3D perspective correct transforms and easily animated transitions. HTML 5 Canvas is used for simulating reflections.

• zflow starts by loading each image from the images array. When each image is loaded, we scale the image to fit in a square region, and apply 3D CSS transforms to scale it in place.
• Reflections – zflow then takes the scaled image and creates a Canvas element that contains a gradient alpha mask of the image’s reflection (using a “reflect” function to do this) and positions the canvas element in place.
• Touch Controller – zflow creates a TouchController object, who’s job is to field touch events from Mobile Safari and calculate an appropriate offset.
• Clicking – zflow detects when no move events have been made, and zooms + rotates the focused image forward by setting a “CSS Transition”ed 3D transform on the focused image. Clicking again transitions the image back.
• Inertia – zflow achieves inertia by setting the “transition timing function” of the “tray” to an “ease-out” function, which slows things down. On the touch end event, we calculate the projected velocity and set the tray’s target position to that location. CSS Transitions handles the decay in velocity as the transition timing function executes — slowing the tray down gradually.

What’s next?

I hope that CSS-VFX can become a series of graphics gems that clearly illustrate how to use CSS Visual Effects, as well as talk about some of the corner cases and best practices to get the best performance. If you come up with something you’d like to include, please let me know. I’ll be tinkering with a few more gems myself, just watch the project for more as time goes on.

And tell a friend, I can’t wait to see what everyone else does with these great new features in Safari on iPhone.

Where to learn more

The CSS-VFX open source project is a good place to start. You can just use the zflow code in your own iPhone web pages (there’s docs on how to do that); and deep dive into the innerworkings of zflow to understand what exactly is going on.

Also, check out Apple’s proposed extensions: CSS 3D Transforms, CSS Transitions, and CSS Animation. They provide full specifications on what’s possible. Of course, there are a few gotchas when using these in practice, and I hope to document these as things progress.

Technorati Tags: iPhone, Safari, CSS Visual Effects, graphics, 3D