Shape Morph O

A shape morphs through several forms, then lands as the O of the wordmark beside the R mark.

Installation
$ pnpm dlx shadcn@latest add @remocn/shape-morph-o

Usage

tsx
// 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

PropTypeDefault
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.

    Defaulttrue

  • 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.

    Default1