Kinetic Typography: a New Design Tool

  • Article

Logo.scale-100If 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.

image

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.

WindowsStore_badge_en_English_Black_med_258x67