Redesign live bar: compact floating bar that morphs between states

Browse Source

Replace the bulky modal action panel and separate cycler with a single
compact floating bar (~343px x 46px) that shapeshifts between three
modes: configure, generating, and cycling.

Configure mode: action pill (clickable, opens a 4-column chip grid
popover), inline text input with contextual placeholder, variant count
toggle (click to cycle 2/3/4), and Go button. One line, no labels,
no redundant "impeccable" branding.

Generating mode: action label + progressive dot indicators + status
text. Same bar, same position, content crossfades.

Cycling mode: prev/next nav buttons, clickable dot indicators,
counter, accept/discard. Same bar, same position.

Design details:
- Translucent warm paper background with 16px backdrop blur
- ease-out-quint spring entrance (translateY + opacity)
- Action picker scales from pill origin with 0.18s transition
- Dots animate in with scale(0.6)->scale(1) as variants arrive
- Bar tracks selected element on scroll via requestAnimationFrame
- All interactive elements have hover/active micro-interactions
- Input captures keyboard events (stopPropagation) to prevent
  picker nav from firing while typing

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

...

This commit is contained in:

Paul Bakaus

2026-04-12 17:29:27 -07:00

co-authored by Claude Opus 4.6

parent bb94dadda0

commit 722873d38a

1 changed files with 607 additions and 625 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

src/live/browser.js

+607 -625

File diff suppressed because it is too large Load Diff