Kinetic Typography

Start with a song, a poem, a famous speech or even your own words and then put the words to motion.

Comment

Inspiration

Creating effective animation is both an art and a science. By limiting the visual domain to the letters and words that express meaningful ideas, you can concentrate on using the movement of the text to express the ideas behind a song, a poem, or even a favorite speech.

What it does

Kinetic Typography is a design tool for creating Kinetic Typography animations that can be saved as HTML/JS/CSS to be posted on a website or turned into videos that can be posted to YouTube.

MUMT Features

Designed to work on a touch device, you can use your finger to move phrases, two fingers to rotate phrases, and two finger pinch to resize phrases. Dragging up and down on numeric edit boxes with your finger modify the values in an easy-to-use way.

How I built it

I built this as a C#/Xaml app that uses XSLT to generate animation using HTML,JavaScript, and CSS.

Challenges I ran into

  1. Exposing the various manipulation tools in an easy to use way without making the app too complex.
  2. Generating the audio histogram ## Accomplishments that I'm proud of Creating a touch-optimized UWP app for animation creation. ## What I learned I learned about the power of CSS animations. ## What's next for Kinetic Typography I want to update this to work on the Microsoft HoloLens to animate text in three dimensions.
Share this project:

Updates