proNew106 lines · framer-motion

Light Beams

Light that sweeps through the page, not a static glow. A full-width section with soft diagonal gradient beams sweeping across it at staggered speeds, under a short glass-card headline. Built from animated gradient layers, no canvas required.

Use it for: A calm, premium section break between hero and feature content that still has real motion on the first screen.
Themes: Light + dark
License: Commercial use

Live

Motion

Light that moves through the page

Soft diagonal beams sweeping a quiet backdrop.

tsx

"use client";

import * as React from "react";
import { motion, useInView, 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 soft diagonal light beams sweeping across it, built from
 * plain gradient divs animated with framer-motion (no canvas needed, themes follow
 * CSS variables automatically). A glass card holds a short headline on top.
 */

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

→Each beam is a thin blurred gradient bar rotated diagonally and translated left-to-right on an infinite loop, with its own speed and delay so beams never line up.
→Beams cycle through the signal/info/lime/ok tokens via Tailwind theme classes, so colour follows the active theme automatically with no JS colour reading.
→count sets how many beams render, thickness sets beam height, speed scales every beam's travel duration.
→Motion runs only while the section is in view (framer-motion useInView) and prefers-reduced-motion freezes every beam at a resting position instead of looping.

Accessibility

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