Why Voice Agent Prompts Require a Different Approach
Scripting voice agents requires a different mindset than crafting prompts for text-based LLMs.
Read more
Interactions & Transitions Reference
Every transition, hover state,
and animation — in one place
A pixel-perfect reference page for the Voice Aura design system. Scroll down to see every interaction pattern refined against the Behance reference images.
01
Button Transitions
All button variants now feature refined hover depth (translateY + shadow on primary/accent), smooth color transitions, and active press states. Hover each button to see the interaction.
Primary (Dark Filled)
.va-btn--primary → translateY(-1px) + shadow on hover
Accent (Blue Filled)
.va-btn--accent → translateY(-1px) + shadow on hover
Secondary (Outlined)
.va-btn--secondary → subtle bg + border darken on hover
Button Group
.va-btn-group → collapsed borders, z-index on active
02
Card Interactions
Cards feature hover lift, image zoom, and read-more arrow animation. The pricing card includes crosshair corner decorations and a featured card scale effect.
Blog Cards — hover to see transitions
Twitter Video Translation Guide: Translate Videos Quickly
Designing for voice means prioritizing human-like dialogue and real-time responsiveness.
Read more
Designing for Voice: Prompting Text-Based LLMs
Learn how to quickly translate videos using simple tools and AI-powered workflows.
Read moreHover Lift Utilities
.va-hover-lift
translateY(-4px) + shadow-lg
.va-hover-scale
scale(1.03)
.va-hover-glow
blue ring glow
03
Tab Transitions
Pill-style tab switching with dark active indicator and smooth color transitions. Matches the pricing section tabs from the Behance reference (Studio / DUB / API).
Pricing Tabs (Dark Active)
Studio plan: Full TTS voice generation suite with customizable voices and real-time preview.
.va-pricing__tab--active → dark bg + white text + shadow
TTS Input Tabs (Light Active)
.va-input-card__tab--active → blue bottom border
Category Pills
.va-category-pill--active → dark bg + white text
04
Form Focus Transitions
Form inputs feature smooth border-color transitions on focus, matching the clean signup form from the Behance reference (behance-12). Click into each field to see the focus ring.
Signup Form (Reference: behance-12)
Input States
.va-form-input:focus → blue border + ring transition (0.2s)
05
Scroll-Reveal Animations
Elements below use .va-reveal with direction variants and stagger delays. They animate in as you scroll into view via IntersectionObserver. Respects prefers-reduced-motion.
Fade Up
.va-reveal--up with 150ms delay
Fade Up
.va-reveal--up with 300ms delay
Fade Up
.va-reveal--up with 450ms delay
Fade Up
.va-reveal--up with 600ms delay
Direction Variants
← Left
.va-reveal--left
→ Right
.va-reveal--right
↓ Down
.va-reveal--down
Scale
.va-reveal--scale
06
Background Patterns & Effects
Decorative background patterns refined from the Behance reference. The halftone pattern uses a 720-circle SVG with graduated opacity for the dramatic dot-sweep effect.
Halftone — Bottom
Halftone — Dense
Halftone — Dark
Dot Grid (CSS)
Dark Grid Overlay
Gradient Subtle
08
Transition Tokens Quick Reference
All timing tokens used across the design system, from SCSS variables to CSS custom properties.
| Token | Value | Usage |
|---|---|---|
$va-transition-base |
all 0.2s ease-in-out | Default for buttons, links, inputs |
$va-transition-fast |
all 0.1s ease-in-out | Micro-interactions, tooltips |
$va-transition-slow |
all 0.4s ease-in-out | Modals, overlays, page transitions |
$va-transition-bounce |
all 0.3s cubic-bezier(0.68,-0.55,0.27,1.55) | Playful bounces, badges |
--va-transition-base |
all 0.2s ease-in-out | CSS custom property (runtime) |
.va-reveal (0.6s) |
opacity + transform 0.6s ease-out | Scroll-triggered entrance animations |