Problem
Aural had a strong visual direction, but the product still needed rules for how screens, feedback, sound cues, and animated moments should behave together.
Case studyPocket FMAural Design System
Defining the animation language for Aural.
Aural already had a visual language for sound. My work was to define how that language should move across product surfaces, from tiny feedback states to expressive audio moments.
Move
I translated the idea of sound into motion principles, then shaped those principles into timings, easing, triggers, staging rules, and reusable animation patterns.
Output
The system gave designers and engineers a common language for motion: what should move, why it should move, how fast it should move, and when it should stay still.
Why motion needed its own system
Sound is felt before it is understood. The interface had to carry that feeling.
Aural was built around the idea that sound is not only heard. It creates response, rhythm, tension, release, memory, and emotion. A static visual system could set the tone, but it could not deliver the full experience alone.
The missing layer was motion. When a user taps play, unlocks an episode, sees a reward, changes a setting, or moves through the player, the product gives visual feedback and sound feedback at the same time. Those two feedback systems needed to feel like they belonged together.
The system split
User interaction creates two kinds of response:
Sound design
Visual design
Animation design
The animation system became the bridge between the visual theme and the product's audio identity.
Approach
I started with sound, then translated it into movement.
The first step was not choosing easing curves. It was understanding what sound could become visually: frequency bars, echoes, vibration, radial bursts, spectrograms, and waves. Each element suggested a different kind of motion.
From there I separated interaction motion from motion graphics. Interaction motion had to make the product usable. Motion graphics could carry brand feeling, but only when they did not interrupt the task.
Frequency bars
Good for playback, listening state, voice input, or audio settings.
Vertical rhythm with changing height, low amplitude by default, stronger when audio is active.
Echoes
Good for notifications, alerts, confirmation, and moments where sound leaves a trace.
Repeated fade and scale, each repeat lower in opacity and slower than the previous one.
Vibration
Good for quick warnings, wrong actions, or tactile feedback.
Short horizontal or scale movement. Keep it tiny so it does not feel broken.
Radial bursts
Good for play, unlock, premium success, and reward moments.
Lines or particles expand from one source, then fade before they become decorative noise.
Spectrograms
Good for atmospheric brand surfaces, audio identity, and background motion.
Layered gradients, particles, or noise fields that move slowly with the feeling of sound.
Core principles
The rules were simple, because the product had to scale.
Purposeful
Every animation needs a job: explain a change, confirm an action, guide attention, or connect two states.
Intuitive
Motion should follow the direction and weight of the interface. It should help the next state feel expected.
Seamless
Transitions should connect states without hard jumps, especially in listening and player surfaces.
Responsive
Touch feedback should feel immediate. If the user taps, the product should acknowledge it fast.
Natural
Movement should use curves, easing, and small variations so it feels less mechanical.
Accessible
Motion should not block usage. Reduced-motion alternatives must preserve meaning without unnecessary movement.
Coherent
Similar actions should move in similar ways, so the product does not feel like multiple systems stitched together.
Informative
Motion should carry information: hierarchy, status, progress, focus, or relationship between elements.
Core feelings
Organic, energetic, and symphonic became the motion direction.
These three words helped the team judge motion without getting stuck in taste debates. If an animation felt robotic, passive, or disconnected from sound, it was not Aural.
Organic
Used for transitions that should feel alive and connected, not rigid. This meant curved paths, smooth starts and stops, subtle elasticity, and blending between states.
Curved paths
Soft easing
Subtle elasticity
Seamless blending
Connected elements
Energetic
Used when the product needed momentum: play actions, unlock moments, streaks, rewards, or any surface where the product should feel active.
Speed
Rhythmic beats
Small vibration
Rebound
Dense movement
Symphonic
Used when many elements move together. The goal was coordination: one movement leads, others support, and the whole screen feels composed.
Layered movement
Synchrony
Dynamic unity
Crescendo and release
Sound sync
Motion tokens
Timings and easing made the language usable in product work.
The system needed enough structure for engineering, but not so much that every designer had to think in animation graphs. I defined a small token scale around the job of the motion, not around arbitrary duration names.
TokenDurationEasing
Instant feedback
Tap response, pressed state, icon feedback, control acknowledgement.
80-120ms
cubic-bezier(0.2, 0, 0, 1)Micro transition
Small state changes, toggles, compact controls, quick opacity or scale shifts.
120-180ms
cubic-bezier(0.2, 0, 0, 1)Component transition
Cards, bottom controls, labels, artwork shifts, player UI changes.
180-260ms
cubic-bezier(0.16, 1, 0.3, 1)Surface transition
Sheets, full-screen overlays, onboarding steps, player to detail transitions.
260-420ms
cubic-bezier(0.16, 1, 0.3, 1)Expressive moment
Unlock, reward, success, premium upgrade, or sound-led branded moments.
500-900ms
staged, with leading and trailing elementsReusable patterns
The system covered interactions and motion graphics separately.
Anticipation
Give the user a tiny pre-move before a larger change. A sheet can compress slightly before opening, or artwork can settle before controls appear.
Reactive feedback
Every high-frequency action needs a response. Play, pause, like, save, follow, unlock, and pay should answer the user immediately.
Staging
Do not move everything at once. Lead with the element that changed, then bring supporting information after a short delay.
Informative motion
Use motion to show relation: where an item came from, where it went, what changed, and what is now available.
Do and do not
The system was also a filter for restraint.
Do
- Use motion to explain hierarchy, causality, status, or progress.
- Keep tap feedback under 120ms.
- Use the same easing family for the same action type.
- Stagger related elements by 30-60ms when a sequence needs clarity.
- Sync branded motion to sound only when the sound is meaningful.
- Provide reduced-motion alternatives for repeated or large movement.
Do not
- Do not animate every surface just because the system allows it.
- Do not use bounce on serious states like payment errors or cancellation.
- Do not make loading, payment, or unlock states feel slower than they are.
- Do not mix multiple easing styles in the same transition.
- Do not let decorative sound visuals compete with the listening task.
- Do not use motion to hide unclear information architecture.
Handoff
The guideline had to work after the presentation ended.
The final motion guideline was not just a moodboard. It documented what designers should decide before handoff: timing, easing, starting state, ending state, overlap between elements, delay, repetition, trigger, color transition, text animation, and sound interaction.
The practical test was simple: if another designer picked up a player state, a paywall, or a listening surface, they should know whether the motion should be organic, energetic, symphonic, or intentionally still.
Handoff checklist
Purpose
Trigger
Duration
Easing
Start and end state
Overlap
Delay
Repetition
Sound sync
Reduced motion
Motion spec template
Prototypes were not always enough, so I created a Figma spec template.
Prototype links are useful for feeling the animation, but they often fail at exact handoff. Developers still need to know the starting value, ending value, easing, delay, duration, anchor point, parent layer, blend mode, and how multiple properties overlap.
To make that handoff clearer, I created a motion design spec template in Figma. Designers could document the animation like a timeline, not just say "check the prototype." The template made motion review more concrete and gave engineering a source they could implement against.
What the template captured
Component and state
Property being animated
Start and end values
Timeline position
Duration
Delay
Easing curve
Anchor point
Parent layer
Layer blending
What is still missing
The guideline is the base. The next step is proof through examples.
The direction is clear enough to guide product work, but a motion system becomes stronger when teams can compare real clips, inspect specs, and test the same behavior on Android, iOS, and web.
Production examples
The system still needs a small library of shipped clips: play/pause, unlock, reward, paywall, error, empty state, and loading. Specs are useful, but teams copy examples faster.
Component-level recipes
The next pass should document exact recipes for common Aural components: player controls, bottom sheets, onboarding steps, premium moments, carousels, and toast feedback.
Engineering tokens
The motion spec template helped handoff, but the next step is platform-level code tokens so timing and easing values are not manually recreated in every implementation.
Motion QA checklist
A checklist should be added to design review and QA: frame drops, reduced motion, text readability during movement, sound sync, delay, and whether the motion still makes sense without sound.