Pulse Line

A heartbeat-style pulse runs through 'Every frame has a pulse.' with the last word in teal

Installation

$ pnpm dlx shadcn@latest add @remocn/pulse-line

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PulseLine } from "@/components/remocn/pulse-line";
 
const PulseLineScene = () => (
  <PulseLine text="Every frame has a pulse." highlight="a pulse." beats={2} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PulseLine"
    component={PulseLineScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

A heartbeat pulse travels through the headline glyphs and lights the highlight phrase in an aurora gradient, then the caption fades in. Pass text, highlight, caption and beats (1 to 4 pulses); it ships light and dark.

Props7

Prop	Type	Default
text	string"Every frame has a pulse." The headline the pulse runs through.
highlight	string"a pulse." Trailing phrase tinted with the aurora gradient.
caption	string"Motion components for Remotion. Copy one in, own every frame." Small line under the headline; empty to hide.
beats	number2 Number of pulses, from 1 to 4.
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.

textstring
The headline the pulse runs through.
Default"Every frame has a pulse."
highlightstring
Trailing phrase tinted with the aurora gradient.
Default"a pulse."
captionstring
Small line under the headline; empty to hide.
Default"Motion components for Remotion. Copy one in, own every frame."
beatsnumber
Number of pulses, from 1 to 4.
Default2
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"