proNew101 lines · framer-motion

Card Border Beam

A beam of light that never stops tracing the edge. Cards with a thin conic-gradient beam that continuously travels around their 1px border, built with the same masked-ring technique as the spotlight cards but running on a timer instead of the cursor.

Use it for: Status or monitoring cards where you want a passive sense of 'this is alive' — observability dashboards, uptime panels, a pricing card you want to draw the eye to.
Themes: Light + dark
License: Commercial use

Live

Observability

Cards with a pulse you can see

Live trace

Watch a beam of activity trace the edge of every running card.

Alwaysrunning

Queue depth

A thin ring of light tells you a card is active before the number does.

Zeropollers

Health check

The beam keeps moving as long as the card is wired up correctly.

Instantsignal

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;
}

export interface BorderBeamCardItem {
  title: string;
  description: string;
  stat?: string;
  statLabel?: string;
}

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

→A rotating conic-gradient layer sits behind each card, masked by the inner content card so only a 1px ring of it is visible, giving the appearance of a beam travelling the border.
→Rotation pauses automatically once a card scrolls out of view (IntersectionObserver via useInView) so offscreen cards don't keep animating.
→beamColor and duration control the beam's colour and how many seconds one full loop takes.
→Under prefers-reduced-motion the beam is replaced with a static inset ring in the same colour, so the card still reads as 'active'.

Accessibility

✓The beam layer is `aria-hidden`; it carries no information a screen reader needs.
✓Stat values use real text nodes with a visible label underneath, not colour alone, to convey meaning.
✓Honours prefers-reduced-motion.