AnimateLighting

A light travelling around the outside of something. The glow is behind the content rather than on it, so it marks whatever it wraps without altering a single thing about how that is drawn.

import { AnimateLighting } from 'neba';

<AnimateLighting size="md">
  <Card title="Analysing 4,281 rows">This usually takes about a minute.</Card>
</AnimateLighting>;

Props

Prop	Type	Default	Description
glow	string	—	A CSS colour, when a semantic family is not what is wanted. Overrides color
spread	number	3	How far past the content the light reaches, in pixels
arc	number	50	How much of the outline is lit at once, in degrees. Small is a travelling spark; large is a sweep
blur	number	4	How soft the light is, in pixels. At 0 it reads as a graphic rather than as light
reverse	boolean	false	Runs the light the other way round
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The radius the light follows. It has to match what is inside
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Which family the light is drawn in
durationshared	number	3000	How long one run takes, in milliseconds
delayshared	number	0	How long before it starts, in milliseconds
easing	string	—	The easing curve, as CSS writes it. Defaults to the house curve
repeatshared	number | 'infinite'	'infinite'	How many times it runs
alternateshared	boolean	false	Runs every other pass backwards, so a repeat returns instead of jumping
triggershared	'mount' | 'visible' | 'hover' | 'manual'	'mount'	What starts it. visible is on scrolling into view, hover is under the pointer (focus counts), manual is whatever play says
play	boolean	—	Runs it when trigger is manual. Each false → true starts it over
onceshared	boolean	true	With trigger="visible", whether it runs only the first time. Off, it runs again on every return
thresholdshared	number	0.2	With trigger="visible", how much of the element has to be on screen, from 0 to 1
pausedshared	boolean	false	Holds the animation where it is
render	useRender.RenderProp	—	Renders something other than a div (render={<section />}). Base UI's own escape hatch
children	ReactNode	—	What the light travels around

Every other <div> attribute passes through to the root. The settings shared by every Animate* are defined in prop conventions.

size has to agree with the radius of what is inside. The glow follows the wrapper's own corners, so a lg card in an xs Lighting will show light poking out of four corners the card has already rounded away.

Examples

color and glow

color is one of the six semantic families. glow takes a CSS colour instead, for a light that is decoration rather than a status.

import { AnimateLighting, Box, Typography } from 'neba';

const FAMILIES = ['primary', 'success', 'warning', 'danger'] as const;

export default function AnimateLightingColors() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      {FAMILIES.map((color) => (
        <AnimateLighting key={color} color={color} size="md">
          <Box size="md">
            <Typography level="caption">{color}</Typography>
          </Box>
        </AnimateLighting>
      ))}
    </div>
  );
}

arc, spread and blur

arc is how much of the outline is lit at once, in degrees: small is a travelling spark, large is a sweep. spread is how far past the content the light reaches and blur is how soft it is: at 0 it reads as a graphic rather than as light.

import { AnimateLighting, Box, Typography } from 'neba';

const SHAPES = [
  { label: 'spark', arc: 20, spread: 3, blur: 3, duration: 1800 },
  { label: 'sweep', arc: 120, spread: 4, blur: 8, duration: 3200 },
  { label: 'halo', arc: 170, spread: 8, blur: 14, duration: 5000 }
];

export default function AnimateLightingShape() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-5">
      {SHAPES.map((shape) => (
        <AnimateLighting
          key={shape.label}
          arc={shape.arc}
          spread={shape.spread}
          blur={shape.blur}
          duration={shape.duration}
          size="md"
        >
          <Box size="md">
            <Typography level="caption">{shape.label}</Typography>
          </Box>
        </AnimateLighting>
      ))}
    </div>
  );
}

trigger="hover"

An infinite effect on hover runs while the pointer is on it and stops when it leaves. Keyboard focus counts as a pointer, so the effect is reachable without a mouse.

import { AnimateLighting, Button } from 'neba';

/* An infinite effect on `hover` stops when the pointer leaves; keyboard focus
   counts as a pointer, so it is reachable without a mouse. */
export default function AnimateLightingHover() {
  return (
    <AnimateLighting trigger="hover" size="md" glow="#d946ef" arc={70} duration={1600}>
      <Button size="lg">Upgrade the plan</Button>
    </AnimateLighting>
  );
}

Accessibility

• Under a reduced-motion preference the arc stops travelling and becomes an even glow. The decoration survives; the motion does not.
• Because of that, the light is never the only thing saying what is happening. Use it alongside a word ("Analysing", "Live"), rather than instead of one.
• The wrapper adds no role and no name.