Visual editor for animated hero text that exports clean React+Motion code, looking for testers

by•

I kept hand-writing Motion keyframes for landing page headlines — tweak a delay, reload, squint, repeat — so I built the thing I actually wanted: a visual editor where you scrub a timeline and see the animation, but it hands you back code you'd be happy to commit.

🔗 — no signup, nothing to install, runs in the browser

💻 — MIT

How it works: type your headline → select words to turn them into components → give each one effects on a timeline (fade, slide, zoom, rotate, color shift, blur, spotlight, typewriter, particles, fireworks) → scrub or hit play → Export spits out a single self-contained `Hero.tsx` using `motion/react`. No runtime, no watermark, no lock-in — drop the file in your project and never think about my tool again.

Stack: React 19 + TypeScript + Vite + Tailwind, zustand/zundo for state and undo, Motion for the exported output only — editor playback is raw rAF + direct DOM writes so scrubbing stays smooth.

What I'd genuinely like feedback on:

- Does the exported code look like something you'd keep in your codebase? That's the entire bet of this project.

- What effect or option is obviously missing?

- Anything confusing in the first 60 seconds? I've stared at this way too long to see it anymore.

Known rough edges, so you don't waste time reporting them:

- Desktop only — the editor is genuinely unusable on mobile right now

- Cloud sync holds one project per account (sign-in is optional; everything works from localStorage)

- Bundle is chunky (~380KB gzipped) — code splitting is on the list

- The caret does something dumb if you hit Enter at the very end of the text

This is my first time putting something open source out there, so I'm equally interested in problems with the repo — README gaps, setup that doesn't work on your machine, anything. Issues and PRs welcome, and I'll actually respond.

Thanks for taking a look.

3 views

Add a comment

Replies

Be the first to comment