Storybook stories for the `MarqueeWall` component, demonstrating its scrolling wall variants including horizontal/vertical loops, synced pairs, plain mode, and reversed travel. ## Key Components | Export | Type | Description | |--------|------|-------------| | `Horizontal` | `Story` | Default horizontal marquee with right-edge fade | | `Vertical` | `Story` | Vertical scrolling marquee with bottom fade inside a height-capped container | | `SyncedPair` | `Story` | Two walls sharing a single position driver via `useMarqueeSync` | | `Plain` | `Story` | Static layout opt-out — no motion, no fades | | `Reversed` | `Story` | Right-traveling marquee with dual-edge fades and custom fade sizing | | `Tile` | Component | Internal demo tile rendering an MSP tool label | | `TILES` | `string[]` | Sample content labels (MSP tool names) used across all stories | ## Usage Example ```typescript import { MarqueeWall, useMarqueeSync } from '../components/ui/marquee-wall' // Basic horizontal marquee // Pixel-locked sync across multiple walls function SyncedWalls() { const sync = useMarqueeSync() return ( <> ) } ``` ## Notes - Stories use ODS design tokens (`--spacing-system-mf`, `--color-bg-card`) for spacing and color — ensure the token stylesheet is loaded in Storybook. - `MarqueeWall` auto-statics when content fits the container or when `prefers-reduced-motion` is active. - `useMarqueeSync` is used in the `FreeTrialCTA` resolve-strip; `SyncedPair` reproduces that exact pattern. - Source: [`MarqueeWall.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/MarqueeWall.stories.tsx)