Demo

Demo

Component

Wraps any component and renders it with animated state transitions.

Required Props

1

component

The component to demonstrate.

Optional Props

8

steps

List of animation steps. Leave empty/omitted for a static preview. Each step is a dict with:

`delay`

(int, required)

Milliseconds before the next step.

`cursor`

(dict, optional)

Either `{"top": "50%", "left": "50%"}`, positioned relative to the preview row (not the whole card), or `{"target": "css-selector"}` to center the cursor on a matched element within the stage. When `target` is given, no other keys are allowed. Omit `cursor` entirely to hide the cursor for that step.

`target`

(str, optional)

CSS selector relative to the demo, used for both the highlight pulse and any action.

`action`

(dict, optional)

What to do to `target`. `{"type": "click"}` `{"type": "input", "value": "hello"}` `{"type": "toggle_class", "class_name": "is-active"}` `{"type": "focus"}` `{"type": "scroll_into_view"}` Each supports an optional `delay` (ms before firing, defaults to 400).

title

Heading above the demo.

description

Optional text below the heading.

id

Stable DOM id. Auto-generated if omitted.

Usage

Usage code not available

Live Preview

Demo requires a component to wrap and isn't meant to preview itself.