Shape Morph O
A shape morphs through several forms, then lands as the O of the wordmark beside the R mark.
$ pnpm dlx shadcn@latest add @remocn/shape-morph-oUsage
// src/Root.tsx
import { Composition } from "remotion";
import { ShapeMorphO } from "@/components/remocn/shape-morph-o";
const ShapeMorphOScene = () => (
<ShapeMorphO
word="remocn"
mark
accent="#3B5BFD"
/>
);
export const RemotionRoot = () => (
<Composition
id="ShapeMorphO"
component={ShapeMorphOScene}
durationInFrames={160}
fps={30}
width={1280}
height={720}
/>
);A single shape appears centred and morphs through circle, cookie, clover, burst, pill and square, then flies into the first o of the word as the other letters reveal and the counter opens. Pass word and mark, which sets a leading r as the R mark. Ships light and dark.
Props5
| Prop | Type | Default |
|---|---|---|
| word | string"remocn" Word the shape lands in; its first o becomes the shape. | |
| mark | booleantrue Set a leading r as the R mark; ignored otherwise. | |
| accent | string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour. | |
| theme | "dark" | "light""dark" Dark or light palette and ground. | |
| speed | number1 Playback multiplier for the whole timeline; 1 is normal speed. | |
- wordstring
Word the shape lands in; its first o becomes the shape.
Default
"remocn" - markboolean
Set a leading r as the R mark; ignored otherwise.
Default
true - accentstring
Accent colour for the mark and highlights; any CSS colour.
Default
"#3B5BFD" - theme"dark" | "light"
Dark or light palette and ground.
Default
"dark" - speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default
1