Component theme

Navigation

31 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• 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.
• Gooey Tab BarPill-shaped tab bar with a vermillion blob that slides between tabs using a spring easing and SVG goo filter for liquid merge effect on dark surface.
• 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.
• Breadcrumb TrailSVG chevron separators draw themselves in with a stroke-dashoffset animation; the active gold crumb auto-advances down the trail every 2.6 seconds.
• Morphing Bottom NavA floating mobile bottom nav bar with 4 icon buttons; a glowing magenta-to-gold gradient blob springs beneath the active tab on click.
• Command PaletteA Cmd+K command palette that opens over a blurred overlay, auto-types queries, filters rows live, and highlights the selection with a spring-eased panel…
• Bounce DockA frosted dock of five gradient tiles: pressing one bounces it twice and lights a running dot beneath it, pressing it again quits; an idle clock keeps…
• Side Rail DockA vertical rail dock pinned to the left edge: six line icons with an accent bar that slides between them and labels that slide out to the right on hover;…
• Auto-hide DockA desktop with a window, and a dock that lives just below the bottom edge: it slides up when the pointer reaches the lowest 14% of the screen and drops…
• Stack Fan DockA dock whose fourth slot is a document stack: press it and four tinted cards fan upward in a 54° arc with a staggered spring, press again to gather them;…
• Genie DockA window minimises into its dock slot with a genie squeeze — it pinches to a funnel, pours down into the slot, and a thumbnail pops in — then plays back…
• Tilt DockFive glass tiles in a dock that rotate in 3D toward the pointer — up to 34° on the far ones, the nearest lifting 22px toward you — with a sheen that…
• Reflection DockThe glossy shelf dock: five tiles standing on a receding glass floor, each mirrored beneath itself with a fading mask; a lift wave rolls along the row…
• JRPG Battle MenuJRPG Battle Menu control in the 8-Bit Gaming system.
• Radial Dungeon Inventory WheelRadial Dungeon Inventory Wheel control in the 8-Bit Gaming system.
• Ridge Profile RouteEditorial ink-and-vermilion palette; drag a spring marker across a five-stop ridge profile with a bold elevation readout in feet.
• Checkpoint OrbitEditorial ink-and-vermilion palette; tap five orbit stops to stretch an elastic marker around a checkpoint ring with a bold center numeral.
• Folded Slab RouteEditorial ink-and-vermilion palette; hover, tap or use arrow keys to expand weighted route slabs with bold elevation readouts in feet.
• Fling Trail RouteEditorial ink-and-vermilion palette; fling a dotted route trail with inertial travel, snap-to-checkpoint settling and a bold elevation readout in feet.
• Tessellated Ridge RouteStone-and-parchment palette with terracotta accents; drag between six ridge checkpoints above a progressively filled triangular lattice.
• Nested Square RouteStone-and-parchment palette with terracotta accents; scroll, drag or tap through seven nested-square checkpoints with geometric zoom and rotation.
• Paper Ribbon RouteStone-and-parchment palette with terracotta accents; open six folded paper-ribbon checkpoints with proximity and keyboard feedback.
• Hex Path RouteStone-and-parchment palette with terracotta accents; tap a hexagonal route to walk between five checkpoints with a bounded particle trail.
• Lamplight Ridge RouteLamplight-on-navy palette with warm gold accents; drag a painterly ridge marker between five checkpoints with a moving warm trail.
• Lamplight Orbit RouteLamplight-on-navy palette with warm gold accents; aim around five circular route checkpoints with brushstroke arcs and a bounded ember cloud.
• Lamplight Fold RouteLamplight-on-navy palette with warm gold accents; select five folded brushstroke bands that expand around the current checkpoint.
• Lamplight Scroll RouteLamplight-on-navy palette with warm gold accents; drag or scroll a vertical route profile through five checkpoints with eased camera travel.