Voice Aura — Backgrounds & Animations Reference

SVG Pattern Overlays

Positioned pseudo-element overlays using external SVG assets. Add to any container element.

Halftone Dots

SVG::before

Radial dot-field gradient. Hero/feature backgrounds.

<div class="va-pattern-halftone">…</div> Variants: va-pattern-halftone--bottom va-pattern-halftone--center va-pattern-halftone--left va-pattern-halftone--right va-pattern-halftone--light

Halftone — Center

SVG::before

Radially centered halftone concentration.

va-pattern-halftone va-pattern-halftone--center

Sound Wave Waveform

SVG::after

Full-width audio amplitude bar visualization.

Noise / Grain Texture

SVG::aftertileable

Subtle film-grain overlay (feTurbulence). 200×200 tileable.

Circuit Lines

SVG::before

Tech paths with blue node dots. AI/developer sections.

<div class="va-pattern-circuit">…</div> Variants: va-pattern-circuit--light va-pattern-circuit--right

Concentric Rings

SVG::before

Radiating ripple circles. Voice/audio sections.

<div class="va-pattern-rings">…</div> Variants: va-pattern-rings--left va-pattern-rings--right va-pattern-rings--small

Grid Lines

SVGtileable

48px perpendicular grid with radial fade mask.

<div class="va-bg-grid-lines">…</div> Variants: va-bg-grid-lines--dense va-bg-grid-lines--full

Diagonal Lines

SVG::beforetileable

40px diagonal hatching texture.

<div class="va-pattern-diagonal">…</div> Variant: va-pattern-diagonal--dense

Mesh Gradient

SVG

Multi-stop radial gradient blobs. Ambient feel.

<div class="va-bg-mesh">…</div> Variant: va-bg-mesh--dark

Background Presets

Reusable token packs for common template sections. Combine with explicit pattern classes.

Preset — Hero

class="va-bg-preset-hero va-pattern-halftone va-pattern-halftone--bottom va-pattern-waveform-bg va-bg-glow"

Preset — Feature API

class="va-bg-preset-feature-api va-pattern-circuit va-pattern-circuit--light va-bg-glow"

Preset — Feature Dubbing

class="va-bg-preset-feature-dubbing va-pattern-noise va-pattern-rings va-pattern-rings--small"

Preset — Pricing

class="va-bg-preset-pricing va-bg-mesh va-bg-glow va-bg-glow--neutral va-pattern-halftone va-pattern-halftone--bottom"

Background Utilities

Solid, gradient, and dot backgrounds for section-level use.

va-bg-white

White

CSS

class="va-bg-white"

va-bg-alt

Alt (Light Grey)

CSS

class="va-bg-alt"

va-bg-dark

Dark (Near-Black)

CSS

class="va-bg-dark"

va-bg-gradient-subtle

Gradient Subtle

CSS

class="va-bg-gradient-subtle"

va-bg-gradient-primary

Gradient Primary (Blue)

CSS

class="va-bg-gradient-primary"

va-bg-gradient-dark

Gradient Dark

CSS

class="va-bg-gradient-dark"

Dot Grid

CSStileable

CSS radial-gradient dots with radial fade mask.

class="va-bg-dots" Variants: va-bg-dots--tight (16px) va-bg-dots--loose (32px) va-bg-dots--full (no fade mask)

Glass & Glow Effects

Frosted-glass panels and radial gradient glow accents.

Glass Panel

Glass (Default)

CSS

backdrop-filter: blur. Semi-transparent white border.

class="va-glass" Variants: va-glass--strong va-glass--dark

Radial Glow (Blue)

CSS::before

class="va-bg-glow va-bg-glow--blue" Variants: va-bg-glow--neutral va-bg-glow--top-right va-bg-glow--bottom-left

Decorative Elements

Separators, crosshairs, accent lines, and visual markers.

Section Separator

class="va-section-separator" class="va-section-separator va-section-separator--double"

Crosshair Markers

Corner "+" decorations for cards and sections.

Accent Lines

Blue decorative bars (vertical & horizontal).

class="va-accent-line" class="va-accent-line va-accent-line--horizontal" class="va-accent-line va-accent-line--long"

