← All components
Product stories / composition
Circuit Story
A request becomes a schematic, routed board, and photoreal object—with an aligned X-ray beneath its surface.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Include every source file and the complete assets folder. Fonts and the fitted image are part of the composition.
- The default climateLogger model is an illustrative design, not fabrication-ready hardware. Its same parts move from schematic positions to board positions.
- Pass a complete CircuitProject to change the model. Custom projects default to the vector drawing; provide imageSrc only with an image fitted to the documented pose in styles.css.
- Keep images on the same origin, or allow canvas access through CORS. Unreadable image pixels fall back to a direct photo reveal; missing images retain the drawing.
- Reduced motion and autoplay=false show the settled board. The X-ray button works with keyboard and touch. paused freezes the story and pointer spring; replayToken restarts the sequence.
React 19Canvas 2DWeb Animations APICSS container units
Chungus UI · Project-authorized illustration and adaptation. Public distribution terms pending release.
Archivo Project Authors · SIL Open Font License 1.1; included with assets.
Martian Mono Project Authors · SIL Open Font License 1.1; included with assets.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
project | CircuitProject | climateLogger | Complete project data. Import the exported type and climateLogger example to supply a different schematic and board. |
imageSrc | string | Default board image for climateLogger | Optional image fitted to the documented board pose; custom projects show vector art unless supplied. |
autoplay | boolean | true | Play the request-to-product sequence; false shows the settled board. |
speed | number | 1 | Story playback multiplier. |
lensRadius | number | 72 | X-ray lens radius in pixels. |
paused | boolean | false | Freeze story and pointer spring. |
replayToken | number | 0 | Change this value to restart the sequence. |
className | string | '' | Additional root class. |