Speak Up: An Interactive Voice-to-Typography Experience

Speak Up: An Interactive Voice-to-Typography Experience

Koalition® is launching an interactive art playground—a space to experiment with digital interactivity, motion, and generative design. Over the next year, the goal is to create 20 interactive art installations, culminating in a physical exhibition in Bushwick, NY and Athens, GA. The first piece in the series, Speak Up, transforms spoken words into dynamic, physics-based typography. Using React, Matter.js, and GSAP, the project visualizes speech as floating, colliding letters that respond to movement and force. This is just the beginning of an exploration into how technology can make sound, motion, and language tangible, interactive, and expressive.

Check it out

Experience
Get in touch!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Building 20 Interactive Art Installations

One of the best things about working in tech is that it can also be a creative outlet. It’s easy to get caught up in deadlines, client work, and the daily grind, but stepping back to experiment and play isn’t just important—it’s necessary.

That’s why we’re carving out space for something new. We’ve launched an interactive art playground—a place to push the boundaries of web-based art and create immersive digital experiences. Our goal? To develop 20 interactive art installations and host a physical exhibit in Bushwick, New York, next year.

Each project is an experiment in interaction, motion, and generative design. How can technology visualize sound, movement, and language? How can simple digital inputs—like speech, gestures, or eye movement—be transformed into something unexpected and expressive?

The first piece in this series is Speak Up, an interactive voice-to-typography experience that transforms spoken words into living, moving, physics-based letters.

Speak Up: An Interactive Voice-to-Typography Experience

Words are fleeting. Once spoken, they disappear—unless you give them weight, movement, and space to exist beyond the moment.

Speak Up does just that. It’s an experimental web art project that turns your voice into an ever-shifting typographic landscape. Built with React, Matter.js, and GSAP, it bridges the gap between speech and visual expression, making language tangible, interactive, and playful.

How It Works

The moment you start speaking, your voice takes on a physical presence:

  • Real-time speech capture – Your microphone picks up your words instantly.
  • Dynamic letter generation – Speech is transcribed and broken down into individual letters that appear on screen.
  • Physics-driven interactions – Letters float, collide, and drift, behaving like objects in a real-world physics simulation.

Each letter becomes a living entity within the space:

  • Physics-powered movement – Matter.js enables natural motion, gravity, and force dynamics.
  • Fluid animations – GSAP ensures smooth, organic transitions.
  • Interactive behaviors – Letters respond to each other, bouncing and shifting as more words enter the space.
  • Device adaptability – Whether on desktop or mobile, Speak Up scales intuitively, delivering a seamless experience.

The result? A constantly evolving composition that mirrors the rhythm of speech, turning something intangible into something visual, interactive, and alive.

Technical Highlights

At its core, Speak Up is a fusion of creative coding, real-time interaction, and performance optimization:

  • Physics Engine – Built with Matter.js for realistic gravity, collisions, and movement.
  • Speech Recognition – The Web Speech API processes spoken words instantly.
  • Performance Optimizations – Efficiently manages letter lifecycles to maintain a fast, fluid experience.
  • Device-Specific Adaptations:
    • Desktop – Expansive animations, larger-scale typography, and nuanced physics.
    • Mobile – Optimized display and touch-based physics tuning.

The Visual & Interactive Experience

While the technology behind Speak Up is powerful, the experience is what makes it stand out:

  • Minimalist aesthetic – The clean design keeps the focus on movement and interaction.
  • Typography as art – Letters blend together using multiply blend modes, creating depth and fluidity.
  • Curated color palette – A thoughtful selection of colors enhances readability while maintaining artistic intrigue.
  • Immersive animations – Physics-based motion ensures every interaction feels intentional and dynamic.
  • Scalability – Speak Up adapts to different screen sizes, maintaining its immersive quality on any device.

This isn’t just about typography—it’s about capturing the essence of speech and transforming it into something you can see and interact with.

A New Space for Interactive Art

Speak Up is just the first step in this evolving series of 20 installations. This project—and the broader interactive art playground—is an opportunity to explore the intersection of technology, design, and human interaction.

We’re asking questions like:

  • What happens when speech becomes something you can touch?
  • How do digital words behave when freed from the static screen?
  • What other hidden patterns in our everyday interactions can be visualized?

These are the ideas we’re playing with.

By next year, we hope to bring these projects into a physical space in Bushwick, where people can experience them in person—interacting with digital installations that respond to movement, voice, and touch.

For now, Speak Up is live. Try it, speak into it, and watch your words take on a life of their own.

This is just the beginning.