Background Composition Helpers

Layer multiple patterns on a single container using .va-bg-layer.

Layer — Circuit

class="va-bg-layer va-bg-layer--circuit"

Layer — Rings

class="va-bg-layer va-bg-layer--rings"

Layer — Grid

class="va-bg-layer va-bg-layer--grid"

Layer — Diagonal

class="va-bg-layer va-bg-layer--diagonal"

Layer — Mesh

class="va-bg-layer va-bg-layer--mesh"

Combining layers:

Stack multiple modifiers on a single element:

Inline Data-URI Variants

Self-contained patterns with no external file dependency. Add --inline modifier.

Noise — Inline

class="va-pattern-noise va-pattern-noise--inline"

Circuit — Inline

class="va-pattern-circuit va-pattern-circuit--inline"

Grid Lines — Inline

class="va-bg-grid-lines va-bg-grid-lines--inline"

Mesh — Inline

class="va-bg-mesh va-bg-mesh--inline"

SCSS variable usage:

// Import the partial @import "components/pattern-data"; // Use directly in custom styles .my-section::before { background-image: $va-data-circuit-lines; } // Available variables: // $va-data-grid-lines // $va-data-diagonal-lines // $va-data-noise // $va-data-concentric-rings // $va-data-circuit-lines // $va-data-mesh-gradient

Entrance Animations

Immediate entrance effects. Applied on load; no JS required.

Fade Up

class="va-animate-fade-up" Modifiers: va-animate-fade-up--delay-1 (0.1s) va-animate-fade-up--delay-2 (0.2s) va-animate-fade-up--fast (0.25s) va-animate-fade-up--slow (0.8s)

Fade In

class="va-animate-fade-in"

Fade Left

class="va-animate-fade-left"

Fade Right

class="va-animate-fade-right"

Scale In

class="va-animate-scale-in"

Float (Looping)

class="va-animate-float" (3s infinite)

Pulse (Looping)

class="va-animate-pulse" (2s infinite)

Spin (Looping)

class="va-animate-spin" (1s linear infinite)

Scroll-Triggered Animations

Elements start hidden and animate in when they enter the viewport. Requires va-scroll.js (IntersectionObserver) to add .is-visible.

Setup:

<script src="js/va-scroll.js"></script>  <script> VaScroll.init({ threshold: 0.2, once: true }); </script>

va-scroll-fade-up — translateY(32px) to 0

va-scroll-fade-in — opacity 0 to 1

va-scroll-scale-in — scale(0.92) to 1

va-scroll-fade-left

va-scroll-fade-right

Stagger groups:

<div class="va-scroll-stagger"> <div>Child 1 (delay 0s)</div> <div>Child 2 (delay 0.1s)</div> <div>Child 3 (delay 0.2s)</div> </div>  <div class="va-scroll-fade-up" data-va-scroll-threshold="0.3" data-va-scroll-delay="200" data-va-scroll-once="false"> </div>

Hover & Interaction Effects

Apply to interactive elements. Touch-aware variants available.

Hover Lift

translateY(-4px) + shadow on hover.

class="va-hover-lift" class="va-touch-lift" (touch-aware)

Hover Scale

scale(1.03) on hover.

class="va-hover-scale" class="va-touch-scale" (touch-aware)

Hover Glow

Blue box-shadow glow on hover.

class="va-hover-glow"

Responsive Layout Transitions

Smooth CSS transitions when crossing breakpoints. Add to containers that change layout at different screen sizes.

Grid Smooth — columns transition at breakpoints

1

2

3

4

Layout Transition Classes

class="va-grid-smooth" grid-template-columns, gap (0.35s) class="va-flex-smooth" flex-direction, gap, align-items (0.35s) class="va-width-smooth" width, max-width, padding (0.35s) class="va-padding-smooth" padding (0.35s) class="va-type-smooth" font-size, line-height, letter-spacing (0.25s) class="va-container-smooth" max-width, padding (0.35s/0.4s)

Component-Level Responsive Transitions

