Skip to main content

Kiel Mutschelknaus’ Space Type Generators let you make hypnotic animations right from your browser

Kiel Mutschelknaus’ Space Type Generators let you make hypnotic animations right from your browser

Share this story

I recently found myself entranced by a series of type generators — websites that allow you to create experimental animated type, then transform them into personal pieces of moving art. It’s easy to lose track of time playing with all the settings. And if you get frustrated (and I honestly don’t believe you can because they’re so fun) there are presets you can toggle to help.

The mastermind behind these sites is Kiel Mutschelknaus, a multidisciplinary artist whose work spans design, animation, typography, and recently, coding. Mutschelknaus, an educator at Maryland Institute College of Art in their graphic design department, has been working on more than 30 different generators, and he’s published four online so far. He calls them Space Type Generators, and the different versions — v.Cylinder, v.Field, v.Stripes, and v.Coil — offer different parameters you can customize, like how the text animates, the colors, speed and, of course, what the text says.

I reached out to Mutschelknaus to learn more about the generators and his process.

This interview has been lightly edited for clarity.

The Bricks preset in v.Field
The Bricks preset in v.Field

What was the inspiration behind making these generators?

They mainly come from a place of learning and experimentation. Last year I was creating these typographic chandeliers and it was so hard to experiment and iterate on the forms with the software I was using (After Effects and Cinema 4D). It took the programs forever to render changes. I decided to switch up the tools and translated into a coded environment, Processing.

From there it just exploded. I could get instant feedback of the forms through changing the parameters as it was animating. I kept adding more and more waves and parameters to different aspects of those forms. It was crazy easy to generate motion graphics. And to generate generators. And to iterate on those generators. Crazy fruitful. I’ve ended up with 30+ generators.

What is your process in building one of these? What do you use?

I start coding them in Processing, which is a Java-based coding environment for coding noobs like myself. If I think the generator is efficient enough to run in a browser, I recreate it in JavaScript with the p5.js library (which is some JS that closely mirrors Processing). Then it’s just pushing it to the site.

I always get questions about what the typeface is. The type in the generator isn’t an existing typeface. It’s something I’ve coded directly in Processing / p5.js that is a series of lines with a stroke applied to it. It’s my very rough, makeshift variable font I call LoFi Mono. I would love to explore getting actual fonts to work in the generators.

Where did you learn the skills needed to build something like this?

It’s been largely self-taught from YouTube University. I had a pretty traditional, print-based graphic design and illustration background. In grad school at Cranbrook, I started to explore motion graphics and that quickly led to learning 3D and coding. And then I started teaching motion graphics! Which turned out to be a really great way to learn more about it.

I’ve also always had an interest in math and that’s really come in handy with these recent experiments in waves and trigonometry.

One of the many reasons I really enjoy your work is that it’s a nice blend of design, type, motion graphics, and coding — did you always have an interest in coding or did that come later?

It came later. I started with motion graphics and I found the bridge from there to coding to be very direct. Motion graphics and coding both have a basis in loops and embedded animations and connected systems and objects and parameters, and really it’s all the same thing.

You’re currently full-time faculty at the Maryland Institute College of Arts’ graphic design department, can you tell us a little about what you teach there?

I teach classes in motion graphics, 3D, and some foundational graphic design classes. I’ve always enjoyed emerging technologies and processes and that’s become my niche in the department. My 3D / 4D graphics class is actually going to be designing 360 environments for our final project and I’m hoping we can critique the pieces in VR, which I’m very excited about.

How does teaching compare to freelancing?

They inform each other in a surprisingly symbiotic way. I’m able to bring client projects from my studio practice to the class to illustrate IRL examples of what we’re talking about. And on the other end, I’m constantly bringing ideas that come up in our class back to my studio practice. (Those early typographic chandeliers that inspired all these pieces actually came from a motion tracking demo I was doing for my advanced motion graphics class.)

If someone was interested in learning how to build similar apps or sites, what advice would you give them?

For coding start with Processing. And Daniel Shiffman. I’m a devout follower of D. Shiffman and the church of Processing. He’s so generous with his YouTube channel and his online books. It’s a great, great place to begin learning about the core concepts of coding.

Do people share what they make using your generators with you?

Yeah! I don’t always get tagged, but people have been great using the #SpaceTypeGenerator. I’m really excited when I see it being used as one component of a larger designed piece. It’s satisfying to see STG used as an actual image-making tool alongside PS or AI.

Do you have a favorite?

I recently collaborated with Post Typography to create a custom generator for an identity project they had. Their designers had been playing with STG v.Field and it was incredibly rewarding to see practicing professionals I admire twisting and breaking the tool into really beautiful forms. They were generating visuals I hadn’t considered before. Very exciting.

The Lemniscate preset in v.Coil
The Lemniscate preset in v.Coil

Do you have anything you’re working on now you’d like to share?

I have like five new generators running through my mind. Those will probably start in Processing and possibly migrate to an online home. I’m having a real challenge with optimizing some of my existing Processing generators so they can work in a browser with JavaScript.

I’m really interested in bringing one of the Perlin noise generators online. There’s lots of beautiful, flowing, random forms I would love to see people experiment with.

Do you have any exhibitions planned for the future?

No, but it’s something I want to do. Instagram has been a great platform to share these but I would like to see them in a physical space. Whether it’s an interactive installation or large-scale prints, I really want to get them off the small screens.

Not a question, just want to share with you how much I love this:

Yeah! Thanks! I used my first type generator to create the forms, brought them into C4D, and played with reflection and light to create the movement. Ugh. I’d love to come back and explore this more, too. Not enough hours in the day!