Waveform Title

A headline rises over an aurora waveform line that settles into an underline beneath it

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WaveformTitle } from "@/components/remocn/waveform-title";
 
const WaveformTitleScene = () => (
  <WaveformTitle title="Your voice, captioned" accentWords={1} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WaveformTitle"
    component={WaveformTitleScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

An aurora waveform line opens and sweeps across the frame, settles into an underline, and the headline rises above it, with the trailing word(s) in italic serif. Pass title and accentWords; it ships light and dark.

Props5

Prop	Type	Default
title	string"Your voice, captioned" The headline that rises over the waveform.
accentWords	number1 How many trailing words are set in the italic serif accent.
accent	string"#3B5BFD" Accent colour (any CSS colour).
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

titlestring
The headline that rises over the waveform.
Default"Your voice, captioned"
accentWordsnumber
How many trailing words are set in the italic serif accent.
Default1
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"