OneWindyNight

OneWindyNight (OWN) is a tool for selectively replacing pieces of text in a web page with "spiffed-up" text in either SVG or CANVAS elements.

The OneWindyNight home page is chock full of demos!

Features

Implementing animated drop caps and pull quotes was the original use case. Right now, one animated-text handler, which manipulates an SVG representation of the target text via CSS animation, is built in. Here's what it looks like:

How to use OWN now

1. Get opentype.js or opentype.min.js file from the opentype.js project's master.zip file.
2. Select a TrueType and OpenType font with a friendly license. I've used Claus Eggers Sørensen's lovely PlayfairDisplay-Bold.ttf for the OWN demo page.
3. Get OneWindyNight.js from the OWN master.zip file.
4. View-source of the OWN demo page to see how it's used.

Roadmap

1. Add more animated-text handlers.
2. Make adding new animated-text handlers more straightforward.

Thanks!

I'm grateful to everyone whose hard work made writing OneWindyNight feasible, particularly to the authors of the awesome opentype.js project and to typeface creators like Claus Eggers Sørensen who have made their work available for creative reuse!

Thanks also go out to Cockos Incorporated, the creators of LICEcap, the free and excellent tool which I used to record the animation sample shown above.