proNew308 lines · framer-motion

Hero Aurora Shader

Fractal-noise curtains drifting behind the fold. A launch hero backed by a hand-written WebGL fragment shader: fractal-noise aurora curtains drift vertically and blend between two theme colours behind a centred headline.

Use it for: Product or research launches that want a slow, atmospheric backdrop instead of a hard-edged gradient.
Themes: Light + dark
License: Commercial use

Live

Live · Northern signal

Clarity drifting across the sky

An aurora-shader backdrop that stays calm, colour-true in both themes, and gets out of the way of your copy.

Start free →View pricing

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-bleed hero with a raw WebGL fragment shader aurora: drifting fractal-noise
 * curtains of colour behind a centred headline. Falls back to a soft static
 * gradient when no WebGL context is available.
 */

export interface HeroAuroraShaderProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A WebGL1 context draws a full-screen quad; the fragment shader runs a 4-octave value-noise fbm to build two drifting noise fields that are combined into vertical aurora bands.
→speed scales the drift rate of the curtains; glow scales how strongly the bands brighten over the background.
→palette swaps which two design tokens the curtains blend between (cool: --info/--lime, warm: --signal/--warn, mono: --foreground/--muted-foreground); a third accent (--signal) always tints the noisy edges.
→Colours are read from computed CSS custom properties on mount and re-read on every .dark class toggle via MutationObserver.
→Falls back to a static radial-gradient div if canvas.getContext("webgl") returns null, so the hero never renders blank.
→Render loop pauses off-screen (IntersectionObserver) and when the tab is hidden; prefers-reduced-motion renders a single frame.
→On unmount: cancels the frame, disconnects observers, deletes the GL buffer/program/shaders and calls WEBGL_lose_context so the context is released, important since the library page mounts many previews at once.

Accessibility

✓Canvas and the static fallback are aria-hidden; text and the two CTAs are the only interactive/readable content.
✓A background gradient scrim keeps headline contrast high over the curtains in both themes.
✓Headline is a single <h1>; CTAs keep visible focus rings.
✓Honours prefers-reduced-motion.