proNew292 lines · framer-motion

Footer Gradient Glow

An ambient glow drifts behind the sitemap. A full-width footer with three large blurred colour blobs drifting slowly behind the wordmark, link columns and bottom legal row — subtle ambience rather than a hero effect, dimmed under the text with a radial scrim so every link stays legible.

Use it for: The closing section of a marketing site or product homepage that wants its footer to feel designed, not bolted on, without competing with the hero's own motion.
Themes: Light + dark
License: Commercial use

Live

tsx

"use client";

import * as React from "react";
import { motion, useAnimationControls, 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 footer with an ambient animated gradient glow confined to its
 * own background: three large blurred colour blobs (--signal/--info/--lime,
 * always read live through Tailwind's CSS-variable classes, so both themes
 * stay correct with zero JS colour sampling) drift slowly behind the logo,
 * link columns and bottom legal row. A scrim dims the glow specifically
 * under the text column so link legibility never competes with the
 * ambience. The drift pauses on an `IntersectionObserver` (offscreen),
 * `visibilitychange` (hidden tab) and `prefers-reduced-motion` (frozen on a

The rest is in Pro.

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

Get Pro

How it behaves

→Three absolutely positioned blurred circles (bg-signal/bg-info/bg-lime, each a Tailwind class resolving to the live --signal/--info/--lime CSS variables) drift along independent keyframed paths via framer-motion AnimationControls; because the colour comes from real CSS classes rather than JS-sampled values, both themes stay correct automatically with zero colour re-reading logic.
→A radial-gradient scrim (var(--background) fading to transparent, centred over the content) sits above the glow and below the text, so the blobs read clearly at the footer's corners while the logo and link columns keep full contrast.
→AnimationControls.stop() halts each blob exactly where it is (no jump) when an IntersectionObserver reports the footer offscreen or a visibilitychange listener reports the tab hidden; both resume the drift from a fresh cycle once visible and focused again.
→prefers-reduced-motion skips controls.start() entirely, so the blobs render as three static soft shapes with no drift.
→glowIntensity scales blob opacity, speed scales how fast they drift, and scrimStrength controls how strongly the centre is dimmed relative to the corners.

Accessibility

✓The glow blobs and radial scrim are a single `aria-hidden` layer; nothing decorative enters the accessibility tree.
✓Legal links sit in a labelled `<nav aria-label="Legal">`; every link and social icon is a real, keyboard-reachable `<a>` with a visible focus ring.
✓Each social icon button carries an `aria-label` naming what it links to; the glyph inside is purely visual.
✓Body and link text use `foreground`/`muted-foreground` against `background`, kept above the glow by the scrim in both themes.
✓Honours prefers-reduced-motion.