class="va-hero-adapt" Hero padding, title font-size, subtitle, actions class="va-nav-morph" Navbar height, padding, background-color, box-shadow class="va-section-morph" Background pattern opacity/size transitions class="va-card-reflow" Grid column span changes (0.3s–0.4s)

Mobile/Desktop Morph Helpers

class="va-responsive-layout-morph" grid-template/gap/padding transitions class="va-responsive-stack-morph" flex-direction/gap/align-items transitions class="va-responsive-panel-morph" panel max-width/width/radius/shadow transitions class="va-responsive-visibility-morph" opacity/transform transitions class="va-mobile-desktop-morph" applies coordinated morphing to nav/hero/grids

Responsive Visibility

class="va-show-md" Hidden on mobile, fades in at 768px+ class="va-show-lg" Hidden on mobile, fades in at 992px+ class="va-hide-md" Visible on mobile, hidden at 768px+

Responsive Direction Animations

Animate from the side on desktop, from below on mobile.

class="va-responsive-fade-left" Desktop: translateX(-32px) → 0 Mobile: translateY(24px) → 0 class="va-responsive-fade-right" Desktop: translateX(32px) → 0 Mobile: translateY(24px) → 0 class="va-scroll-stagger" Desktop delays: 0s, 0.1s, 0.2s, 0.3s, 0.4s, 0.5s Mobile delays: 0s, 0.08s, 0.16s, 0.24s

Accessibility:

All animations respect prefers-reduced-motion: reduce. When the user has motion reduced, animation and transition durations are set to 0.01ms and scroll-triggered elements are made immediately visible.

Audio Waveform Bars

Animated equalizer-style bars for audio/voice UI indicators.

Waveform Bars (Animated)

Waveform Bars (Static)

class="va-waveform-bars va-waveform-bars--static"

Usage Guide

How to apply backgrounds and animations to your templates.

1. Hero Section Recipe

Full hero with halftone dots, waveform bar, and scroll-triggered content.

<section class="va-hero va-bg-preset-hero va-pattern-halftone va-pattern-halftone--bottom va-pattern-waveform-bg va-bg-glow va-mobile-desktop-morph"> <div class="container va-hero-adapt"> <h1 class="va-scroll-fade-up">Headline</h1> <p class="va-scroll-fade-up" data-va-scroll-delay="100">Subtext</p> </div> </section>

2. Feature Section with Circuit Pattern

<section class="va-section va-bg-alt va-pattern-circuit va-pattern-noise"> <div class="container"> <div class="row va-grid-smooth"> <div class="col-lg-6 va-responsive-fade-left">Text</div> <div class="col-lg-6 va-responsive-fade-right">Image</div> </div> </div> </section>

3. Blog Card Grid with Stagger

4. Dark Section with Rings

5. Inline Data-URI (no asset files needed)

<div class="va-pattern-circuit va-pattern-circuit--inline">…</div>  .my-widget { background-image: $va-data-circuit-lines; background-size: 100% auto; background-repeat: no-repeat; }

CSS Custom Properties API

Override pattern behaviour at runtime without touching SCSS. Set these on the element or any ancestor.

--va-pattern-opacity

CSS

Controls pattern overlay opacity. Works on all .va-pattern-* and .va-bg-* patterns.

<section class="va-pattern-halftone" style="--va-pattern-opacity: 0.3;"> ... </section> Default: varies per pattern (1, 0.5, etc.)

--va-glow-size / --va-glow-color

CSS

Controls glow circle diameter and gradient. Works on .va-bg-glow.

<div class="va-bg-glow" style="--va-glow-size: 800px; --va-glow-color: radial-gradient(circle, rgba(4,120,255,.1) 0%, transparent 70%);"> Default size: 600px desktop, 400px mobile

--va-mask-size / --va-mask-center

CSS

Controls radial fade-out mask shape and origin. Works on .va-bg-dots and .va-bg-grid-lines.

<section class="va-bg-dots" style="--va-mask-size: 90% 80%; --va-mask-center: 30% 50%;"> Default: 70% 60% at 50% 50%

--va-ring-size

CSS

Controls the diameter of concentric rings. Works on .va-pattern-rings.

