Bokeh Title

A serif headline sharpens out of drifting bokeh lights that first form a pattern.

Installation

$ pnpm dlx shadcn@latest add @remocn/bokeh-title

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BokehTitle } from "@/components/remocn/bokeh-title";
 
const BokehTitleScene = () => (
  <BokehTitle
    title="Launch films, made in code"
    subtitle="remocn · Spring release"
    pattern="grid"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BokehTitle"
    component={BokehTitleScene}
    durationInFrames={190}
    fps={30}
    width={1280}
    height={720}
  />
);

Out-of-focus bokeh lights drift, a focus pull snaps them into a mark or grid pattern, then they defocus again as the serif title and subtitle resolve. Pass title and subtitle (split on ' · ' for a lead and a tail) and choose pattern and shape; it ships light and dark through theme.

Props7

Prop	Type	Default
title	string"Launch films, made in code" Serif headline that resolves from the bokeh
subtitle	string"remocn · Spring release" Line under the title; ' · ' splits a lead from the rest
pattern	"mark" \| "grid""mark" Arrangement the lights snap into: mark or grid
shape	"circle" \| "hexagon""circle" Shape of each bokeh light: circle or hexagon
accent	string"#3B5BFD" Accent color (any valid CSS color)
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

titlestring
Serif headline that resolves from the bokeh
Default"Launch films, made in code"
subtitlestring
Line under the title; ' · ' splits a lead from the rest
Default"remocn · Spring release"
pattern"mark" | "grid"
Arrangement the lights snap into: mark or grid
Default"mark"
shape"circle" | "hexagon"
Shape of each bokeh light: circle or hexagon
Default"circle"
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"