collections
Scrub Preview
A bounded content surface scrubs through supplied preview frames with pointer, keyboard and touch alternatives.
- collections
- scrub
- frames
- preview
- media
Content discovery scrubber, intentionally separate from video playback controls.
Live preview
Quick usage
import { ScrubPreview } from "@pinky-ui/systems";
<ScrubPreview frames={frames} labels={labels} label="Project frames" />Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add scrub-previewPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| frames | ReactNode[] | — | Ordered content frames for inspection, not video playback. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- Index updates are bounded to frame changes rather than every pointer pixel.
- No video element, autoplay loop or high-frequency React animation is required.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Project frames, product angles and short visual process previews
When not to use
- Full video playback or long timelines with transport controls
Skill
Purpose
Use a bounded scrub surface to inspect supplied content frames by position. It is a discovery interaction for product angles, project frames or visual process—not a video player.
Interaction anatomy
- Pointer position maps to a capped frame index.
- Arrow, Home and End provide point-by-point keyboard reading.
- Touch can drag the surface or choose an explicit frame marker.
Good for
Short frame sequences, product angles, article sections and process studies.
Avoid
Long video playback, autoplay timelines or controls that need transport semantics.
Usage
<ScrubPreview
label="Product frames"
frames={frames.map((frame) => <Frame src={frame.src} alt={frame.alt} />)}
labels={frames.map((frame) => frame.label)}
/>Tune
Keep the frame count small, bound pointer mapping and retain the last readable frame on leave. Avoid setting React state for every pointer pixel.
Accessibility and reduced motion
Expose slider value text, visible frame markers and keyboard movement. Reduced motion changes frames immediately; it does not remove the frame labels or current position.