Skip to content

Animate and polish the website, iPad app and Windows window - #55

Merged
whoisaldo merged 6 commits into
mainfrom
ui-polish-animations
Sep 26, 2026
Merged

whoisaldo merged 6 commits into
mainfrom
ui-polish-animations

Conversation

@whoisaldo

@whoisaldo whoisaldo commented Sep 25, 2026 •

Copy link
Copy Markdown
Member

What changed

Website (docs/)

  • The hero rises in word by word on load; the showcase window and iPad slide into place, then the iPad floats with a beacon ring.
  • Feature, step, requirement and FAQ groups reveal one item after another; cards lift with a pointer-following spotlight.
  • The nav turns solid on scroll and highlights the section in view; the release timeline draws its connector; the FAQ animates open where interpolate-size is supported.
  • Nothing is hidden without JavaScript (html.no-js), and prefers-reduced-motion shows everything at once.
  • The showcase uses a fresh render of the Windows window.

iPad

  • The connect screen staggers in on launch and the stream picture fades in; the HUD re-shows whenever the link changes, such as a cable taking over.
  • Connecting and reconnecting show pulse rings; the live dot breathes; HUD numbers roll with contentTransition(.numericText()).
  • Buttons and list rows answer presses with springs; a wrong pairing code shakes the field.
  • Continuous effects stop under Reduce Motion. Accessibility identifiers and labels are unchanged.

Windows

  • Pages and notices fade and settle in (widgets::appear); the sidebar marks the open page with a lime bar that slides to the one clicked.
  • Hover states, the segmented pill and the slider knob interpolate instead of switching.
  • The window still repaints only while something animates, so the encoder keeps the GPU. Automation names are unchanged.

docs/design.md gains a Motion section. A Watch section under the hero embeds the twenty-second launch film (poster, one play button, native controls once it runs, no autoplay). The contact address change lives in #54, not here.

Verification

  • Site: headless Chrome captures at 1440, 1024 and 390 px (no horizontal overflow), mid-animation frames, hover, and the reduced-motion variant.
  • iPad: Debug build for the iPad simulator, every EM_UI_PREVIEW state screenshotted, launch and connecting recordings inspected, ConnectScreenTests pass (3/3).
  • Windows crate on macOS: cargo build, cargo clippy --all-targets -D warnings, cargo test --lib gui, and gui_snapshots pass. The six references were updated; the only pixel difference is the new sidebar bar.

Website: the hero rises in word by word on load, the showcase window and
iPad slide into place with a floating loop and a beacon ring, cards reveal
one after another and lift with a pointer-following spotlight, the nav
turns solid on scroll and highlights the section in view, the release
timeline draws its connector, and the FAQ animates open where supported.
Nothing is hidden without JavaScript, and reduced motion shows everything
at once. The showcase now uses a fresh render of the Windows window.

iPad: the connect and stream screens cross-fade, the connect screen
staggers in on launch, connecting and reconnecting show pulse rings, the
live dot breathes, HUD numbers roll, buttons and rows answer presses with
springs, and a wrong pairing code shakes the field. Continuous effects
stop under Reduce Motion.

Windows: pages and notices fade and settle in, the sidebar marks the open
page with a lime bar that slides to the one clicked, and hover states, the
segmented pill and the slider knob interpolate instead of switching. The
window still repaints only while something animates. Snapshot references
gain the sidebar bar; nothing else changed.

docs/design.md describes the motion system.
PR #54 points every public contact at hello@sideband.studio and keeps
aldo@sideband.studio for inquiries meant for Ali directly. Backing the
aldo@ edit out of this branch so the two do not conflict.
A Watch section under the hero plays the twenty-second film: poster frame,
one lime play button, native controls once it runs, no autoplay. Without
JavaScript the video keeps its native controls.
A USB cable taking over a Wi-Fi session, or a quick reconnect, can hand
the display view back with its HUD already dismissed, so the stream pill
never announced the new link; the USB takeover UI test caught it. The
view now re-shows the pill whenever the transport or the connection state
changes, which is also what a person plugging in a cable expects to see.

The root view goes back to a plain switch; the stream picture fades in
inside the display view instead of cross-fading whole screens.
@whoisaldo
whoisaldo merged commit 19bdd86 into main Sep 26, 2026
6 checks passed
@whoisaldo
whoisaldo deleted the ui-polish-animations branch September 26, 2026 17:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant