proNew126 lines · framer-motion

Hero Spotlight Cursor

A pattern that only lights up where you look. A dark, inverted hero with a dim dot-grid backdrop and a brighter coloured copy of the same grid revealed only inside a soft spotlight that follows the pointer, using a CSS mask — no canvas.

Use it for: Moody, dark product pages that want a tactile 'discover the pattern' first-screen interaction.
Themes: Light + dark
License: Commercial use

Live

Reveal · Hover to explore

Follow the light to the feature

A spotlight hero where moving the pointer brightens the pattern underneath — built for dark, moody product pages.

Get started →See the docs

tsx

"use client";

import * as React from "react";
import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring } 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;
}

/**
 * Hero with a dim dot-grid backdrop and a brighter, coloured copy of the same
 * grid revealed only inside a soft spotlight that follows the pointer. The
 * spotlight is a CSS mask driven by framer-motion values — no canvas — and
 * it stays entirely inside this section.
 */

export interface HeroSpotlightCursorProps {
  eyebrow?: string;

The rest is in Pro.

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

Get Pro

How it behaves

→Two dot-grid layers are stacked: a dim always-visible one and a brighter, coloured one clipped by a CSS mask-image radial-gradient whose centre tracks the pointer via spring-smoothed framer-motion values and useMotionTemplate.
→size sets the spotlight radius in px; color swaps the bright layer's tint (signal/info/lime); intensity scales its opacity.
→The spotlight is purely a background mask on a decorative layer behind the text — headline and body copy keep full, constant contrast regardless of pointer position, and the effect never leaves this section or hides the real OS cursor.
→prefers-reduced-motion removes the mask entirely, showing the bright grid layer at a fixed opacity instead of following the pointer.

Accessibility

✓Both grid layers are aria-hidden; only the eyebrow, heading, copy and two real <a> CTAs are exposed to assistive tech.
✓Text stays at a fixed, high-contrast colour at all times — the spotlight affects only the decorative grid, never the copy's legibility.
✓Headline is a single <h1>; CTAs keep a visible focus ring matching this section's inverted palette.
✓Honours prefers-reduced-motion.