# Point Hop
URL: https://remocn.dev/docs/numbers/point-hop

A decimal point hops between digits to change units, ending on a value with a metric prefix.

- Install: `npx shadcn@latest add @remocn/point-hop`
- Vibe: tech
- Natural length: 119f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/point-hop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PointHop } from "@/components/remocn/point-hop";

const PointHopScene = () => (
  <PointHop value={0.0000342} unit="s" label="scene refresh after a prop change" />
);

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

The tiny value starts as a long string of zeros. Its decimal point hops three digits at a time while the unit prefix swaps, once per step, until the figure reads cleanly. Pass `value` in base units, `unit`, `prefixes` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `3.42e-05` | Value in base units, such as seconds. |
| `unit` | `string` | `"s"` | Base unit symbol shown after the prefix. |
| `prefixes` | `string[]` | `["", "m", "µ", "n"]` | Unit prefixes in order of three digits each, starting with none. |
| `label` | `string` | `"scene refresh after a prop change"` | Caption that rises in at the top. |
| `accent` | `string` | — | Accent color for highlights and small marks. |
| `background` | `string` | — | Background color override. Pass "transparent" to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A latency or performance claim where unit scaling, such as seconds to microseconds, is the story.
- A precise measurement result with a short caption.
- A technical beat where a tiny number needs to be made readable.

## Don't use when
- The number is an ordinary count — use `tall-count`.
- You compare two values side by side — use `measure-dim`.
- You want a speed readout with a delta — use `speed-trap`.