pulseGlow

Fades in from transparent and scales up from just under rest while a drop-shadow halo swells, falls away and swells back, settling lit rather than dark. The halo is drawn in currentColor, so it takes the colour the element already has and needs no palette from this engine. The pulse repeats a fixed number of times instead of looping, because the halo is a filter and a reduced-motion preference does not cut filters short. Hovering swells the element past full size on its own press-length transition.

⚡pulseGlow

pulseGlow in Motion

Spread Preset·Zero Runtime Tax

Usage

import { Section } from "@/lib/motion";
import { pulseGlow } from "@/lib/motion/presets/pulse-glow";

export function Features() {
  return (
    <Section {...pulseGlow} className="grid gap-6 md:grid-cols-3">
      <FeatureCard title="Copy, do not install" />
      <FeatureCard title="One file you own" />
      <FeatureCard title="Presets you spread" />
    </Section>
  );
}

Installation

npx shadcn@latest add https://motion.asmitsah.dev/r/pulse-glow.json

Props and tokens

What it sets

Property	Initial	In view	Reduced motion	Reads from config.ts
opacity	0	1	Animates	fade.from → fade.to
scale	0.9	1	Instant	zoom.in → rest.scale
filter	drop-shadow(0 0 0px currentColor)	drop-shadow(0 0 24px currentColor)	Animates	glow.from → glow.to

Transition and viewport

Option	Value	Reads from config.ts
duration	0.85	duration.base
ease	[0.16,1,0.3,1]	ease
filter	{"duration":1.1,"ease":[0.16,1,0.3,1],"repeat":2,"repeatType":"mirror"}	duration.pulse, ease, pulseRepeat
viewport.once	true	viewport
viewport.amount	"some"	viewport
viewport.margin	"0px 0px -20% 0px"	viewport

Every motion prop the preset does not set — whileHover, whileTap, whileFocus — stays available at the call site. Write it after the spread and it wins.

layout and drag need the domMax feature bundle, not domAnimation — swap the lazy import in provider.tsx. It adds roughly 13kb gzipped on top of domAnimation.