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.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn