Sample blocks

Lower-level than the per-type overview blocks: these render the visual for one token by path. Useful for custom MDX layouts that don't want the full overview chrome, and for embedding a single sample next to prose.

MotionSample

<MotionSample path="transition.enter" />

Animated ball + track for one transition / duration / cubicBezier. speed?: MotionSpeed (default 1); runKey?: number forces a restart when it changes.

import type { MotionSpeed } from '@unpunnyfuns/swatchbook-blocks';
type MotionSpeed = 0.25 | 0.5 | 1 | 2;

The four allowed playback rates the speed pills surface above the sample track. Re-exported for hosts that want to drive the speed externally.

ShadowSample

<ShadowSample path="shadow.md" />

Surface rectangle with the token's shadow applied as box-shadow.

BorderSample

<BorderSample path="border.default" />

Surface rectangle with the token's border applied.

DimensionBar

<DimensionBar path="size.md" visual="length" />

Width-driven bar, border-radius square, or sized square for one dimension token. visual?: 'length' | 'radius' | 'size' (default 'length').