<section class="va-pattern-rings" style="--va-ring-size: 800px;"> Default: 600px desktop, 360px mobile

--va-dot-spacing

CSS

Controls dot grid spacing. Works on .va-bg-dots.

<section class="va-bg-dots" style="--va-dot-spacing: 12px;"> Default: 24px (3 grid units)

All Custom Properties

--va-pattern-opacity All patterns Default varies --va-glow-size .va-bg-glow 600px / 400px --va-glow-color .va-bg-glow radial-gradient(...) --va-ring-size .va-pattern-rings 600px / 360px --va-dot-spacing .va-bg-dots 24px --va-mask-size .va-bg-dots, 70% 60% .va-bg-grid-lines --va-mask-center .va-bg-dots, 50% 50% .va-bg-grid-lines

Animation Presets

Pre-built entrance combos with tuned timing for common page sections. Drop-in replacements for composing .va-animate-* + delays manually.

Hero Headline

Slow dramatic fade-up. 0.7s, custom ease.

class="va-entrance-hero"

Hero Subtitle

Delayed fade-up. 0.6s + 0.15s delay.

class="va-entrance-hero-sub"

Hero CTA

Delayed scale-in for buttons. 0.5s + 0.3s delay.

class="va-entrance-hero-cta"

Feature Text

Slides from left on desktop, up on mobile. Scroll-triggered.

class="va-entrance-feature" (add .is-visible via JS)

Feature Visual

Enters from opposite side with slight delay. Scroll-triggered.

class="va-entrance-feature-visual" (add .is-visible via JS)

Card Entrance

Quick fade-up for grid items. Use inside .va-stagger-group.

class="va-entrance-card" (add .is-visible via JS)

NEW

Badge Pop

Bouncy scale-in for badges and tags. 0.3s.

class="va-entrance-badge"

Hero Section Recipe

<section class="va-hero va-pattern-halftone va-pattern-waveform-bg"> <span class="va-entrance-badge">NEW FEATURE</span> <h1 class="va-entrance-hero">Headline</h1> <p class="va-entrance-hero-sub">Subtext</p> <div class="va-entrance-hero-cta"> <button>Primary</button> <button>Secondary</button> </div> </section>

Loading Skeleton

Shimmer placeholders for async-loaded content. Replaces empty space with animated loading indicators.

Default

Generic rectangular shimmer placeholder.

Circle

Avatar / icon placeholder.

class="va-skeleton va-skeleton--circle"

Text Lines

Paragraph placeholder. Last child auto-shrinks to 60%.

Card

Full card placeholder (200px tall).

class="va-skeleton va-skeleton--card"

Image

Image placeholder (160px tall).

class="va-skeleton va-skeleton--image"

Composed Card Skeleton

Combine variants to build realistic loading states.

SVG Asset Inventory

All SVG files in assets/patterns/.

File	Dimensions	Tileable	Colors	CSS Class
halftone-dots.svg	200 x 200	Yes	#1A1919	.va-bg-dots
halftone-wide.svg	1200 x 400	No	#1A1919	.va-pattern-halftone
sound-wave-wide.svg	1440 x 120	No	#1A1919	.va-pattern-waveform
sound-wave-hero.svg	1440 x 200	No	#1A1919	(hero-specific)
noise-texture.svg	200 x 200	Yes	Greyscale	.va-pattern-noise
circuit-lines.svg	800 x 400	No	#1A1919, #0478FF	.va-pattern-circuit
concentric-rings.svg	600 x 600	No	#1A1919, #0478FF	.va-pattern-rings
grid-lines.svg	48 x 48	Yes	#1A1919	.va-bg-grid-lines
diagonal-lines.svg	40 x 40	Yes	#1A1919	.va-pattern-diagonal
mesh-gradient.svg	800 x 600	No	#0478FF, #1A1919	.va-bg-mesh
grid-dots.svg	24 x 24	Yes	#1A1919	.va-bg-dots
crosshair.svg	24 x 24	No	#1A1919	.va-crosshairs
wave-divider.svg	1440 x 80	No	#F5F5F5	(section divider)
gradient-radial-soft.svg	600 x 600	No	#0478FF	.va-bg-glow