Use case · Storybook demos
Component-level demos straight from Storybook
Point CaptureBeam at a Storybook URL. Author a tiny YAML that hovers, focuses, and clicks. Get a polished motion clip per component. Re-render every time the design system bumps a token.
Who this is for
Design systems, frontend platform
Your design system has a Storybook with thousands of stories. The marketing site shows static screenshots that go stale every quarter. The design system team has a website with no live examples. Bridging Storybook and marketing is no one's job — until the bridge is a YAML.
The problem
Your Storybook has a story for every component variant. None of them tell a customer story. The marketing site shows static screenshots that go stale every quarter.
The fit
What CaptureBeam does for you
- Point a CaptureBeam YAML at a Storybook URL with the story args in query params
- Hover, focus, and click steps drive the component through its states
- Renders short looping clips ideal for design-system landing pages
- Re-render every time the design system bumps a token — automatically
# demos/storybook/Button-loading.yaml
title: "Button — loading state"
preset: paper
aspect: "1:1"
quality: 1080p
steps:
- goto: https://design.example.com/?path=/story/button--default
- hover: { role: "button", name: "Click me" }
- click: { role: "button", name: "Click me" }
- wait: 1000
caption: "Loading state spins for 1.5s"
- assertVisible: { text: "Done" }Ship storybook demos demos that don't go stale.
$19.99/mo or $199/yr. Render through the dashboard or via the API — same access either way.