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.
