∞ forever components

UI Micro-interactions

Search Bar Morph

A pill-shaped magnifier icon elastically expands into a full search bar, types a query with a blinking caret, then collapses back — looping automatically.

css+canvasmedium complexitymoderate motionclickmobile-ready

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

App headers, search entry points, or onboarding flows where you want to demonstrate search affordance without requiring user input.

When not to

Functional search forms where the bar must be interactive — this is a demo loop; wire click handlers and disable the auto-cycle for production use. Autonomous preview ends at first deliberate input and never resumes.

Working with an AI agent

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

Change the typed query to 'find your next idea', set the accent color to #8B5CF6 by replacing #0EA5E9 everywhere, and slow the open phase to 1100ms by setting its dur to 1100. 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

  • query string (QUERY constant)
  • phase durations (PHASES array dur values)
  • mount offset (t0 = now-900: the bar opens at ~0.2 s instead of 1.1 s)
  • accent color (#0EA5E9 in CSS)
  • expanded width multiplier (H*8.6 in OPEN)
  • elastic overshoot curve (elastic function coefficients)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard with static fallback render()
  • visibilitychange pause/start handlers
  • geo() resize recalculation
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions
  • Enter/Space toggle; manual open/close feedback finishes without enabling the attract cycle; reduced motion commits the selected endpoint.

Known limitations

  • SVG handle length does not actually elongate on open — len is constant (lerp of identical values), so the handle stub stays the same size regardless of open state
  • Auto-cycles by default; click only resets to the open phase, not a true interactive toggle
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

searchmorphingsvgmicrointeractiontypewriterui-controlelastic

More UI Micro-interactions components

  • Add to Cart FlyNative Add button flings a product clone into a cart; first input cancels unfinished attract flights, while each manual action keeps its full 680ms flight…
  • Notification BellSVG bell swings and rings with a ripple wave on click; a red badge counter pops in with a springy bounce and increments each ring. Auto-cycles every 2…
  • Copy ConfirmCopy icon morphs to a drawn-stroke checkmark with a green button flash and a "Copied!" toast on click; auto-cycles as a demo loop.
  • Swipe Card StackTinder-style draggable card stack — drag the top card left/right to reveal NOPE/LIKE stamps; fling-away animates it off-screen and cycles to the next card.
  • Pull to RefreshA phone-frame list supports pointer/touch pull and a native Refresh button. First input stops attract refreshes; manual refresh completes its spinner, row…
  • Accordion ExpandThree FAQ panels smoothly expand and collapse with a CSS height transition; a chevron rotates 180 degrees to indicate open state. Auto-cycles as demo.