Wraps any component and renders it with animated state transitions.
component
The component to demonstrate.
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.
Demo requires a component to wrap and isn't meant to preview itself.