# Skeleton build
> Cards drawn first as dotted blueprints, measured from the cards themselves, then swept in by a scan line one after another.
A loading state that looks like an interface being generated. Each card shows as its own blueprint (dotted runs for its words, dotted boxes and rings for its controls, its outline with corner handles, guides and sizes, over a grid of dots) while a bracket hops from part to part naming what it places. Then a dotted scan line runs down each card in turn and the real card resolves above it, soft at first and then sharp. The three sample cards (a heart-rate monitor, a stacked bar chart of token spend and a music player) are live once shown.
A React component by Bruno Delorence: https://brunodelorence.com/components/skeleton-build. MIT License, Copyright (c) 2026 Bruno Delorence.
Category: Feedback.
## Anatomy
1. **Stage**: The pale ground that holds the cards in a row, and stacks them when it is narrow. Its colours follow the page, or `colorScheme`.
2. **Card**: The real content, rendered from the start in its place, so nothing moves when it appears. While loading it is clipped away.
3. **Blueprint**: The card’s dotted outline with corner handles and guides, measured from the card itself. A bracket hops from part to part, naming each.
4. **Dot grid**: Dots every 15 px from the card’s corner, reaching 44 px around it and fading out at the edges; a few of them flicker.
5. **Size and clock**: The card’s size and the time since its blueprint began, counting up while it builds.
6. **Text run**: A dotted line as wide as the words themselves (read from a Range, not the box), with a knot at each end.
7. **Control outline**: A dotted box or ring at a control’s exact place and size. Labelled ones add their size and corner handles.
8. **Replay**: Builds every blueprint again, then reveals the cards in turn. Uncontrolled only; disabled while it builds.
## When to use
- A launch, a hero or a showcase where the arrival of the interface is the point: generated UI, a design tool, an AI that builds screens.
- A few cards (two to four) whose layout is known before their data, so the blueprint matches what replaces it.
- A wait long enough to notice (half a second or more), where a plain spinner would leave the space blank.
- Content that should arrive in reading order, one card after another, rather than all at once.
## When not to use
- Everyday loading in a product screen. Use a plain skeleton: grey blocks, no labels, no clock.
- Waits under a few hundred milliseconds: the build would only delay what is already there.
- Long lists or tables. The blueprint is measured per card, and dozens of them would crowd the page.
- Content whose size is unknown until it loads: the blueprint is drawn from the real card, so it needs one to measure.
## Installation
Install it with the shadcn CLI, into components/skeleton-build of any React project:
```sh
npx shadcn@latest add https://brunodelorence.com/r/skeleton-build.json
```
Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite).
It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.
## Usage
```tsx
import { SkeletonReveal } from './skeleton-build';
export function Profile({ user }: { user?: User }) {
return (
console.log('shown')}>
{user?.name ?? 'Name Surname'}
);
}
```
## States
- **Blueprints**: `loading` true: every card held as its blueprint. The bracket, the clock and the flickering dots keep moving while on screen.
- **Revealing in turn**: The first card is in, the others still wait. The sweep itself (350 ms) can’t be held, so this is the stage between two cards.
- **Shown, controlled**: `loading` false: the cards are live (the heart rate drifts) and there is no Replay, since the parent decides.
- **Shown, uncontrolled**: With `autoplay` off the cards show at once, with Replay under them to watch the build.
- **Light and dark**: `colorScheme` fixes either scheme whatever the page says; left out, the stage follows the page. Every colour is a light-dark() token.
## How it works
- The card is rendered from the start, in its place: it sets the size of the whole, so nothing moves when it appears. While loading it is clipped away to nothing with clip-path, and it is inert, so neither the keyboard nor a screen reader reaches it.
- The blueprint is measured from the card itself. Every element marked data-sk ("text", "box" or "circle") becomes a dotted run, a dotted box with its corner radius or a dotted ring, at its exact place and size; a text run is the width of its words, read from a Range, not of its box. A ResizeObserver keeps it in step, and inside a zoomed or scaled preview the rectangles are brought back to the card’s own px.
- The dots are SVG strokes with a zero-length dash and round caps, so every dotted line is round dots at an even pitch; the grid behind is one radial-gradient tile, faded at its edges by two intersecting masks.
- The blueprint’s parts come in one by one in reading order over 900 ms, a bracket hops from part to part every 190 ms with its size (TEXT 41×15), and a few dots of the grid flicker darker. All of it is CSS animation except the bracket’s hop.
- The reveal is one phase change. The card’s clip-path opens from the top to its bottom edge while the scan line moves down by a transform, both on the same duration, delay and easing, so the line is always the clip’s edge. The card starts faint and blurred (85% opacity, 2 px) and sharpens as it shows; a band with a 5 px backdrop blur just above the line keeps the newest rows soft.
- The blueprint lies under the card, so the opaque card covers it as it shows and its dots come through while the card is still faint. Then the blueprint fades.
- Cards reveal stagger ms apart; the last one calls onRevealed. Loading again, each card blurs out over its blueprint, which builds itself again.
- Uncontrolled, the stage builds for 1.3 s once it is on screen, then reveals; Replay builds it again. While on screen and untouched, a demo pointer switches the chart’s period, plays and skips a track and likes it, then the stage builds again. Any press or key hands it to the reader.
- Three cards need 1098 px in a row: a narrower stage draws them at 80% or 66% (CSS zoom), and below that stacks them at their own size.
- Every animation rests while its card is off screen or the tab is hidden. Under reduced motion there is no sweep: the cards fade in.
## API reference
- **loading** (`boolean`): Controls the stage: true holds the blueprints, false reveals the cards. Without it, the stage builds itself and reveals on its own (SkeletonReveal requires it).
- **stagger** (`number`, default `375`): Ms between one card’s reveal and the next’s. On SkeletonReveal, the same is its delay prop.
- **duration** (`number`, default `350`): Ms each card’s sweep takes.
- **onRevealed** (`() => void`): Called once the last card is fully shown.
- **defaultRevealed** (`number`): Uncontrolled only: opens with this many cards shown and the rest held as blueprints, with no demo. Replay builds them all again and reveals them.
- **autoplay** (`boolean`, default `true`): Build on its own once on screen and let a demo pointer try the cards. False shows the cards at once (Replay still builds them).
- **colorScheme** (`'light' | 'dark' | 'system'`, default `'system'`): Forces a scheme, or follows the page’s color-scheme.
- **className** (`string`): Extra classes for the stage.
## Accessibility
- While loading, each card is inert and its wrapper aria-busy: the keyboard and screen readers skip what is not there yet. The blueprint and the scan line are aria-hidden.
- A polite live region says "Building the cards" and then "Cards ready".
- The cards are real controls: the period is a group of toggle buttons (aria-pressed), Details and the likes list are disclosures (aria-expanded, aria-controls), the like is a toggle, playback is a progressbar with its time as text, and the chart is an image with every bar in its label.
- Focus shows as a blue ring on every control; the demo pointer is decorative and stops at the first press or key.
- Under reduced motion there is no sweep, no blur and no flicker: the cards fade in.
## Source
### skeleton-build/skeleton-build.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import { useEffect, useEffectEvent, useRef, useState, type CSSProperties } from 'react';
import { HeartCard, PlayerCard, TokenCard } from './cards';
import { DemoPointer, runDemo, type Demo } from './demo-pointer';
import { hideDelay, SkeletonReveal } from './skeleton-reveal';
import { useAutoplay } from './use-autoplay';
import styles from './skeleton-build.module.css';
export { SkeletonReveal, type SkeletonRevealProps } from './skeleton-reveal';
/*
* Skeleton build: cards that are drawn first as blueprints, then swept in one after another, as
* if an interface were being generated in front of the reader.
*
* - Each card sits in a SkeletonReveal (skeleton-reveal.tsx), which measures it and draws its
* blueprint: dotted runs for its words, dotted boxes and rings for its controls, its outline with
* corner handles, guides and size, over a grid of dots. On reveal, a scan line sweeps it in.
* - The cards reveal `stagger` ms apart, in reading order; the last one calls onRevealed.
* - Uncontrolled (no loading prop), the stage builds its blueprints for BUILD ms once it is on
* screen, then reveals; Replay builds it all again. Controlled, it shows what `loading` says.
* - Once shown, the cards are live: the heart rate drifts, the chart switches period, the player
* plays. While on screen and untouched, a demo pointer tries them, then the stage builds itself
* again; any press or key hands it to the reader. autoplay={false} shows the cards at once.
* - Light or dark: every colour is a light-dark() token in the CSS, so the scheme is the page's
* color-scheme, or the one the colorScheme prop sets.
*/
/** How long the blueprints build before the reveal starts, in ms. */
const BUILD = 1300;
/** How long a card takes to blur out before its blueprint builds again (skeleton-reveal.tsx). */
const HIDE = 300;
type Props = {
className?: string;
/** Play the build on its own and let a demo pointer try the cards (default true). */
autoplay?: boolean;
colorScheme?: 'light' | 'dark' | 'system';
/** Controls the stage: true holds the blueprints, false reveals the cards. */
loading?: boolean;
/** Ms between one card's reveal and the next's. */
stagger?: number;
/** Ms each card's sweep takes. */
duration?: number;
/** Called once the last card is fully shown. */
onRevealed?: () => void;
/**
* Uncontrolled only: opens with this many cards shown and the rest held as blueprints, with no
* demo (autoplay off). Replay builds them all again and reveals them all.
*/
defaultRevealed?: number;
};
export function SkeletonBuild({
className,
autoplay = true,
colorScheme = 'system',
loading,
stagger = 375,
duration = 350,
onRevealed,
defaultRevealed,
}: Props) {
const { ref: stage, take, playing, visible, reduced } = useAutoplay(8000);
const pointer = useRef(null);
const controlled = loading !== undefined;
// Opened part-way (defaultRevealed), the stage holds still until Replay, and plays no demo.
const [held, setHeld] = useState(!controlled && defaultRevealed !== undefined);
const auto = autoplay && (controlled || defaultRevealed === undefined);
// Uncontrolled, the stage starts as blueprints only when it is going to play them.
const [building, setBuilding] = useState(auto && !controlled);
const [round, setRound] = useState(0);
const [shown, setShown] = useState(
controlled ? !loading : !auto && (!held || (defaultRevealed ?? 0) >= 3),
);
const isLoading = controlled ? loading : building;
const live = visible && !isLoading;
// Uncontrolled: the blueprints build while on screen, then the cards reveal.
useEffect(() => {
if (controlled || !building || !visible) return;
const timer = window.setTimeout(() => setBuilding(false), reduced ? 0 : BUILD);
return () => window.clearTimeout(timer);
}, [controlled, building, visible, reduced, round]);
useEffect(() => {
if (isLoading) setShown(false);
}, [isLoading]);
const revealed = () => {
setShown(true);
onRevealed?.();
};
/** Builds the whole stage again, its cards fresh once they have blurred out. */
const rebuild = () => {
setBuilding(true);
// The cards blur out a little apart (hideDelay); the last one is out before they remount.
window.setTimeout(() => setRound((value) => value + 1), HIDE + hideDelay(2 * stagger));
};
// The demo: once the cards are shown, the pointer tries them, then the stage builds again.
const script = useEffectEvent(async (demo: Demo) => {
const element = stage.current;
if (!element) return;
const at = (selector: string) => {
const target = element.querySelector(selector);
if (!target) return null;
const box = element.getBoundingClientRect();
const scale = box.width / element.offsetWidth || 1;
const rect = target.getBoundingClientRect();
return {
target,
x: (rect.left + rect.width / 2 - box.left) / scale,
y: (rect.top + rect.height / 2 - box.top) / scale,
};
};
const press = async (selector: string, rest: number) => {
const spot = at(selector);
// A control off the stage's visible part (a narrow stage stacks the cards) is skipped.
if (!spot || spot.y > element.offsetHeight || spot.y < 0) return;
await demo.glide(spot, 620);
demo.glyph('hand');
await demo.wait(220);
spot.target.click();
await demo.wait(rest);
demo.glyph('arrow');
};
await demo.wait(700);
await press('[data-period="month"]', 900);
await press('[data-period="year"]', 1100);
await press('[data-period="week"]', 500);
await press('[data-control="play"]', 1500);
await press('[data-control="next"]', 1600);
await press('[aria-label^="Like"]', 900);
await press('[data-control="play"]', 500);
await demo.glide({ x: element.offsetWidth * 0.88, y: element.offsetHeight * 0.96 }, 700);
await demo.wait(900);
if (!controlled) rebuild();
});
useEffect(() => {
const element = stage.current;
const hand = pointer.current;
if (!auto || !playing || !shown || !element || !hand) return;
return runDemo(element, hand, script);
}, [auto, playing, shown, stage]);
const replay = () => {
take();
setHeld(false);
rebuild();
};
const style = { '--stagger': `${stagger}ms` } as CSSProperties;
const cards = [
,
,
,
];
return (
{
if (event.isPrimary) take();
}}
onKeyDown={take}
>
);
}
```
### skeleton-build/skeleton-reveal.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import {
useEffect,
useEffectEvent,
useLayoutEffect,
useRef,
useState,
type CSSProperties,
type ReactNode,
} from 'react';
import styles from './skeleton-build.module.css';
/*
* Skeleton reveal: one card drawn first as its own blueprint, then swept into the real thing.
*
* - The card is rendered from the start, in its place, so it sets the size of the whole and nothing
* moves when it appears. While loading it is clipped away to nothing.
* - The blueprint is measured from the card itself: every element marked data-sk ("text", "box" or
* "circle") becomes a dotted run, a dotted outline or a dotted ring at its exact place and size,
* over a grid of dots, inside the card's own dotted outline with its corner handles and guides.
* A text run is the width of its words, read from a Range, not of its box. Parts come in one by
* one in reading order, a bracket hops from part to part naming what it places ("TEXT 41×15")
* and where ("126·394"), the card's size label counts the time up, and dots of the grid flicker.
* - Revealing, a dotted scan line runs down the card, fast at first and settling (an ease-out).
* Above it the card shows (its clip-path opens to the line, on the same easing and clock as the
* line's transform); the band just above the line is blurred and pale (a backdrop blur), so rows
* come into focus a moment after the line passes. The blueprint lies under the card, so the card
* covers it as it shows. Then the blueprint fades.
* - Loading again, the card blurs out over its blueprint, which builds itself again.
* - It all runs on CSS transitions and animations; JavaScript only measures, flips the phase and
* moves the bracket. The animations rest while the card is off screen or the tab is hidden, and
* under reduced motion the card simply fades in.
*/
type Phase = 'building' | 'sweeping' | 'shown' | 'hiding';
type Kind = 'text' | 'box' | 'circle';
type Part = {
kind: Kind;
x: number;
y: number;
w: number;
h: number;
r: number;
/** What the bracket calls it: TEXT, or the element's data-sk-tag. */
tag: string;
/** Whether it shows its size and corner handles (data-sk-label). */
label: boolean;
};
type Blueprint = { w: number; h: number; r: number; parts: Part[] };
/** How long the card takes to blur out before its blueprint builds again, in ms. */
const HIDE = 280;
/** Blurring out, the cards go a quarter of their reveal stagger apart. */
export const hideDelay = (delay: number) => Math.round(delay / 4);
/** How long the blueprint's parts take to come in, all of them, in ms. */
const BUILD = 900;
/** How often the bracket moves to the next part, in ms. */
const HOP = 190;
/** How far the grid of dots reaches around the card, in px. */
const MARGIN = 44;
/** The grid's pitch: a dot every GRID px from the card's corner (the CSS draws the same). */
const GRID = 15;
const pad = (value: number) => String(Math.max(0, Math.round(value))).padStart(3, '0');
const round = (value: number) => Math.round(value);
/** Reads the blueprint of the card inside `content`, in the card's own (unscaled) px. */
function measure(content: HTMLElement): Blueprint | null {
const card = content.firstElementChild as HTMLElement | null;
if (!card) return null;
const own = parseFloat(getComputedStyle(content).width);
const base = content.getBoundingClientRect();
if (!own || !base.width) return null;
// Zoomed or inside a scaled preview, the rectangles come scaled: bring them back to the card's
// own CSS px, which the computed width is in.
const scale = base.width / own;
const range = document.createRange();
const parts: Part[] = [];
card.querySelectorAll('[data-sk]').forEach((element) => {
const kind = element.dataset.sk as Kind;
let rect: DOMRect;
if (kind === 'text') {
range.selectNodeContents(element);
rect = range.getBoundingClientRect();
} else rect = element.getBoundingClientRect();
if (!rect.width || !rect.height) return;
const w = rect.width / scale;
const h = rect.height / scale;
const radius = parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0;
parts.push({
kind,
x: (rect.left - base.left) / scale,
y: (rect.top - base.top) / scale,
w,
h,
r: Math.min(radius, w / 2, h / 2),
tag: element.dataset.skTag ?? (kind === 'text' ? 'TEXT' : kind === 'circle' ? 'ICON' : 'BOX'),
label: element.hasAttribute('data-sk-label'),
});
});
parts.sort((a, b) => a.y - b.y || a.x - b.x);
const box = getComputedStyle(card);
return {
w: parseFloat(box.width),
h: parseFloat(box.height),
r: parseFloat(getComputedStyle(card).borderTopLeftRadius) || 0,
parts,
};
}
/** A few dots of the grid, inside the card, that flicker darker: the same ones for a given size. */
function flickers(w: number, h: number, count = 34) {
let seed = (round(w) * 73856093) ^ (round(h) * 19349663);
const next = () => {
seed = (seed * 1103515245 + 12345) & 0x7fffffff;
return seed / 0x7fffffff;
};
const columns = Math.max(1, Math.floor(w / GRID) - 1);
const rows = Math.max(1, Math.floor(h / GRID) - 1);
return Array.from({ length: count }, () => ({
x: GRID + Math.floor(next() * columns) * GRID,
y: GRID + Math.floor(next() * rows) * GRID,
delay: round(next() * 2400),
}));
}
/** The bracket that hops from part to part while the blueprint builds, naming each one. */
function Bracket({ parts, active }: { parts: Part[]; active: boolean }) {
const named = parts.filter((part) => part.kind === 'text' || part.label);
const [index, setIndex] = useState(0);
useEffect(() => {
if (!active || named.length < 2) return;
const timer = window.setInterval(() => setIndex((value) => value + 1), HOP);
return () => window.clearInterval(timer);
}, [active, named.length]);
const part = named[index % Math.max(1, named.length)];
if (!part) return null;
const x = part.x - 4;
const y = part.y - 4;
const w = part.w + 8;
const h = part.h + 8;
const arm = Math.min(7, w / 3, h / 3);
return (
{`${part.tag} ${round(part.w)}×${round(part.h)}`}
{`${pad(part.x)}·${pad(part.y)}`}
);
}
/**
* The card's size and a clock above its corner ("332 × 345 t+1.89s"): the time since its
* blueprint began, written straight into the text node while it builds (no re-render).
*/
function SizeLabel({ w, h, active }: { w: number; h: number; active: boolean }) {
const text = useRef(null);
const start = useRef(0);
const size = `${round(w)} × ${round(h)}`;
useEffect(() => {
const node = text.current;
if (!node) return;
if (!start.current) start.current = performance.now();
const write = () => {
node.textContent = `${size} t+${((performance.now() - start.current) / 1000).toFixed(2)}s`;
};
write();
if (!active) return;
const timer = window.setInterval(write, 40);
return () => window.clearInterval(timer);
}, [active, size]);
return (
{`${size} t+0.00s`}
);
}
/** Four small hollow squares on the corners of a box. */
function Handles({
x,
y,
w,
h,
size,
}: {
x: number;
y: number;
w: number;
h: number;
size: number;
}) {
const half = size / 2;
return (
<>
{[
[x, y],
[x + w, y],
[x, y + h],
[x + w, y + h],
].map(([cx, cy], index) => (
))}
);
}
/** One part of the blueprint: a dotted run of text, a dotted box or a dotted ring. */
function PartDrawing({ part, index }: { part: Part; index: number }) {
const { x, y, w, h, r } = part;
const style = { '--i': index } as CSSProperties;
if (part.kind === 'text') {
const middle = y + h / 2;
// A knot partway along longer runs, as where a word ends.
const knot = w > 60 ? x + w * (0.35 + ((index * 37) % 30) / 100) : null;
return (
{knot !== null && }
);
}
return (
{part.kind === 'circle' ? (
) : (
)}
{part.label && (
<>
{`${round(w)} × ${round(h)}`}
)}
);
}
export type SkeletonRevealProps = {
/** True shows the blueprint; false sweeps the card in. */
loading: boolean;
/** How long after loading turns false the sweep starts, in ms. */
delay?: number;
/** How long the sweep takes, in ms. */
duration?: number;
/** Called once the card is fully shown. */
onRevealed?: () => void;
/** The card: a single element, with data-sk on the parts its blueprint draws. */
children: ReactNode;
className?: string;
};
/**
* Wraps one card: while `loading`, its measured blueprint shows in its place; when `loading`
* turns false, a scan line sweeps the card in, `delay` ms later, in `duration` ms.
*/
export function SkeletonReveal({
loading,
delay = 0,
duration = 350,
onRevealed,
children,
className,
}: SkeletonRevealProps) {
const root = useRef(null);
const content = useRef(null);
const [phase, setPhase] = useState(loading ? 'building' : 'shown');
const [blueprint, setBlueprint] = useState(null);
const [build, setBuild] = useState(0);
const [onScreen, setOnScreen] = useState(true);
const phaseNow = useRef(phase);
useLayoutEffect(() => {
phaseNow.current = phase;
}, [phase]);
const revealed = useEffectEvent(() => onRevealed?.());
// Loading on: blur the card out, then build its blueprint again. Loading off: sweep it in.
useEffect(() => {
if (loading) {
if (phaseNow.current === 'building') return;
setPhase('hiding');
const timer = window.setTimeout(
() => {
setPhase('building');
setBuild((value) => value + 1);
},
HIDE + hideDelay(delay),
);
return () => window.clearTimeout(timer);
}
if (phaseNow.current === 'shown') return;
setPhase('sweeping');
const timer = window.setTimeout(() => {
setPhase('shown');
revealed();
}, delay + duration);
return () => window.clearTimeout(timer);
// A sweep keeps the delay and duration it started with.
}, [loading]);
// The blueprint follows the card's size while it can be seen.
useLayoutEffect(() => {
const element = content.current;
if (!element || phase === 'shown') return;
const read = () => {
const next = measure(element);
if (next) setBlueprint(next);
};
read();
const observer = new ResizeObserver(read);
observer.observe(element);
return () => observer.disconnect();
}, [phase, build]);
// Its animations rest while it is off screen or the tab is hidden.
useEffect(() => {
const element = root.current;
if (!element) return;
let visible = true;
const update = () => setOnScreen(visible && !document.hidden);
const observer = new IntersectionObserver(([entry]) => {
visible = entry.isIntersecting;
update();
});
observer.observe(element);
document.addEventListener('visibilitychange', update);
return () => {
observer.disconnect();
document.removeEventListener('visibilitychange', update);
};
}, []);
const building = phase === 'building' || phase === 'hiding';
const parts = blueprint?.parts ?? [];
const w = blueprint?.w ?? 0;
const h = blueprint?.h ?? 0;
const style = {
'--delay': `${delay}ms`,
'--duration': `${duration}ms`,
'--hide-delay': `${hideDelay(delay)}ms`,
'--step': `${parts.length ? BUILD / parts.length : 0}ms`,
'--margin': `${MARGIN}px`,
} as CSSProperties;
return (
{blueprint && (
)}
{children}
);
}
```
### skeleton-build/cards.tsx
```tsx
// Copyright (c) 2026 Bruno Delorence. MIT License.
'use client';
import { useEffect, useId, useState, type CSSProperties } from 'react';
import styles from './skeleton-build.module.css';
/*
* The three sample cards the stage builds: a heart-rate monitor, a stacked bar chart of token
* spend and a music player. All the content is invented. Every part a blueprint should draw is
* marked data-sk ("text", "box" or "circle"; data-sk-label adds its size and corner handles);
* the main parts also carry data-part, for the docs.
*
* Each card works on its own once shown: the heart rate drifts and its trace runs, the chart
* switches between week, month and year and opens its details, the player plays, skips, likes
* and lists who liked. `live` stops anything that runs on a clock (off screen, hidden tab, or
* while the card is still a blueprint).
*/
/* Heart rate ---------------------------------------------------------------------------------- */
/** The readings the monitor drifts through, one every BEAT ms. */
const READINGS = [72, 74, 77, 76, 73, 75];
const BEAT = 1900;
/** A number whose changed digits roll in, blurred, from below. */
function Digits({ value }: { value: string }) {
return (
{value.split('').map((char, index) => (
{char}
))}
);
}
function Icon({ name }: { name: 'back' | 'more' | 'chevron' }) {
if (name === 'back')
return (
);
if (name === 'more')
return (
);
return (
);
}
export function HeartCard({ live }: { live: boolean }) {
const [reading, setReading] = useState(0);
const [unit, setUnit] = useState<'bpm' | 'zone'>('bpm');
useEffect(() => {
if (!live) return;
const timer = window.setInterval(
() => setReading((value) => (value + 1) % READINGS.length),
BEAT,
);
return () => window.clearInterval(timer);
}, [live]);
const bpm = READINGS[reading];
return (