Progress & Status
Truchet Tile Timer
Paint a Truchet path that fills and turns as baking minutes pass. Charcoal linocut and parchment palette with brick red.
canvasmedium complexitymoderate motionpointermobile-ready
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
An adjustable countdown with animated baking progress and keyboard controls.
When not to
Production timekeeping without replacing the accelerated demo clock and adding persistence.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Adapt content through existing data arrays; retain named palette, controls and demo-v1 lifecycle.
Safe to edit
- Dark/light palette tokens
- Sample data and visible labels
- Animation timing and geometry
Keep intact
- IIFE and namespaced CSS/IDs
- Initial Manual mode; sticky first-input takeover
- Theme URL/message hook; redraw canvas palette
- Keyboard/focus/live status; reduced motion; hidden pause
Known limitations
- Illustrative data; local state resets on remount.
- Accelerated clock: one baking minute takes 1.5 seconds; replace T for real time.
More Progress & Status components
- Linear ProgressOlive-to-slate gradient bar fills left-to-right with a glowing leading edge, live percent readout, tick scale, and status dot; cycles fill → hold → reset…
- Segmented StepperFour-step circular stepper auto-advances, filling connector segments with a plum-to-teal gradient and stamping SVG checkmarks as each step completes.
- Upload ProgressCircular rust-toned ring fills to 100% with a leading dot and numeric readout; completes with a green checkmark draw-in. Auto-cycles.
- Skeleton LoaderDark content-card skeleton with avatar, text rows, thumbnail, and pills swept by a staggered denim-blue diagonal shimmer and a breathing radial pulse.
- Battery ChargeBattery shell fills olive-to-tan from 4%→100% over 6 s with a travelling sheen, pulsing bolt icon, and green glow ring at full charge.
- Multi-TrackFour color-coded bars (ingest, transcode, index, publish) fill at staggered ease-out rates with a live N/4 complete counter; auto-resets after all finish.