Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#593 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@Zamojski5 is already working on this.

Since Oct 17, 2026.

Assessment

This issue has not been assessed yet.

Description

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

Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
19h 9m
Merged PRs (30d)
334

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ColdPhase/flux

All issues in ColdPhase/flux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.