Auralis - Neural Audio Engine

Overview

Colors

• Primary Brand Palette: The brand is defined by a warm, sunrise-inspired spectrum.
• Accent: Orange-600 (#ea580c) serves as the primary action and highlight color.
• Neutral/Base: The interface uses a clean white base (#ffffff) with sophisticated gray hierarchies (gray-900 for primary text, gray-600 for body, and gray-500 for captions).
• Gradients: Surfaces utilize linear-gradient fades (rgba(255,255,255,1) to rgba(255,255,255,0.02)) to create depth against the WebGL backdrop.
• Selection: Orange-100 background with Orange-900 text.

Typography

• Typeface: Geist (sans-serif) is the singular font family.
• Display: Extra-large headlines (5xl to 8xl) use light font weights with tight tracking-tighter and leading-[1.05] for a modern, architectural feel.
• Body: Standard text uses 16px-18px base sizes with a relaxed leading to ensure readability in long-form technical content.
• Label: Small caps and uppercase styles (12px-14px) are reserved for UI tags and navigation items, prioritizing clarity and compact utility.

Layout

• Grid: Content is centered within a max-width of 88rem (1408px), utilizing a fluid gutter system (px-6 to px-16) that scales with device breakpoints.
• Section Rhythm: A consistent cadence of 8-16px spacing between modular blocks, with hero sections receiving generous vertical padding (pt-16 pb-24) to maintain breathing room.
• Alignment: The layout follows a left-aligned, vertical stack pattern with clear visual flow from identity to proposition, and finally to dense, supporting feature clusters.

Elevation & Depth

• Surface Recipe: The "Glass Slices" pattern defines depth, using a multi-layered backdrop-blur (ranging from 16px to 2px) to simulate translucent panes of glass.
• Shadows: Use of specific, soft-diffuse shadow tokens (shadow-[-15px_0_30px_-10px_rgba(255,255,255,1)]) creates a directional "light-leaking" effect, separating content from the background.
• Border Feel: Thin, 1px transparent borders (e.g., white/10) provide subtle definition to glass edges without creating harsh outlines.
• Interaction: Component depth is achieved through composite shadows (stacking multiple 0px 1px 1px, 0px 3px 3px inputs) to ensure buttons appear grounded and tactile.

Shapes

• Corner Radius: A consistent "cut-corner" philosophy is applied using CSS clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px).
• Icon Geometry: Icons adhere to a 1.5 stroke-width constraint, matching the precision of the typography.
• Silhouette: All interactive components (buttons, badges, feature containers) share the chamfered-corner geometry, creating a distinct, recognizable system silhouette.

Components

• Cards/Containers: Feature containers use a background color of orange-50 with a subtle border-based glow.
• Buttons: Primary buttons use dark backgrounds with shadow-lifting hover states; secondary buttons use backdrop-blur and border-gradient fills.
• Badges: Small-scale tags use clipped-path geometries and internal padding, designed to sit atop content as metadata identifiers.
• Nav: A minimalist, high-contrast navigation bar relying on typeface weight for focus rather than box-based framing.

Do's and Don'ts

• Do: Use the 8-point geometric clipping system for all UI containers to maintain the "Auralis" brand geometry.
• Do: Maintain a 0.8s transition curve (cubic-bezier 0.16, 1, 0.3, 1) for all entering elements to ensure a premium, slow-reveal feeling.
• Don't: Introduce standard box-model shadows; always use the custom multi-stack shadow configuration for button-hover states.
• Don't: Use heavy, high-contrast borders; keep all edges at white/20 opacity or lower to preserve the glass effect.

Motion

• Entrance: Elements must use staggered transitions with a base delay of 0.1s incremented by 0.08s, effectively building the page from top-to-bottom.
• Reveal: Text elements within headlines must employ a vertical slide (110% to 0%) masking effect, ensuring characters "enter" the frame from below.
• Hover: Interactive components should feature a Y-axis shift (-0.5px) combined with transition-all duration-300 to provide responsive, high-fidelity tactile feedback.
• Easing: All entrance animations must utilize a cubic-bezier(0.16, 1, 0.3, 1) curve for a smooth, deceleration-heavy feeling.

WebGL

• Canvas Placement: The background canvas (webgl-canvas) is fixed, spanning 120vw (mobile) to 70vw (desktop) on the right side of the screen with a z-index of 0.
• Implementation: Uses THREE.WebGLRenderer with alpha enabled for background transparency and an OrthographicCamera covering the full viewport area.
• Shader Logic: A ShaderMaterial utilizing a Simplex noise (snoise) function in the fragment shader creates a fluid, organic color-shifting effect across the screen.
• Palette: The effect dynamically blends colorOrange, colorRose, and colorDeep based on two separate noise samples mixed over time, creating a "Warm" gradient flow.
• Performance: The animateWebGL loop uses requestAnimationFrame and a time uniform (u_time) updated at time * 0.002 to drive the evolution of the noise patterns.
• Interaction: The resizeCanvas function ensures the u_resolution uniform remains synchronized with the window dimensions to prevent texture stretching.