# Hex Fill
URL: https://remocn.dev/docs/numbers/hex-fill

A honeycomb of hexagons fills with gradient cells around a ring up to a percentage reading.

- Install: `npx shadcn@latest add @remocn/hex-fill`
- Vibe: data
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hex-fill
```

## Usage

```tsx
// 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `86` | Percentage to fill, from 0 to 100. |
| `label` | `string` | `"of renders served from cache"` | Caption beside the reading. |
| `rings` | `number` | `7` | 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` | `number` | `1` | Playback speed multiplier. |

## Use when
- A percentage stat, such as cache hit rate, where the filled share of a grid is the visual.
- A data beat where the number should count up in step with cells filling.
- A tech-flavored stat with a one-line label beside the grid.

## Don't use when
- The share should be a ring sweep - use `share-donut`.
- The share should be a square grid of dots - use `unit-grid`.
- Tiles should split by category size - use `treemap-split`.