Hex Fill
A honeycomb of hexagons fills with gradient cells around a ring up to a percentage reading.
$ pnpm dlx shadcn@latest add @remocn/hex-fillUsage
// src/Root.tsx
import { Composition } from "remotion";
import { HexFill } from "@/components/remocn/hex-fill";
const HexFillScene = () => <HexFill value={86} label="of renders served from cache" rings={7} />;
export const RemotionRoot = () => (
<Composition
id="HexFill"
component={HexFillScene}
durationInFrames={140}
fps={30}
width={1280}
height={720}
/>
);A honeycomb of outlined hexagons appears ring by ring, then cells pop in with a gradient in a sweep around the circle up to the percentage, while a large reading counts up beside it with a label. Pass value as a percent from 0 to 100, plus label; rings sets the grid size. It ships light and dark through theme.
Props6
| Prop | Type | Default |
|---|---|---|
| value | number86 Percentage to fill, from 0 to 100. | |
| label | string"of renders served from cache" Caption beside the reading. | |
| rings | number7 Rings of hexagons, from 3 to 10. | |
| accent | string"#3B5BFD" Accent color of the fill gradient. | |
| theme | "dark" | "light""dark" Light or dark palette. | |
| speed | number1 Playback speed multiplier. | |
- valuenumber
Percentage to fill, from 0 to 100.
Default
86 - labelstring
Caption beside the reading.
Default
"of renders served from cache" - ringsnumber
Rings of hexagons, from 3 to 10.
Default
7 - accentstring
Accent color of the fill gradient.
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark palette.
Default
"dark" - speednumber
Playback speed multiplier.
Default
1