proNew218 lines · framer-motion

Gradient Noise

A gradient with real grit, not a flat vector wash. A full-width section with a drifting multi-colour mesh gradient and a fine animated film-grain layer blended on top, so the colour never looks glassy or vector-smooth, under a short glass-card headline.

Use it for: A section break or secondary hero that wants a premium, slightly analog gradient feel instead of a clean flat vector gradient.
Themes: Light + dark
License: Commercial use

Live

Texture

Colour with a bit of grit in it

A mesh gradient with real film grain, not a flat vector wash.

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-width section with a soft animated mesh-gradient backdrop plus a fine film-grain
 * noise layer on top, so the colour never looks flat or vector-smooth. A glass card
 * holds a short headline.
 */

export interface BgGradientNoiseProps {
  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

→Canvas draws 3 blurred radial-gradient blobs drifting on independent orbits; colours come from --signal/--lime/--info and switch instantly when .dark is toggled.
→A 128x128 grayscale noise tile is generated once on mount and repainted as a translating repeating pattern blended with overlay, giving continuous film grain without per-frame random generation.
→Blend mode is lighter in dark mode and multiply in light mode for the gradient layer so it reads saturated in both themes.
→speed scales gradient drift and grain drift; intensity scales blob size and saturation; grain scales the noise layer's opacity (0 disables it).
→Pauses when the section scrolls offscreen or the tab is hidden; prefers-reduced-motion renders one static frame.

Accessibility

✓Canvas is aria-hidden; only the heading and copy are in the accessibility tree.
✓Headline sits on a translucent blurred card for contrast against the gradient in both themes.
✓Honours prefers-reduced-motion.