[ @sdxc/ui/animations ]
pulse
Gentle opacity breathe for a skeleton placeholder, resolved entirely to @keyframes so it runs from server-rendered markup.
import { pulse } from "@sdxc/ui/animations";Usage
Gentle opacity breathe for a skeleton placeholder, resolved entirely to
@keyframes so it runs from server-rendered markup. Reduced motion narrows
the swing by overriding duration and the min-opacity token alone.
Signature
pulse<Node extends Element = Element>(options?: Pulse.Options): Mixin<Node>Returns a @sdxc/u mixin ready for a skeleton placeholder's host element.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | Pulse.Options | Timing, opacity range, and gating for the loop. |
Examples
<Skeleton mix={[pulse()]} aria-hidden="true" />Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
Pulse.Options
Tuning for a pulse loop: timing, opacity range, and the platform state it runs under.
| Member | Type | Description |
|---|---|---|
duration? | string | Length of one breathe cycle, as a CSS time. Defaults to DEFAULT_PULSE_DURATION. |
easing? | string | CSS easing function driving the breathe. Defaults to DEFAULT_PULSE_EASING. |
minOpacity? | number | Dimmest point of the breathe, from 0 to 1. Defaults to DEFAULT_PULSE_MIN_OPACITY. |
maxOpacity? | number | Brightest point of the breathe, from 0 to 1. Defaults to DEFAULT_PULSE_MAX_OPACITY. |
when? | string | Selector fragment, relative to the host (e.g. [aria-busy="true"]), that gates the loop. Left unset, the loop runs as soon as it is mixed in, matching a skeleton mounted only while its content loads. |