# Boss Bar
URL: https://remocn.dev/docs/typography/boss-bar

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

- Install: `npx shadcn@latest add @remocn/boss-bar`
- Vibe: playful
- Natural length: 124f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A playful beat framing a legacy workflow as a boss that your features defeat one hit at a time.
- A feature recap where each hit names a capability and takes damage off the bar.

## Don't use when
- You want a streak of eliminations ending in a banner — use `kill-feed`.
- You want a simple countdown to a reveal — use `drop-timer`.