CSS Animations
Custom keyframe animations defined in globals.css. Each animation serves a specific UX purpose.
bar-wave
Speaking waveform animation. 5 vertical bars oscillating at different speeds and delays to simulate speech audio.
mic-ring-pulse
Pulsing box-shadow ring on the MicButton when actively recording. Creates an expanding violet glow that fades out.
score-fill
Staggered scale+opacity animation for score bar segments. Each bar fills from left with increasing delay.
modal-enter
Entrance animation for modals. Combines translateY(28px), scale(0.95), and opacity fade with a spring-like cubic-bezier.
Modal content
Slides up with spring easing
accordion-down / accordion-up
Height-based open/close animations for accordion panels. Used by AccordionContent component.
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer