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-waveUsage
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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
1 - theme"dark" | "light"
Dark or light palette and ground.
Default
"dark"