Rubberband Word
A cursor grabs a word by its last letter, stretches it like elastic, and it snaps into a new word.
$ pnpm dlx shadcn@latest add @remocn/rubberband-wordUsage
// src/Root.tsx
import { Composition } from "remotion";
import { RubberbandWord } from "@/components/remocn/rubberband-word";
const RubberbandWordScene = () => (
<RubberbandWord word="stretch" snapWord="deliver" />
);
export const RemotionRoot = () => (
<Composition
id="RubberbandWord"
component={RubberbandWordScene}
durationInFrames={130}
fps={30}
width={1280}
height={720}
/>
);A cursor reaches in, grabs the last letter of word and pulls it out on a taffy band while the letters spread and squash. On release the word snaps back, overshoots, and swaps to snapWord, closing with an accent period. Pass word and snapWord. It takes a theme prop and ships light and dark.
Props6
| Prop | Type | Default |
|---|---|---|
| word | string"tension" The word the cursor grabs by its last letter. | |
| snapWord | string"release" What the word becomes on the snap. Empty keeps the word and only accents it. | |
| period | booleantrue Close the final word with an accent period. | |
| accent | string"#3B5BFD" Color of the pulled letter and the closing period. | |
| theme | "dark" | "light""dark" Light or dark ground; the component ships both. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- wordstring
The word the cursor grabs by its last letter.
Default
"tension" - snapWordstring
What the word becomes on the snap. Empty keeps the word and only accents it.
Default
"release" - periodboolean
Close the final word with an accent period.
Default
true - accentstring
Color of the pulled letter and the closing period.
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark ground; the component ships both.
Default
"dark" - speednumber
Playback speed multiplier for the whole timeline.
Default
1