∞ forever components

Navigation

One Boot Trail

A breadcrumb as a vertical line of boot prints: drag or wheel to scrub the trail, flick to throw the boot, arrows step one print. Each print deepens when reached. Clean modern: off-black and verdigris with a light theme. From the daily-team 'Control in process' set (2026-10-21 to 2026-10-25).

canvasmedium complexitymoderate motionpointer+keyboardaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
1

When to use it

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Palette: clean modern, off-black and verdigris (docs/style-clean-modern.md). Edit the colour tokens on :root and the light block; keep the demo-v1 lifecycle intact.

Safe to edit

  • colour tokens on :root and the light block
  • idle demo steps and interval

Keep intact

  • demo-v1 preview lifecycle: initialize demo from window.__foreverPreview and stop the idle demo on the window forever:interactive event or the first pointer or key input; retain manual feedback, settling, cleanup and explicit sessions
  • IIFE scope, prefers-reduced-motion snap, visibilitychange pause, forever:theme listener and ?theme bootstrap

Known limitations

  • State is local to the mount.
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.
  • Silent: the original daily-team build had sound where noted; it was removed so the tile stays quiet on the wall.

breadcrumbfootprintsnavigationscrubcanvas

More Navigation components

  • Magnify DockmacOS-style frosted-glass dock of six gradient tiles that scale up and lift toward the cursor; idle sweep that stops at first deliberate input keeps it…
  • Hamburger MorphThree-line hamburger button spring-morphs into a glowing teal X on click; button border gains teal glow when open. Auto-cycles as demo.
  • Radial Fan MenuA core button rotates to an X and fans five glowing stone-toned icon petals outward in a staggered spring arc; auto-cycles open/close as a demo.
  • Slide-in DrawerHamburger icon morphs to an X while a side panel slides in over a dark scrim, revealing four nav items with staggered fade-in animations.
  • Underline FollowA glowing emerald-to-tan gradient underline slides and resizes to follow hovered nav links; wanders until first deliberate input across links when unhovered.
  • Sliding PillA 3-segment Day/Week/Month toggle where a glowing translucent pill slides between options with a spring bounce on a dark rounded bar.