Boss Bar

A boss HP bar is drained by hits, then 'DEFEATED' slams in beneath 'The old workflow'

Installation

$ pnpm dlx shadcn@latest add @remocn/boss-bar

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BossBar } from "@/components/remocn/boss-bar";
 
const BossBarScene = () => (
  <BossBar boss="THE OLD WORKFLOW" hits={[{ label: "Captions", damage: 800 }, { label: "Templates", damage: 1200 }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BossBar"
    component={BossBarScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

A boss HP bar fills in, each named hit slams in and drains the bar, and when it breaks the defeated word slams in beneath the boss name. Pass boss, hits (label and damage) and defeated; it ships light and dark.

Props6

Prop	Type	Default
boss	string"THE OLD WORKFLOW" Boss name over the bar.
hits	BossHit[]— Hits in order; the last one takes the bar to zero.
defeated	string"DEFEATED" Word slammed in when the bar breaks.
accent	string"#3B5BFD" The small "BOSS" tag and the hit slash.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
speed	number1 Playback multiplier; above 1 plays faster.

bossstring
Boss name over the bar.
Default"THE OLD WORKFLOW"
hitsBossHit[]
Hits in order; the last one takes the bar to zero.
defeatedstring
Word slammed in when the bar breaks.
Default"DEFEATED"
accentstring
The small "BOSS" tag and the hit slash.
Default"#3B5BFD"
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
speednumber
Playback multiplier; above 1 plays faster.
Default1