Bounce Logo

The wordmark bounces around the frame like an old DVD logo until it hits the corner and resolves.

Installation

$ pnpm dlx shadcn@latest add @remocn/bounce-logo

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BounceLogo } from "@/components/remocn/bounce-logo";
 
const BounceLogoScene = () => (
  <BounceLogo
    brand="remocn"
    line="Hit the corner."
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BounceLogo"
    component={BounceLogoScene}
    durationInFrames={168}
    fps={30}
    width={1280}
    height={720}
  />
);

The wordmark bounces off the frame edges on a path solved backwards so the final hit always lands in a corner, where it blooms, glides to the centre as the lockup and line rises beneath. Pass brand and line. Ships light and dark.

Props5

Prop	Type	Default
brand	string"remocn" Wordmark that bounces; Remocn renders the real logo.
line	string"Hit the corner." Line under the final lockup; empty hides it.
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.

brandstring
Wordmark that bounces; Remocn renders the real logo.
Default"remocn"
linestring
Line under the final lockup; empty hides it.
Default"Hit the corner."
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