Kinetic Typography: a New Design Tool

If you know my background, you know that I have a passion for building tools for creative design.  Recently I’ve had a fascination with Kinetic Typography and saw the convergence of a few key technologies.  This inspired me to create a new touch-based app for Windows 8.1, Kinetic Typography, a design tool for Kinetic Typography.

The technologies that made this possible are:

• CSS Animations which enable you to do sophisticated key-frame based animation with easing/timing functions
• CSS 3D Transforms which enable you to specify 3D coordinate system transformation for any HTML element
• Windows 8.1 WebView.CapturePreviewToStreamAsync() method that allows you to capture an image of a web page hosted within an app

Combining these things, I was able to create an app that can output various types of content:

• An HTML page with the animation CSS embedded in it.
• A zip archive with the HTML page and audio file.
• An MP4 video file suitable to upload to your OneDrive or YouTube.
• A CME Package that can be played back with the free Authentic app.

This is a “hybrid” app where I used a variety of programming languages:

• C# & Xaml for the UI and code
• C++ for the components that created the audio histogram, turned images into video, and got the system fonts
• XSLT to generate the HTML
• HTML, CSS, JavaScript to create the animations

Please give this app a try and give me your feedback – there’s lots of things I an do with it like automated uploading to YouTube ,OneDrive, or Windows Azure, output additional media format, even add a marketplace for audio tracks.  What should I add/fix/change?

It’s free for a limited time.