Skip to content
Pinky UI

scroll

Horizontal Story

Conservative vertical-to-horizontal panels.

  • scroll

Quick usage

usage
import { HorizontalStory } from "@pinky-ui/effects";

<HorizontalStory />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

HorizontalStory maps a section’s vertical travel to a horizontal row of panels. It is an advanced product or portfolio narrative for four or five visual panels, not a default carousel.

Use generous panel widths, a clear start/end and a visible reason for the horizontal progression. Do not trap the page, hijack wheel input, or use it for content that is naturally a simple list. Keep the vertical section long enough to feel predictable.

Reduced motion, coarse pointers and compact layouts use native horizontal overflow instead of scroll hijacking. Panels remain in DOM order, can be reached by keyboard, and do not require drag. Test focus, zoom, trackpad and touch boundaries.

Open this skill on its own page