Sticky device storyPro

A sticky device whose screen changes as the steps beside it scroll past.

Markdown

On this page

ProScroll the panel: the phone stays centered and its screen follows the step in the middle.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sticky-device-story

Usage

tsx

import { StickyDeviceStory } from "@/components/ui/chatcn/pro/sticky-device-story"

<StickyDeviceStory
  steps={[
    { id: "ask", title: "Ask in plain words", description: "…", screen: <AskScreen /> },
    { id: "work", title: "Watch every step", description: "…", screen: <WorkScreen /> },
  ]}
/>

The device stays centered with position: sticky in whatever scrolls (the page or a panel; the component finds it), and the active step is the one under the middle of that scroller. Screens slide a little in the direction of travel as they cross. The device is a render function, so it can be any frame; the default is a phone. Below compactBelow (720 px) the story stacks and each step shows its own screen, since a sticky device would leave no room to read.

Examples

Any device

ProA laptop on the start side, with full chatcn apps and the editor as screens.

Props

Prop	Type	Notes
`steps`	`{ id, title, description?, screen }[]`
`device`	`(screen, { compact }) => ReactNode`	Default a 300 px phone, 232 px when stacked
`side`	`"start" \| "end"`	Where the device sits. Logical. Default end
`active`	`number`	Controlled. Usually left to the scroll. `onActiveChange`
`stepHeight`	`number \| string`	Minimum height of each step. Default `70vh`
`compactBelow`	`number`	Width under which it stacks. Default 720

Keyboard

Key	Action
`Tab`, then `Enter`	Brings a step to the middle, which shows its screen

Accessibility

Steps are an ordered list of buttons; the active one is marked as the current step.
Only the active screen is in the accessibility tree; the default phone is inert, since its screen is a picture at that scale.

Motion

Screens cross in 280 ms, sliding 28 px with the direction of travel.
A step clicked with the pointer scrolls smoothly to the middle; from the keyboard or under reduced motion it jumps.
Under reduced motion screens crossfade in 150 ms with no movement.