VoxAura - AI Voice Synthesizer

Overview

Colors

• Background Base: gray-950 (#030712) acts as the primary canvas for text and components.
• Brand Gradients: Indigo (#4f46e5) and Cyan (#06b6d4) are utilized for clipping text, active badge accents, and background plasma motifs.
• Neutral Palette: High-fidelity grayscale range from white (#ffffff) to gray-400 (#9ca3af) for secondary labels and supporting content.
• Semantic Accents: indigo-500 is the primary interaction color, used for backgrounds, borders, and icon tinting at varied opacities (10% to 50%).

Typography

• Font Stack: "Geist" is the exclusive typeface, characterized by its clean, modernist, and legible geometry.
• Display: Extra-large, light-weight headings (tracking-tighter) used for hero impact.
• Headline/Body: High-contrast weight differentiation (300 to 700). Body text utilizes 1rem (base) to 1.125rem (lg) with a relaxed leading for readability.
• Label: Small, uppercase or medium-weight captions (12px-14px) for badges and UI meta-data.

Layout

• Grid Logic: A centralized 88rem max-width container, maintaining generous responsive side padding (16px to 64px) to ensure breathing room on all viewports.
• Rhythm: Vertical flow is driven by progressive section spacing, utilizing semantic grouping that follows an 8px or 16px cadence.
• Sectioning: Main content area is vertically centered to focus user attention, with clear separation between the header, hero block, and footer feature clusters.

Elevation & Depth

• Surface Recipe: Deep, dark, and layered. Surfaces feature high-alpha, dark-mode backgrounds with subtle backdrop blurs (2px to 16px) to simulate depth.
• Border Feel: Single-pixel borders (e.g., white/10 or indigo-500/30) provide structural definition without creating harsh visual breaks.
• Shadows: Low-opacity, soft-shadow drops (e.g., shadow-[-15px_0_30px_-10px_rgba(0,0,0,0.5)]) are used to push UI slices forward into the foreground, reinforcing the glass-pane aesthetic.

Shapes

• Corner Radius: High-radius (fully pill-shaped) implementation for buttons, badges, and icon wrappers.
• Silhouette Discipline: UI components favor soft, rounded geometry to mirror the fluid nature of the AI-generated audio theme.
• Icon Treatment: Iconify "Solar" set, styled with consistent 1.5 stroke-width to maintain a professional, sharp look against rounded UI containers.

Components

• Badges: Semi-transparent, backdrop-blurred pill labels with a thin border.
• Cards (Feature): Minimalist list-group layout utilizing icon-first visual cues, hover-based scaling (+10%), and subdued text-gray secondary labels.
• Buttons: Two-tier hierarchy: primary white (solid fill, dark text) and secondary "glass" (border + translucent backdrop). Both use 300ms transition durations for hover states.
• Nav: Clean text-only links with smooth color-transition states.

Do's and Don'ts

• Do keep the background layers distinct from the content foreground; never place heavy UI elements directly over the high-motion WebGL canvas.
• Do use the branded Geist font family exclusively; avoid mixing disparate sans-serif typefaces.
• Don't use drop shadows that exceed 20% opacity; maintain the "dark-glass" aesthetic rather than traditional material shadow-casting.
• Don't add complex, multi-layered border effects to buttons; keep interactions limited to background opacity and subtle scale/hover triggers.

Motion

• Entrance Stagger: Elements initialize with a 100ms base delay, incrementing by 120ms per item, providing a clean, sequential reveal.
• Transform Logic: All entrance animations utilize a 0.8s cubic-bezier(0.16, 1, 0.3, 1) ease, moving elements from 15px down (Y-axis) to their origin.
• Hover Interaction: Subtle transition-all durations (300ms) for buttons and icons; scaling effects are limited to 110% to preserve UI stability.

WebGL

• Implementation: A THREE.WebGLRenderer context renders a custom ShaderMaterial across a full-screen background canvas.
• Visual Effect: A "plasma" gradient using 2D Simplex Noise, mixing core indigo and cyan colors against a deep base. The animation utilizes u_time within a requestAnimationFrame loop, updated at 0.002 speed for a fluid, continuous flow.
• Geometry: A simple, camera-facing 2x2 plane geometry fills the viewport.
• Responsiveness: The renderer adjusts to window.innerWidth and window.innerHeight with a resize event listener that syncs the u_resolution uniform.
• Performance: The canvas layer is marked with pointer-events-none to ensure no interference with interaction, and alpha: true ensures the background seamlessly integrates with the CSS-defined body color.

ThreeJS

• Scene Architecture: Uses THREE.OrthographicCamera set to an identity coordinate system (-1 to 1) to perfectly map the shader plane to the full screen.
• Renderer: Initialized with antialias: true and alpha: true to ensure the background plasma effect maintains high visual fidelity and transparency.
• Optimization: The scene is minimal, consisting of a single THREE.Mesh utilizing a plane geometry, ensuring high frame rates even during complex fragment shader calculations.