Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Light motion across the interface: dialogs, panel, views, state changes and press (final design §2)

Aperta
  • Qualcosa non va?
#593 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Zamojski5 ci sta già lavorando.

Dal 17/10/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

enhancement

Founder direction (Hubert, 2026-10-17). Flux feels static: panels, dialogs, sheets and screens appear and disappear instantly, so the application feels unfinished. Add light, quick motion where it helps me follow what changed: what opened, where it came from, and what moved. Keep the final design's rules (guide §2): pressing scales to 0.97 and springs back in about 250 ms, status changes morph, reduced motion shows the static frame, and nothing moves for its own sake.

#155 covers only the traveling project/tab highlight, new-message arrival and typing presence. That work stays there. This issue covers motion for the rest of the interface.

Inventory on main 51b6920f

Motion tokens exist (ui/tokens.css:90–100: --dur-1..4, --ease-out, --ease-sheet, --ease-spring, reduced-motion zeroing). They are used in only a few places: the message menu, the phone thread sheet, docking the thread, the selection checkboxes, auth/ask/note "rise", sketch nodes, and button :active press. No motion at all: route and view changes (Conversation ↔ Map ↔ Tasks ↔ Wiki ↔ Agents, Home, Inbox, Search, Settings sections), the desktop detail panel opening/closing and replacing its content (Spokój "‹ back"), centred dialogs and their scrim (Create task, hand-off, copy-to-task, ⌘K), toasts, the sidebar collapse, popovers and selects, task state changes (rows, chips, board cards except is-arrived), list rows being added or removed (Inbox decisions, tasks, people), and the hover toolbar is a bare fade. Press scale is on .ui-btn only, not on chips, rows, icon buttons or the composer send.

Acceptance criteria

  • AC-1 — Enter and exit. Dialogs, ⌘K, popovers, menus, toasts and the desktop detail panel enter and leave with a short fade and transform (≤ 180 ms in, ≤ 140 ms out, --ease-out/--ease-in). The scrim fades. Exit motion never delays focus return or the next action, and closing while opening settles on the latest state.
  • AC-2 — Panel content. Replacing the panel's content (task → thread → "‹ back") slides a short distance in the direction of travel, with a crossfade. The panel shell, header row and its controls do not move (Spokój rule 7).
  • AC-3 — Views and routes. Switching project views and top-level places crossfades the content area only (≤ 160 ms; the View Transitions API where supported, otherwise CSS). Header, sidebar, composer and tab bar stay still. Back (#592) reverses the direction. The reading position is never animated.
  • AC-4 — State changes morph. A task's state chip, a decision's outcome, and a row moving between groups morph or slide in place rather than jumping. Added rows grow in and removed rows collapse (height + opacity), without moving other content's focus or reading anchor.
  • AC-5 — Press and hover. Every pressable control (chips, rows that open something, icon buttons, send, swipe actions) uses the same --press scale with --dur-press spring. Hover and selection fills use --tr. The message toolbar fades and slides a few pixels in from its side.
  • AC-6 — Discipline. Only opacity and transform animate (no layout-thrashing properties except the collapse in AC-4). No bounce loops or attention pulses, and nothing animates on first page load except Kreska's moments (#352). prefers-reduced-motion: reduce and Settings → Appearance → reduced motion give the static end state immediately. Animations pause when hidden. Measure frame times on the demo data at 1440 × 900 and on a 4× CPU-throttled 390 × 844 profile against the #151 budgets.
  • AC-7 — Evidence. Short before/after video or Playwright trace for each AC on Chromium and WebKit, light and dark, plus a reduced-motion run showing static frames. Get an independent visual and interaction review on the implementation head. Static screenshots cannot certify motion.

Scope and coordination

Shared tokens and components first (ui/tokens.css, ui/ui.css overlay/panel/toast/sheet primitives, one small motion helper if needed), then surfaces. One owner. Coordinate with #155 (navigation highlight, arrival), #352 (Kreska moments), #488 (panel), #591 (message toolbar) and #594 (selection mode).

Refs #500, #155, #336, #151

Lingua principale
TypeScript
Stelle
3
Fork
0
Merge medio
20h 26m
PR unite (30g)
347

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di ColdPhase/flux

Tutte le issue di ColdPhase/flux

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.