ExperimentalutilityData display

Scene

The frame for a product picture built from real components, for feature cards and onboarding.

import { … } from "@brdgapp/ui/components/scene"

Usage

Scene is the frame for a product picture: what a feature looks like, built from the package's real components (Card, Avatar, Button, Tag) on the dot grid. It's for feature cards, onboarding steps and promos. Everything inside is decoration: it can't be clicked or reached with the keyboard, and screen readers skip it. The usual mistake is a screenshot or exported image instead, which blurs, goes stale and stays light in dark mode.

When to use

A feature or promo card that shows what a feature does: free slots, who can introduce you.
An onboarding step, showing what the person is about to turn on.
A “What's new” item.

When not to use

For an empty state. Use Illustration instead.
For a network picture. Use NetworkGraph instead.
For anything people should use. Put the real, working components on the page.

The look comes from props

A component's appearance comes only from its own options (variant, size, color). className on a package component is for layout (mt-4, shrink-0, w-full), never for font size, color, padding, radius or hover. If the look needs a className, the component or the chosen option is wrong: fix that instead.

Anatomy

Frame. 12px corners, the dot grid on pale blue (--info-bg), as Bridge OS's scene pictures have; or a strong blue with tone="blue".
Scene. Real components, sized and placed as the picture, centred.

Examples

On a feature card

The scene shows the moment; the card's words explain it and the button starts it. Try Tab: the scene's button is skipped.

Book intros into free time

Connect your calendar and people can pick a slot that suits you both.

The blue wash

For the one hero picture of a promo.

States

States not written yet.

Behavior

Clips what spills over its edges, so a scene can bleed off one side.
Everything inside is inert: no clicks, no focus, no text selection.
Set its size with className (h-64, aspect-[4/3]).

Do and don't

Show one moment, with sample people.

Don't

Rebuild a whole screen in miniature.

Build it from the package's components.

Don't

Export a screenshot or a PNG.

Content

The card's own title and text explain the feature; the scene only shows it.

Accessibility

Hidden from screen readers and skipped by Tab, because it's a picture of controls, not controls.
The words beside it must say everything the picture shows.

API reference