String Hero
A line of code being typed, and then the string inside it becomes the headline.
How it moves
Two shots on one clock. The first is an editor window pushed from 0.91× to 4.24× over two and a half seconds — not an ease, a table, one knot per frame, read off the sub-pixel centroids of the window's own chrome dots and the black body's edges so the scale and the position cannot drift apart. It sits almost still for the first two thirds of a second while the comment is typed at 17.5 characters a second, then pushes hard into the quoted argument until the title bar has left the top of the frame. Then a hard cut, and the argument is alone on black at 108px, drifting up-left out of an exponential settle. It swaps monospace for the display face one letter at a time, left to right, with the hot colour trailing the boundary: 36 letters a second at the start and 16 at the end, because a hand slows into the last letter and a linear sweep lands it a sixth of a second early. The boundary is one letter wide on every frame — no letter is ever caught half way, which is what makes it read as a substitution rather than a cross-fade.
Installation
$ pnpm dlx shadcn@latest add @snapcn/string-heroNeeds an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.
Frequently asked questions
How do I add String Hero to a Remotion project?
String Hero is part of snapcn Pro, and installs with the same shadcn CLI as every free component: npx shadcn@latest add @snapcn/string-hero. The source is copied into your project and is yours to edit — there is no runtime package to keep installed.
What is String Hero?
String Hero is a Remotion product demo animation for React. A line of code being typed, and then the string inside it becomes the headline.
Is String Hero free?
No. It is one of 48 Pro components, sold together: $129 a year for the whole catalogue and everything that ships while your year runs, or $249 once to own it outright. The other 41 snapcn components are free and MIT.