Ripple Mark

Dots ripple outward across the frame and light up the R mark, then the name appears beside it.

Installation

$ pnpm dlx shadcn@latest add @remocn/ripple-mark

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RippleMark } from "@/components/remocn/ripple-mark";
 
const RippleMarkScene = () => (
  <RippleMark
    name="remocn"
    accent="#3B5BFD"
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RippleMark"
    component={RippleMarkScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

A field of dots ripples outward from the centre and the dots inside the R mark light up in the accent colour, then the camera pans and the name letters appear beside the mark. Pass name (Remocn is set as the real logo) or your own logo path. Ships light and dark.

Props5

Prop	Type	Default
logo	string \| string[]— SVG path or paths of the mark; defaults to the R.
name	string"remocn" Name set after the mark; Remocn is set as the real logo.
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.

logostring | string[]
SVG path or paths of the mark; defaults to the R.
namestring
Name set after the mark; Remocn is set as the real logo.
Default"remocn"
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