AuraGlass Reduced Motion — AuraGlass by AuraOne

#Respect the User Preference

AuraGlass interfaces can use blur, refraction, hover depth, animated counters, media visualizers, and canvas effects. Those details are part of the Liquid Glass identity, but they must yield when the user asks for reduced motion. Treat `prefers-reduced-motion: reduce` as a product requirement, not a decorative preference.

Reduced motion does not mean the interface becomes lifeless or unclear. It means large parallax, continuous loops, springy overshoot, background particle movement, animated camera motion, and auto-playing visualizers should be removed or replaced with static states. Essential feedback such as focus, pressed, selected, expanded, loading, and error states should remain visible through color, border, opacity, copy, or layout.

css

@media (prefers-reduced-motion: reduce) {
  .product-shell * {
    animation-duration: 1ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 1ms;
  }
}

#Use Motion for Meaning

Before adding animation, decide what product meaning it carries. A drawer transition can help users understand where navigation lives. A command palette fade can soften a modal entry. A realtime cursor can show collaboration presence. Decorative background shimmer, idle particle loops, and aggressive tilt should be easy to disable because they rarely carry essential meaning.

For reduced motion, keep the final state immediate and stable. A menu should open in place. A chart should show the data without counting through every value. A carousel should switch slides without sweeping across the viewport. A music visualizer should show a static waveform, album art, or a paused bars state rather than continuing to pulse.

#Component Families

Core controls such as `GlassButton`, `GlassCard`, `GlassTabs`, and `GlassPopover` should rely on short transitions and visible state changes. Data components such as `GlassDataGrid`, `GlassDataTable`, `GlassDataChart`, and `GlassHeatmap` should not hide information behind entrance animations. Media and spatial components such as `LiquidGlassMediaControls`, `GlassMusicVisualizer`, and `LiquidGlassMaterial` need explicit static fallbacks.

If a component starts an interval, audio analyzer, requestAnimationFrame loop, WebGL scene, or sensor listener, pause it when reduced motion is active, when the component is offscreen, and when the tab is hidden. This is both an accessibility requirement and a performance requirement for laptops and mobile devices.

Core surfaces

Short transitions, no required motion to read state

Overlays

Open immediately or with a minimal opacity change

Data

Render final values directly under reduced motion

Media and 3D

Pause loops and provide static fallbacks

#Testing Reduced Motion

Test the preference at the browser and operating-system level. Verify that the page still communicates hierarchy, current state, loading, success, failure, and keyboard focus. Reduced-motion QA should include desktop and mobile viewports because small screens amplify motion and make parallax or slide transitions more disruptive.

For launch docs and recipes, include motion notes near any component that depends on animation. AI coding agents should not add background loops, tilt effects, or animated visualizers to simple cards by default. Start with static Liquid Glass surfaces, then add motion only where the product workflow benefits from it.