∞ forever components

Navigation

Magnify Dock

macOS-style frosted-glass dock of six gradient tiles that scale up and lift toward the cursor; idle auto-sweep keeps it animated when untouched.

cssmedium complexitymoderate motionpointer

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 →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

App launcher UIs, portfolio nav bars, or any bottom dock needing tactile depth and ambient motion.

When not to

Touch-only interfaces where hover magnification is meaningless; layouts with limited vertical space where the lift effect clips.

Working with an AI agent

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

Change MAX from 1.85 to 2.2, increase RANGE to 110, and swap item 3 gradient to linear-gradient(150deg,#34d399,#059669) for a green accent. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • magnification scale (MAX=1.85)
  • influence radius (RANGE=80)
  • idle sweep speed (el*1.1)
  • item gradients (nth-child CSS)
  • dock gap and padding
  • backdrop blur amount (blur(8px))
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • measure() cache pattern (never call getBoundingClientRect per frame)
  • IIFE wrapper
  • visibilitychange stop/start
  • prefers-reduced-motion guard
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Magnification is pointer-only — no touch equivalent on mobile
  • Idle sweep and mousemove share the same update() path; entering dock stops the sweep but RAF continues until mouseleave
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default

dockmagnifynavigationmacoshoverfrosted-glasscss-variable

More Navigation components

  • 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 idly 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.