Typevine
Type a message and watch it grow into an animated scene you can save as an image or a looping video. A playful zero-to-one product I designed and built solo with AI, live and early.
Open Typevine (opens in a new tab)- Role
- Designer and Builder
- Timeline
- 2026
- Status
- Live: typevine.com
- Built with
About
Typevine turns a message into a small animated scene. Type “Happy birthday Maya” and vines start growing over and under the letters, flowers open, fireflies drift past. Pick a world, adjust how it looks and moves, and save it as a still image or a looping video to send to someone. It opens straight into the scene: no account, no template gallery, no paywall at the end.
It’s live at typevine.com with two worlds, the Enchanted Forest and the Deep Reef.
Why I built this
It started as a weekend of fun. I saw a post on Twitter about Type Garden, a small experiment by Akshat Agarwal where a garden grows out of the letters you type, and it made me want to try something similar and give it a spin in my own style.
Paletta and Popshot are tools: they exist to remove friction from work. This was the opposite, something whose only job is to feel good to use. I wanted the moment of typing to be the product: every key makes something grow, so it feels closer to a game than a form. And I wanted it to end in something you can send, without the account, fees or ads that most digital cards ask for.
How it works
Even with the inspiration, part of the fun challenge was to rebuild everything with AI and not use the original code at all, so the result is my own and can carry my vision and my themes. The heart of it is an engine written in plain TypeScript, with no DOM, no clock and no Math.random. It lays out the letters, grows the vines along and around them, tangles them over and under the strokes, and decides every frame from a seed and a time. The same message and the same pattern number always grow the same way. That’s what lets the live preview, the saved image and the video match exactly, with nothing to sync between them.
Each world is a full scene in Three.js, with depth, light and particles, and the card itself is drawn with Canvas 2D inside it. The interface is Preact with signals, built with Vite and deployed on Vercel. Videos are encoded as MP4 in the browser, so making one needs no server.
Readability is the hard constraint. A vine that hides the message ruins the card, so a test sweep grows the vines for twenty patterns, three formats and many messages, and checks every frame against limits on how much of each letter the art may cover.
What shipped
Everything below is live at typevine.com:
- Two worlds: the Enchanted Forest (ivy, flowers, mushrooms and fireflies in a moonlit wood) and the Deep Reef (kelp, coral and bubbles in blue water), each with three looks
- Growth that follows your typing, letter by letter, up to 200 characters
- Customize: font, motion, how much grows, speed and format, plus a pattern number and a shuffle
- Save a still image, free
- Make a looping video, free, with a small Typevine logo
- Landscape, square, portrait and story formats
- A phone layout with the controls in a bottom bar
- Undo and redo, keyboard shortcuts, sound, and a Reduce motion setting that keeps the preview still
- Cookieless analytics that never record the message you type
Where it stands
Honestly, I’m not sure yet. Typevine was a fun weekend project, and it may keep growing organically, one world at a time, or stay just as it is. Either way it did what I wanted: it let me take an idea I loved, make it my own, and see how far building with AI could go in a few days.
