# Scrolly

> Scrollytelling: text steps scroll past while a graphic stays in view and follows the active step.

Source: https://ui.jcsoftdev.com/docs/components/scrolly

Scrollytelling: text steps scroll past while a graphic stays in view and follows the active
step. The active step is the one crossing a trigger line, found with an IntersectionObserver.
Wide containers put the graphic beside the steps, narrow ones pin it above them (container
queries, so it works inside a card or a dialog too). The text is real content in reading
order, so it works with a screen reader and without scrolling effects.

## Import

```ts
import { Scrolly } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/scrolly`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <div style={{ padding: 16 }}>
      <Narrative side={args.graphicSide} />
    </div>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `graphic` * | `(state: ScrollyGraphicState) => ReactNode` |  | The sticky graphic: receives the active step, e.g. to change the data of a chart. |
| `children` * | `ReactNode` |  | `ScrollyStep` elements, in reading order. |
| `offset` | `number` | `0.5` | Where the trigger line sits in the scroll area: 0 top, 0.5 middle (default), 1 bottom. |
| `root` | `HTMLElement \| null` | `null` | Scroll container the steps move in; the page by default. |
| `graphicHeight` | `string` | `"min(55svh, 26rem)"` | Height of the sticky graphic, any CSS length. |
| `graphicSide` | `"start" \| "end"` | `"end"` | Which side the graphic takes when the container is wide. |
| `step` | `number` |  | Controlled step; the scroll position decides when omitted. |
| `onStepChange` | `((step: number) => void)` |  |  |
| `aria-label` | `string` |  | Accessible name of the narrative. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/containers-scrolly--default)
- [Narrow](/storybook/?path=/story/containers-scrolly--narrow)
- [With Step Indicator](/storybook/?path=/story/containers-scrolly--with-step-indicator)
- [Brutal Preset](/storybook/?path=/story/containers-scrolly--brutal-preset)

## Source

`packages/ui/src/containers/scrolly/scrolly.tsx`