Point Hop

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

Installation

$ pnpm dlx 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.

Props8

Prop	Type	Default
value	number3.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	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuenumber
Value in base units, such as seconds.
Default3.42e-05
unitstring
Base unit symbol shown after the prefix.
Default"s"
prefixesstring[]
Unit prefixes in order of three digits each, starting with none.
Default["", "m", "µ", "n"]
labelstring
Caption that rises in at the top.
Default"scene refresh after a prop change"
accentstring
Accent color for highlights and small marks.
backgroundstring
Background color override. Pass "transparent" to composite over other layers.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"