Design source

Motion And Feedback

Rules for motion, badge unlocks, C4-DY feedback, and challenge completion.

Motion And Feedback Rules

Status: draft v0.2

Motion should make progress feel alive without slowing down practice.

Principles

  • Motion explains hierarchy or celebrates progress.
  • Motion must be short and interruptible.
  • Practice/scoring flows stay calm.
  • Respect reduced-motion settings.
  • Avoid constant background motion on dense reading screens.

Motion Scale

Micro

Use for:

  • button press
  • chip selection
  • score toggle
  • tab selection
  • card hover only in HTML atlas, not iOS

Duration target: 120ms to 220ms.

Standard

Use for:

  • sheet presentation
  • card reveal
  • section transition
  • C4-DY prompt appearing

Duration target: 220ms to 420ms.

Celebration

Use for:

  • badge unlock
  • level up
  • challenge win
  • milestone

Duration target: 1.5s to 3.5s, with clear dismissal.

Badge Unlock

Current problem:

  • User can receive a badge notification but not find the badge afterward.

Design requirement:

  • Notification tap must route to a visible badge/progress surface.
  • Unlock state should be replayable or at least clearly visible in profile/progress.
  • Badge artwork should have one premium reveal motion.

Candidate behavior:

  1. Notification tap opens Badge detail or Profile > Badges.
  2. Badge card is highlighted.
  3. A short unlock animation plays once.
  4. User sees why it unlocked and what to do next.

Open Antho ask:

  • Define whether badge/level reveals feel closer to Apple Activity, a golf trophy moment, or a LineCard-specific precision/progression effect.
  • Provide one static art direction for an unlocked badge and one transition state from notification tap to the visible badge location.

C4-DY Feedback

Player-facing Mon Caddie should have a different motion language than normal UI:

  • subtle pulse only when there is a useful next step
  • no constant bouncing
  • voice/listening state can use waveform or breathing glow
  • prompt cards slide from companion entry, not from random positions
  • Antho Home already includes a Mon Caddie button; reconcile that with the older floating button before adding app-wide motion.
  • Internal C4-DY naming is acceptable in docs, but player-facing motion/copy should use Mon Caddie unless the team changes the brand.

Build 84 Surface Transitions

Current reference surfaces:

  • Home opens primary app routes through transparent hit zones on a PSD-backed shell.
  • Connexion uses a custom Retour hit area and native keyboard/auth states on top of the raster shell.
  • Mes coachs uses a custom Retour hit area and native booking navigation on top of the raster shell.

Rules to preserve:

  • The artwork can be rich, but the interaction feedback must still feel native and immediate.
  • Tap zones over artwork need clear pressed/focused/accessibility states even if the visible art is static.
  • Keyboard, loading, error, empty, and refresh states should be designed before the next rollout, not patched afterward.

Challenge Completion

When all accepted participants complete:

  • final ranking notification routes to challenge detail
  • ranking state is visually distinct from active state
  • winner/position feedback is visible immediately

HTML Atlas Motion

The design atlas can be richer than the app:

  • scroll animations
  • before/after sliders
  • phone frames
  • component galleries

But the atlas must not imply every effect belongs in the native app.