Fraction Split
A bar of eight boxes splits into halves, quarters and eighths, then leaves one filled under a headline.
$ pnpm dlx shadcn@latest add @remocn/fraction-splitUsage
// 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.
Props6
| Prop | Type | Default |
|---|---|---|
| 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 | number0 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 | number1 Playback speed multiplier. | |
- linestring
Headline shown under the bar.
Default
"Renders in 1/8 the time." - highlightstring
Part of the line set in gradient; should match the fraction.
Default
"1/8" - accentPiecenumber
Which of the eight pieces stays filled, from 0 to 7.
Default
0 - accentstring
Accent color of the filled piece.
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark palette.
Default
"dark" - speednumber
Playback speed multiplier.
Default
1