Ink Bloom

A drop of ink falls, blooms across the page and settles into the logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/ink-bloom

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { InkBloom } from "@/components/remocn/ink-bloom";
 
const InkBloomScene = () => (
  <InkBloom
    name="remocn"
    seed={3}
    theme="light"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="InkBloom"
    component={InkBloomScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

A drop of ink falls onto the page, blooms outward in an organic shape, then thins and resolves into the lockup of logo and name. Pass name, or your own logo, and seed to change the bloom. The theme prop switches off-white paper with dark ink (default) to light ink on black.

Props6

Prop	Type	Default
logo	React.ReactNode— Replaces the Remocn logo in the final lockup.
name	string"remocn" Name set beside the logo.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"light" \| "dark""light" Light is off-white paper with dark ink (default); dark is the reverse.
seed	number3 Number that changes the shape of the bloom.

logoReact.ReactNode
Replaces the Remocn logo in the final lockup.
namestring
Name set beside the logo.
Default"remocn"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"light" | "dark"
Light is off-white paper with dark ink (default); dark is the reverse.
Default"light"
seednumber
Number that changes the shape of the bloom.
Default3