# Fraction Split
URL: https://remocn.dev/docs/numbers/fraction-split

A bar of eight boxes splits into halves, quarters and eighths, then leaves one filled under a headline.

- Install: `npx shadcn@latest add @remocn/fraction-split`
- Vibe: clean
- Natural length: 146f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fraction-split
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FractionSplit } from "@/components/remocn/fraction-split";

const FractionSplitScene = () => <FractionSplit line="Renders in 1/8 the time." highlight="1/8" accentPiece={0} />;

export const RemotionRoot = () => (
  <Composition
    id="FractionSplit"
    component={FractionSplitScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A bar of eight segments splits into halves, quarters and eighths with a fraction label at each stage; then all but one piece drain away, the bar shifts up and the headline appears word by word with the `highlight` text in gradient. Pass `line` and `highlight`; `accentPiece` picks which of the eight pieces stays. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `line` | `string` | `"Renders in 1/8 the time."` | Headline shown under the bar. |
| `highlight` | `string` | `"1/8"` | Part of the line set in gradient; should match the fraction. |
| `accentPiece` | `number` | `0` | Which of the eight pieces stays filled, from 0 to 7. |
| `accent` | `string` | `"#3B5BFD"` | Accent color of the filled piece. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A speed or efficiency claim such as 1/8 the time, where the fraction itself is the visual.
- A clean beat that needs a headline with one highlighted word in gradient.
- A comparison that reads best as one piece out of a whole.

## Don't use when
- The share should be a pie-like ring - use `share-donut`.
- The proportion is a grid of dots - use `unit-grid`.
- A segmented bar that shrinks while a number counts is closer - use `time-breakdown`.