# pulse

> Gentle opacity breathe for a skeleton placeholder, resolved entirely to `@keyframes` so it runs from server-rendered markup.

```ts
import { pulse } from "@sdxc/ui/animations";
```

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

```ts
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

```tsx
<Skeleton mix={[pulse()]} aria-hidden="true" />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/animations` too.

### Pulse.Options

Tuning for a pulse loop: timing, opacity range, and the platform state
it runs under.

#### Members

| 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. |