Animated Surfaces

Three premium animated surfaces — impossible to achieve in Tailwind without custom CSS. All GPU-accelerated, prefers-reduced-motion safe, and fully token-customisable.

surface="aurora"

Shifting aurora borealis light — radial gradients animated via transform. Fully GPU-accelerated.

Aurora surface

Shifting coloured light fields. Purely GPU-accelerated CSS animation. 

<div surface="aurora" density="spacious" radius="xl">
  <h2 text="heading">Aurora surface</h2>
  <p>Animated radial light fields. Change colours with --aura-aurora-1 … 4.</p>
</div>

surface="mesh"

Animated CSS mesh gradient — radial colour blobs drift continuously.

Default mesh

Purple/blue/cyan blend — drifts over 14s

Custom palette

Override --aura-mesh-1 … 5 for any colour scheme

<div surface="mesh" density="spacious" radius="xl">
  Mesh gradient surface
</div>

<!-- Custom mesh colours -->
<div surface="mesh" density="spacious" radius="xl"
     style="--aura-mesh-1: rgba(239,68,68,0.75);
            --aura-mesh-2: rgba(245,158,11,0.60);
            --aura-mesh-3: rgba(34,197,94,0.60);">
  Custom mesh palette
</div>

surface="noise"

Glass surface with an SVG grain/noise texture overlaid. Adds tactile depth to any card.

Subtle grain

Default noise-opacity: 0.055

Heavy grain

--aura-noise-opacity: 0.13

<div surface="noise" density="spacious" radius="xl">
  Glass + grain texture overlay
</div>

<!-- Adjust grain intensity -->
<div surface="noise" density="spacious" radius="xl"
     style="--aura-noise-opacity: 0.12;">
  Higher grain intensity
</div>

Custom tokens

/* Aurora */
--aura-aurora-bg:    #07070f;           /* base background     */
--aura-aurora-speed: 9s;               /* animation duration  */
--aura-aurora-1: rgba(124,106,247,0.4); /* top-left blob       */
--aura-aurora-2: rgba(168, 85,247,0.3); /* top-right blob      */
--aura-aurora-3: rgba( 59,130,246,0.25);/* bottom-right blob   */
--aura-aurora-4: rgba(  6,182,212,0.2); /* bottom-left blob    */

/* Mesh */
--aura-mesh-base:  #0d0d1a;
--aura-mesh-speed: 14s;
--aura-mesh-1: rgba(124,106,247,0.75); /* ... up to mesh-5 */

/* Noise */
--aura-noise-opacity: 0.055;           /* grain intensity 0–0.2 */