Squircle Wave

A wave of squircle cells sweeps across a dot grid and leaves the R mark behind.

Installation
$ pnpm dlx shadcn@latest add @remocn/squircle-wave

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SquircleWave } from "@/components/remocn/squircle-wave";
 
const SquircleWaveScene = () => (
  <SquircleWave
    accent="#3B5BFD"
    theme="dark"
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SquircleWave"
    component={SquircleWaveScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A dot grid fades up, then a diagonal wave of squircle cells sweeps across it and the cells inside the R mark lock in solid as the crest passes, leaving only the mark. There is no text prop and the mark is the baked-in Remocn R. Pass accent for the wake colour. Ships light and dark.

Props3

PropTypeDefault
accent
string"#3B5BFD"

Colour of the wave's leading edge behind the crest.

speed
number1

Playback multiplier for the whole timeline; 1 is normal speed.

theme
"dark" | "light""dark"

Dark or light palette and ground.

  • accentstring

    Colour of the wave's leading edge behind the crest.

    Default"#3B5BFD"

  • speednumber

    Playback multiplier for the whole timeline; 1 is normal speed.

    Default1

  • theme"dark" | "light"

    Dark or light palette and ground.

    Default"dark"