Foundations: Motion & Micro-interactions

Our Philosophy: Design That Feels Alive

[Illustration Note: Motion cloud made of ripple, pulse, border, underline glide effects]

This document is the heart of our Engaging pillar and our Fluid soul. In the Play+ ecosystem, motion is not decoration; it is a form of communication. It's how we provide feedback, guide attention, and create a seamless flow between states. Good motion design is invisible, making the interface feel responsive, intuitive, and alive.

Micro-interactions are the small, purposeful moments of delight that give our product personality. They are the subtle acknowledgements—the ripple on a click, the pulse of a notification—that make the experience feel thoughtful and human. This guide establishes the principles for creating motion that is both functional and delightful.

Motion Philosophy

In Play+, Signature Motions aren't just animation styles — they are visual metaphors for how our brand behaves: fluid, expressive, human, and clear. These patterns create consistent moments of recognition across our ecosystem. Each one serves a deliberate role in elevating clarity, delight, and purpose.

Core Motion Principles

[Illustration Note: Four tiles each showing Purposeful, Responsive, Brand-Driven, Inclusive motion examples]

Principle	Design Guideline	Developer Implementation
Purposeful	Every animation must have a clear purpose, such as guiding the user or reinforcing hierarchy.	Connect each animation to a user action or state change. Avoid gratuitous animations.
Responsive	Motion should provide immediate feedback like a physical object responding to touch.	Prioritize transform and opacity. Avoid width, height, margin, or top/left.
Brand-Driven	Animations must follow the Play+ tempo and character for consistent signature feel.	Use $motion-duration-* and $motion-easing-* tokens for all animations.
Inclusive	Motion must be accessible and respect user preferences.	Wrap animations in @media (prefers-reduced-motion: no-preference) and offer alternatives.

Motion System Tokens

[Illustration Note: Token chips animating to show different durations and easing curves]

Duration Tokens:

• $motion-duration-swift (150ms) — instant feedback like hovers
• $motion-duration-standard (300ms) — default transitions and loaders
• $motion-duration-emphasis (450ms) — to draw attention or celebrate

Easing Tokens:

• $motion-easing-standard: natural in/out movement
• $motion-easing-enter: fast-to-slow entrance motion
• $motion-easing-exit: slow-to-fast exit motion

Pattern Tokens:

• Combinations of duration + easing used across Play+ (e.g., $motion-pattern-hover-fast)

Application Guidance

[Illustration Note: Spectrum diagram of motion intensity from utility (subtle) to expressive (playful)]

Question	Guidelines
When to Use	Enhance understanding, continuity, and feedback
Where to Use	Key states: transitions, confirmations, input changes
How to Use	With tokens, optimized transforms, minimal performance impact
How Much	Subtle utility motion regularly, expressive motion only at key moments

Signature Motion Patterns

[Illustration Note: Carousel of 5 signature pattern GIFs with captions (Gradient Border, Ripple Trail, etc.)]

These patterns are expressive, playful, and reinforce the identity of Play+. Each is crafted to elevate moments and deliver delight where it matters.

Pattern	Description	Use Case
Gradient Border Flow	Flowing multicolour border to show focus/state	Forms, modals, selected cards
Press Ripple Trail	Ripple follows interaction point	All clickable elements
Micro-Bounce	Elastic reaction on select	Checkboxes, toggles, dropdowns
Underlining Glide	Center-out hover underline	Navigation links, tabs
Feature Spotlight Pulse	Gentle glow draws focus to new/important items	New features, celebratory moments

Motion Design Guide

Component-to-Motion Mapping

[Illustration needed: UI sheet with annotations showing motion overlays on different components]

Component	Motion Type	Signature Pattern(s)	Token(s) Used
Button	Utility + Expressive	Press Ripple, Micro-Bounce	$motion-duration-swift, ripple-feedback
Form Field	Utility	Gradient Border, Success Tick	$motion-duration-standard, gradient-focus
Tab Navigation	Utility	Underlining Glide	$motion-pattern-hover-fast
Card	Expressive	Gradient Border Flow	$motion-easing-standard
Tooltip/Modal	Utility	Fade, Background Blur	$motion-duration-standard
Success Alerts	Expressive	Feature Spotlight Pulse	$motion-duration-emphasis
Checkbox/Radio	Utility	Micro-Bounce	$motion-duration-swift

Micro-interaction Patterns

[Illustration needed: Sequential cards showing step-by-step interaction states (hover, click, load, done)]

Type	Description	Examples
State Change	Visualize a component's condition change	Toggle from off to on, checkbox selection
Transition	Represent spatial/content shifts	Slide between tabs, screen change
Feedback Indicator	Acknowledge user interaction	Ripple effect on button press
Progress Indicator	Show ongoing processes	Spinner, linear loader on form submit

Common Sequences

UI Element	Interaction Sequence
Button	Hover → Press → Loading → Done
Form	Typing → Validation Error → Success Confirmation
Modal	Trigger → Fade In → Interaction → Close
Navigation	Hover → Select → Slide or Highlight

Motion Implementation Guidelines

[Illustration needed: Do vs Don't comparison of smooth vs janky motion (opacity vs margin)]

• Use transform and opacity for GPU-accelerated transitions
• Avoid animating expensive properties like top, left, width, or height
• Default to Framer Motion or CSS transitions for smoother animation
• Always check system-level accessibility preferences (prefers-reduced-motion)

Guardrails: Do's and Don'ts

[Illustration needed: Side-by-side UI comparison of good motion (subtle) vs bad (flashing)]

Do	Don't
Use motion to reinforce hierarchy and guide the user	Let animations delay or distract from task
Keep timing and easing consistent	Mix random timings or conflicting motion styles
Provide visual feedback for every user action	Use motion without a communicative goal
Optimize for performance	Animate layout properties like height or margin
Respect system-level preferences	Use motion that flashes or loops excessively

Accessibility & Performance

[Illustration needed: Toggle animation showing reduced motion setting before/after]

• Honor prefers-reduced-motion; provide static alternatives
• Avoid flashing or repetitive movement that causes discomfort
• Use transform and opacity to achieve 60fps on target devices

Summary Principles

[Illustration needed: 4 principles radiating from central Play+ logo (clarity, consistency, delight, accessibility)]

Principle	Description
Clarity	Every animation communicates purpose and feedback clearly
Consistency	Unified motion behavior across all elements and flows
Delight	Joyful moments delivered thoughtfully and purposefully
Accessibility	Motion is inclusive and adaptable to every user's sensory needs