# Window Stories

> A compact app window plays a short product story on a loop: content arrives, transforms and settles before it resets.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/window-stories
- Install: `npx shadcn@latest add @geturui-pro/window-stories`
- Dependencies: motion

## Variants

### Brief to plan

Brief lines get highlighted, then plan tasks and timeline bars stack in on the right.

Install: `npx shadcn@latest add @geturui-pro/window-stories-brief-to-plan`

```tsx
import { WindowStoryBriefToPlan } from "@/components/illustrations/window-stories/brief-to-plan";

export function BriefToPlanIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <WindowStoryBriefToPlan className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (seven seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Chat assistant

A question is typed and sent, the assistant types, streams a reply and attaches a card.

Install: `npx shadcn@latest add @geturui-pro/window-stories-chat-assistant`

```tsx
import { WindowStoryChatAssistant } from "@/components/illustrations/window-stories/chat-assistant";

export function ChatAssistantIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <WindowStoryChatAssistant className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (eight seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Analytics

KPI tiles settle in, a trend line draws itself and a crosshair scrubs along it.

Install: `npx shadcn@latest add @geturui-pro/window-stories-analytics`

```tsx
import { WindowStoryAnalytics } from "@/components/illustrations/window-stories/analytics";

export function AnalyticsIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <WindowStoryAnalytics className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (six seconds at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.