Game Feel (Juice)
Makes an app's meaningful moments land — through coordinated motion, haptics, and sound. Animation technique lives in design/animation-patterns; confetti/badge generation lives in generators/milestone-celebration. This skill is the discipline layer: which events deserve feedback, on which channels, and how to verify nothing important is silent.
When This Skill Activates
Use this skill when the user:
- Says the app feels flat, lifeless, or "lacks juice/polish/delight"
- Wants celebrations designed (winners, streaks, reveals, score changes)
- Asks to design or review haptics (vocabulary, Core Haptics,
.sensoryFeedback) - Asks about sound effects, buzzers, countdown ticks, or fanfares
- Wants a feedback audit — do the right events fire the right channels?
- Is building a party/group game where the phone is shared, passed, or watched at a distance
Core Principles
1. Channels have different reach — match the channel to the audience
A single-user utility can lean on haptics. A shared-phone or room-facing app (party games, kitchen timers, presentations) must put its signature moments on a room-scale channel. The most common juice failure: all feedback is haptic, and the phone is lying on a table.
2. Feedback scales with rarity
Tick < action confirmed < success < round complete < winner. If the rarest event (winning) fires the same pattern as a routine one (round end), the app has no climax. Reserve the biggest pattern, the confetti burst, and the fanfare for the rarest event.
3. Escalation must agree across channels
If the timer's ring turns amber at 10s and red at 5s, the haptic tier and any audio tick must escalate at the same thresholds. Cross-channel disagreement reads as broken, not layered.
4. Single-owner rule
Exactly one code layer fires feedback for a given event. When an engine and a view-store both react to "music stopped", the user gets a double-buzz. Decide the owner (usually the layer closest to the state machine) and make the other layer silent.
5. Juice amplifies meaning — it never decorates
Every effect must be attached to an event the user cares about. Ambient/always-on effects (background particles, looping glows) are texture, not feedback — keep them static or slow, and never let them compete with event feedback.
6. Every channel needs an accessibility story
- Motion → gate large-scale motion on Reduce Motion, with a static equivalent
- Haptics → user-facing toggle (the system provides no global haptics setting for Core Haptics)
- Sound → mute toggle independent of system volume; a deliberate, documented silent-switch policy
Decision Tree
Review Checklist
When reviewing an app's game feel, verify:
- Signature moments hit ≥2 channels (e.g. winner = motion + haptic + sound)
- Room-facing events use a room-scale channel (audio, display-size motion, torch)
- Rarity gradient exists — the rarest event has visibly/audibly the biggest feedback
- No channel disagreement — escalation thresholds match across visual/haptic/audio
- Single owner per event — no double-fire from two layers
- Score/number changes animate (
.contentTransition(.numericText())) — values never teleport - State changes transition — no hard cuts between phases of a flow
- Reduce Motion parity — every gated effect has a static equivalent conveying the same information
- User controls exist — haptics toggle; mute toggle if there's an SFX layer
- Loading/waiting states have anticipation — determinate progress or a live effect, not a bare spinner at a climactic moment
Reference Files
Related Skills
design/animation-patterns— the how of every motion techniquedesign/sf-symbols— symbol effect vocabulary for feedback glyphsgenerators/milestone-celebration— production confetti/badge/celebration codeios/accessibility-audit— Reduce Motion and assistive-tech verification
