Experiments and Projects

DANCING LETTERS

Overview

Dancing Letters is a small web tool that turns any poem/text into a moving, breathing piece of visual art. Languages: English, Spanish, Russian.
A user pastes a text, chooses one of fourteen animation scenes — letters can flip, swing, ripple in waves, spiral, pulse like a drum — fine-tunes speed, intensity, and colors, and presses Animate. The result can be watched full-screen, presented to an audience, recorded as a video, or exported frame by frame for further editing.

The project began as an artistic experiment: what happens to a familiar poem when its letters refuse to sit still? It grew into a multilingual, mobile-friendly tool that serves teachers, students, performers, and anyone who enjoys watching language come alive — including readers with dyslexia, for whom the tool offers a rare kind of recognition: here, for once, everyone sees the letters dance.

What it Does

The tool is organized around a single stage and a settings panel. The user controls the poem text, a secret word to highlight, the animation scene (fourteen options ranging from gentle — breathe, wave, swing — to wild — chaos, vortex, explosion), four toggleable letter effects (blink, drift, tremor, letter swap), and the full look of the stage: background image or color, darkening overlay, text color and size.

Work is never lost: compositions can be saved as named projects in the browser, exported to a file, and imported on another machine. For sharing, there are three paths — presentation mode for live showing, one-click video recording of a full animation loop, and a ZIP export of every frame as a PNG image for professional editing.

Everything runs in the browser. There is no account, no server, no tracking, and no installation; the entire application is one HTML file per language.

The secret word feature turns reading into a game — the teacher hides a word inside the poem and students hunt for the highlighted letters. The sequential highlight mode supports choral reading and memorization, guiding the eye through the text at an adjustable pace.

To generate secret word use another application I created: https://webuela.github.io/secretword/.

Technical summary

Vanilla HTML, CSS, and JavaScript; per-letter animation driven by CSS transforms and JavaScript timing; video capture via the browser MediaRecorder API; frame export rendered to canvas and packaged as a ZIP client-side; project storage in localStorage with file-based export/import. Total footprint: about 55 KB per language edition. External dependencies: web fonts and an icon set from public CDNs — nothing else.

Outcomes and directions

The project demonstrates that a genuinely useful classroom and creative tool does not require an app store, a backend, or a subscription — a single well-crafted file and a free static host are enough. Natural next steps include additional animation scenes contributed by users, more language editions (the three-edition structure makes adding a fourth mechanical), sharable links that encode a composition, and optional reduced-motion presets for viewers who prefer calmer movement.
Dancing Letters is open for feedback, translations, and forks. If the dancing letters made you smile — or made you think — the project has done its job.
2026-07-05 09:41 Interactive Creativity Coding