Design System
Interactive catalogue of every animation in the Angels design language. Click "Replay" to re-trigger any animation.
01 — Foundation
Five curves for five purposes. Click any to see it in motion.
02 — Micro-Interactions
Every interactive element responds to touch with purposeful motion.
Scale to 0.97 on press. Shadow lifts on hover. Three variants: primary (amber), teal, crisis.
transform: scale(0.97) --dur-micro
Knob slides with spring overshoot. Background colour transitions smoothly.
--ease-spring --dur-fast
Selected chip scales up 5% and fills with amber. Deselected chips return to default.
transform: scale(1.05) --dur-fast
Border becomes amber, box-shadow expands outward as a warm glow ring.
box-shadow: 0 0 0 3px --dur-fast
03 — Screen Transitions
Every journey step uses directional transitions to communicate spatial relationship.
Content slides left as new screen enters from right. Used for "next" actions in onboarding and check-in flows.
slideForward --dur-normal --ease-out
Reverse of forward — content slides right as previous screen returns from left.
slideBack --dur-normal --ease-out
Scale up from 92% with fade-in. Used for modals, detail views, and safety plan editing.
fadeScale --dur-normal --ease-out
Children enter sequentially with 60ms delay between each. Used for onboarding options, contact lists, coping strategies.
staggerIn --stagger: 60ms
04 — Emotional Animations
Motion that carries emotional weight. Calm for safety, urgency for crisis, joy for progress.
4-second breathing rhythm. Used during emotional readiness checks and pause moments. Scale 1.0 → 1.15 with opacity shift.
breathe 4s infinite
Number pops in with scale + blur. Ring expands outward and fades. Celebrates daily check-in consistency.
countReveal celebRing --ease-spring
Screen darkens to navy. Alert icon pulses with expanding amber ring. Serious but not panicking — grounded urgency.
crisisBg crisisPulse --dur-dramatic
Selected mood bounces up slightly and gets an amber border ring. Other options dim. Click any to see.
moodBounce --dur-fast --ease-spring
05 — Loading & Feedback
What happens between actions. Skeleton screens, progress gauges, and notifications.
Warm amber shimmer sweeps across placeholder shapes. Staggered delays create a wave effect across rows.
shimmer 1.5s infinite
Bars fill from left with ease-out deceleration. Staggered start for multiple gauges. Gradient shows mood quality.
gaugeFill --dur-slow
Dots pop when completed — scale up, flash, settle at amber. Connecting line fills to match. Used in onboarding flows.
stepPop --dur-fast --ease-spring
Slides down from top, holds for 3 seconds, slides back up. Used for angel connection events and check-in confirmations.
notifSlide 4s total
06 — Ambient
The signature Angels glow. A 4-second breathing pulse that signals connection and safety.
Pulsing golden halo on active angel avatars. Communicates "connected and watching over you."
Faster 2-second pulse in crisis navy. Expanding ring draws immediate attention without being alarming.
Subtle pulse on status indicators. Communicates "this is live and active" without being distracting.