Transitions & Interactions

A pixel-perfect reference for all transition designs, hover states, button styles, and visual effects in the Voice Aura design system.

01

Button Transitions

All button variants with hover, active, focus, and disabled states. Transition: color, background-color, border-color, box-shadow, transform 0.2s ease-in-out.

Primary & Accent Variants
Hover for lighten/darken + translateY(-1px)
Secondary, Ghost & Link Variants
Learn more →
Hover for bg change + arrow translateX(3px)
Size Variants
States & Modifiers
03

Card Hover Transitions

Blog cards lift + image scale on hover. Pricing cards darken border + shadow on hover. Feature link arrows nudge on hover.

Pricing Card Hover
Free
$0 /Month

Perfect for trying out voice generation with basic customization.

Get Started Free
  • Access to core Text-to-Speech
  • Limited monthly characters
Hover for border-darken + shadow
Featured Pricing Card
Creator
$29 /Month

Ideal for content creators & professionals.

Upgrade to Creator
  • Everything in Free
  • HD audio exports
Featured: scale(1.02) + dark border + shadow-lg
Blog Card Hover
Voice agent microphone setup
VOICE AGENTS 2024-12-08 3 min

Why Voice Agent Prompts Require a Different Approach

Scripting voice agents requires a different mindset than crafting prompts for text-based LLMs.

Read more
Hover for lift(-2px) + image scale(1.03)
04

Interaction Utilities

Reusable hover classes: .va-hover-lift, .va-hover-scale, .va-hover-glow, .va-hover-arrow.

va-hover-lift
↑
translateY(-4px) + shadow-lg
va-hover-scale
⤢
scale(1.03)
va-hover-glow
✦
box-shadow: 0 0 0 4px blue/12%
va-hover-arrow
Learn more
arrow translateX(3px) + gap grow
05

Transition Presets

Standard easing presets from the design system tokens.

120ms
va-transition-fast
200ms
va-transition (base)
350ms
va-transition-slow
400ms
va-transition-bounce
06

Feature Visual Panel

The reference design (behance-05) shows a prominent Voice Aura "app icon" logo centered in the feature visual panel. Demonstrates the light and dark feature panel variants.

Light Panel (va-feature-visual--light)
Hover icon for scale(1.05) + elevated shadow
Dark Panel (va-feature-visual--dark)
VOICE AURA
+
+
+
+
Yang lu wu
Customer support agent
Dark panel with watermark + crosshairs + card
07

Section Blend Transitions

Smooth gradient blends between page sections for seamless visual flow. Uses va-section-blend--bottom and background gradient utilities.

Section Flow (Hero → Trust → Features)
Hero Section
background: #FFFFFF
Trust Bar
gradient: white → #F9FAFB
Feature Section
gradient: #F9FAFB → #F3F4F6
Background Utilities Available
.va-bg-white — Pure white
.va-bg-alt — Light grey (#F9FAFB)
.va-bg-dark — Near-black (#1A1919)
.va-bg-gradient-subtle — White → grey
.va-bg-gradient-dark — Dark + blue tint
.va-section-blend--top — Top fade
.va-section-blend--bottom — Bottom fade
.va-section-separator — 1px line
08

Entrance Animations

Keyframe-based entrance animations. Applied via .va-animate-* classes. All respect prefers-reduced-motion.

↑
fade-up
↓
fade-down
←
fade-left
→
fade-right
⤢
scale-in
~
float (loop)
◉
pulse (loop)
09

Pattern & Background Overlays

Decorative pattern overlays with CSS custom property control via --va-pattern-opacity.

Halftone (bottom)
va-pattern-halftone--bottom
Dot Grid
va-bg-dots
Radial Glow (blue)
va-bg-glow--blue
10

Form Input Transitions

Input focus transitions use border-color 0.2s + box-shadow 0.2s. Focus ring: 0 0 0 0.2rem rgba(#0478FF, 0.25). Hover darkens border.

Text Input States
Click inputs for blue focus ring + border transition
Select, Textarea & Checkbox
All controls share consistent focus transitions
11

Glassmorphism Effects

The .va-glass utility creates frosted-glass panels. Uses backdrop-filter: blur(12px) with semi-transparent background and subtle border.

Glass on Light Background
Glass Card
backdrop-filter: blur(12px)
background: rgba(255,255,255,0.7)
border: 1px solid rgba(255,255,255,0.3)
Scrolled Navbar (Glass Effect)
VOICE AURA
ProductsAPIPricing
Page content scrolls behind
the frosted navbar
12

Trust Bar Logo Transitions

Trust bar logos display in grayscale and transition to full color on hover. Uses filter: grayscale(100%) → grayscale(0%) + opacity 0.5 → 1 at 0.3s.

Logo Hover Effect
AIRFRANCE ✈
✓ VERTIV.
Honeywell
splunk>
Hover logos for grayscale→color + opacity transition

See also

Interactions Reference (8 sections) Component Reference Backgrounds & Animations
↑