Element: #382 Animated gradient field (motion/hero-ambient) What it shows: A KPI card on a gradient field whose hue and angle drift slowly through registered CSS custom properties; the pointer takes over and paints it. When to use: Hero backgrounds, dashboard headers and cards that need ambient color without video, canvas or a JavaScript loop. Spec: - `@property --hue` is a `` and `@property --angle` is an ``, so CSS can interpolate them - `animation: field-drift 9s ease-in-out infinite alternate` runs only while `m.playing && !driven` - Keyframes: `from { --hue: 0; --angle: 135deg; }` to `to { --hue: 90; --angle: 315deg; }` - Takeover: `hue` follows the pointer x (0 to 90) and `angle` follows y (0 to 360), written as `--hue` and `--angle` - Reduced motion: `m.playing` is false, so nothing animates and the field stays at `135deg` Motion: - --hue, --angle (registered custom properties): 9s ease-in-out Names: Animated gradient field | Gradient mesh | Aurora background | Shifting gradient | Campo de gradiente animado | Gradiente animado | Fundo aurora | Degradado animado Tags: motion, gradient, ambient, background, hue, property Needs: @codeatlasdev/ui@4.6.0 Components: MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/hero-ambient#animated-gradient-field {#snippet children(m)} {/snippet}