Cool Down

A short statement, 'Runs cool.', settles in large over a faint grid with a mono caption

Installation

$ pnpm dlx shadcn@latest add @remocn/cool-down

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CoolDown } from "@/components/remocn/cool-down";
 
const CoolDownScene = () => <CoolDown title="Runs cool." label="a full launch film rendered, fans silent" />;
 
export const RemotionRoot = () => (
  <Composition
    id="CoolDown"
    component={CoolDownScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

A short statement rises into place in large type, glowing in the accent color and cooling to the text color while a faint grid and heat shimmer calm down behind it, ending on a still frame with a small mono caption. Pass title and label.

Props6

Prop	Type	Default
title	string"Runs cool." Short statement set large.
label	string"a full launch film rendered, fans silent" Small mono caption under the title.
accent	string— Hot color the title and caption start in before cooling to the text color.
background	string— Stage fill color; pass "transparent" to overlay your own footage.
speed	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

titlestring
Short statement set large.
Default"Runs cool."
labelstring
Small mono caption under the title.
Default"a full launch film rendered, fans silent"
accentstring
Hot color the title and caption start in before cooling to the text color.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"