Heat Trace

A heat line traces the wordmark in warm-to-cool gradient colours, with a tagline beneath.

Installation

$ pnpm dlx shadcn@latest add @remocn/heat-trace

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HeatTrace } from "@/components/remocn/heat-trace";
 
const HeatTraceScene = () => (
  <HeatTrace
    name="remocn"
    tagline="Launch-video scenes for Remotion. Copy, paste, render."
    eyebrow="New"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HeatTrace"
    component={HeatTraceScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A heat line is traced along the name in warm-to-cool gradient colours, then the glow cools and the tagline rises word by word, with an optional eyebrow above. Pass name or your own logo, plus tagline and accent. Ships light and dark.

Props8

Prop	Type	Default
name	string"remocn" Name that the heat line traces; Remocn renders the real logo.
logo	React.ReactNode— Mark set before the name, replacing the default.
tagline	string"Launch-video scenes for Remotion. Copy, paste, render." Line that rises under the name.
eyebrow	string"" Small line above the name; empty by default.
accent	string"#3B5BFD" Accent colour that tints the heat gradient.
background	string— Stage fill colour; overrides the theme background.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

namestring
Name that the heat line traces; Remocn renders the real logo.
Default"remocn"
logoReact.ReactNode
Mark set before the name, replacing the default.
taglinestring
Line that rises under the name.
Default"Launch-video scenes for Remotion. Copy, paste, render."
eyebrowstring
Small line above the name; empty by default.
Default""
accentstring
Accent colour that tints the heat gradient.
Default"#3B5BFD"
backgroundstring
Stage fill colour; overrides the theme background.
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"