Skip to content

Add semantic micro-motion to application rail icons - #10

Merged
Nocehi merged 19 commits into
mainfrom
feat/rail-icon-micro-motion
Aug 17, 2026
Merged

Nocehi merged 19 commits into
mainfrom
feat/rail-icon-micro-motion

Conversation

@Nocehi

@Nocehi Nocehi commented Aug 16, 2026 •

Copy link
Copy Markdown
Owner

Summary

Give the rice-owned application-rail commands semantic hover/focus choreography while preserving the current 56px rail topology, command behavior, and browser-module boundary.

Base: main@a9534cc3368f9485cb4a0ed6d84882c2386788c8.

Physical dogfood corrections

Four local dogfood findings shaped this version:

  1. scale-based end states made the controls read primarily as the icon getting larger;
  2. 140ms one-shot nudges made Sessions/New Session read as a twitch, while Activity was effectively imperceptible;
  3. the first Scan/Activity pass still behaved like playback rather than interaction: Sessions launched a complete autonomous scanner animation on hover, and Activity incorrectly removed the baseline together with the shell;
  4. the adapted Scan inherited the old magnifier's 22px box despite having a larger optical footprint, while New Session still carried a known-suspect placeholder nudge.

Current product behavior

  • Sessions: the command is still identified from the existing MATERIAL_SYMBOL_PATHS.search binding, but the rice-owned rail presentation renders an adapted Carbon ScanMotion glyph at an explicit 20px inside the unchanged 36px optical seat. Hover/focus transitions the scanner frame and three scan bars into a held active pose with a short stagger. Leaving reverses that stagger from the current rendered state; there is no autonomous loop and no need to wait for a full animation cycle.
  • New Session / add: the existing Google Material Symbol stays 24px and static. The provisional clipped-part 1px nudge is removed entirely; choosing a later compose/new-session grammar remains a separate design decision.
  • Activity / browse_activity: the existing Google path is split into upper shell, lower shell, baseline, and waveform. The baseline and waveform are the persistent signal layer and remain visible throughout. Hover/focus wipes only the lower shell and then upper shell; the held state preserves baseline + waveform, and release restores upper then lower shell.
  • Big Fat Whale stays passive and stable.

The rail remains 56px wide with the same 36px optical seats, semantic seat hover/pressed/focus states, badges, commands, and adaptive coarse-pointer targets.

Motion / accessibility boundary

Pointer hover choreography is enabled only for a fine pointer with hover capability and prefers-reduced-motion: no-preference.

Keyboard :focus-visible reaches the same held states. Reduced-motion users receive neither the scanner transitions nor the Activity shell transitions. New Session is static regardless of motion preference.

Provenance / dependency boundary

Google Material Symbols Rounded remains the source for add, browse_activity, and the underlying search command identity used to recognize the Sessions rail control.

The rendered Sessions scanner geometry and scanner/bar transform relationship are adapted from Carbon Icon Animations ScanMotion, Apache-2.0. THIRD_PARTY_NOTICES.md records the donor files and IBM copyright; the adapted source carries an explicit modification notice. The donor geometry is retained, while dsh-rice changes output size to 20px and replaces the old autonomous 2s keyframe envelope with interruptible hover/focus transitions and reverse release behavior.

No @carbon/icons-motion, motion package, Framer Motion, or other browser dependency is added. The browser artifact still requires only React plus @deepseek-ai/dsh-client-ui-primitives.

Verification

Focused artifact coverage asserts:

  • Sessions is still bound to the existing search command but renders the adapted scanner geometry at 20px;
  • scanner enter/release is transition-driven, staggered, held, and non-looping;
  • release ordering is the reverse of enter and can return from an in-progress state;
  • the old magnifier handle nudge and autonomous Scan keyframes are absent;
  • New Session falls back to the ordinary static 24px Material Symbol path, with no rail add motion classes or keyframes left;
  • Activity renders upper shell, lower shell, baseline, and waveform separately;
  • only the two shell paths participate in the directional wipe;
  • baseline and waveform have no motion rule and remain visible during hover/focus and release;
  • hover/focus capability gates and reduced-motion boundaries remain in place;
  • no Carbon runtime or new motion/icon dependency is introduced.

docs/rail-motion.md records the dogfood history, sizing decision, interaction contract, representation boundary, provenance, and accessibility contract.

@Nocehi Nocehi closed this Aug 16, 2026
@Nocehi
Nocehi force-pushed the feat/rail-icon-micro-motion branch from 29d1c1c to c20b98e Compare August 16, 2026 19:04
@Nocehi Nocehi reopened this Aug 16, 2026
@Nocehi
Nocehi force-pushed the feat/rail-icon-micro-motion branch from 6c47c79 to e70ac85 Compare August 16, 2026 20:46
@Nocehi
Nocehi merged commit 93dc3b2 into main Aug 17, 2026
2 checks passed
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