scroll
Sticky Story
A sticky visual with normal-flow story steps.
- scroll
Quick usage
import { StickyStory } from "@pinky-ui/effects";
<StickyStory />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.
npm install @pinky-ui/effectspnpm add @pinky-ui/effectsyarn add @pinky-ui/effectsnpx pinky-ui add sticky-storyPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- 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
What it does
Sticky Story pairs a sticky supplemental visual with a normal-flow sequence of story steps. The reader moves through the content; the visual changes quietly to match the active step.
Interaction anatomy
- Trigger: normal document scroll, not a captured scroll takeover.
- State: current step, visual transition and compact/touch layout.
- Motion: a short crossfade/scale between supplied visuals.
- Surface: one sticky visual column and readable step content.
- Feedback: headings and descriptions remain the source of meaning.
Good for
- A three-to-five-step product explanation.
- Feature narratives and portfolio case studies.
- Stories where the visual can clarify but not replace the text.
Avoid for
- Short lists, critical forms or content that must be compared at once.
- A narrative that only makes sense if the visual keeps moving.
- A page where sticky overflow would trap zoomed or keyboard content.
Live example
Scroll the bounded live story above. On a narrow viewport the same steps return to a readable stack with each visual beside its own copy.
Usage
<StickyStory
steps={steps}
top={24}
visualClassName="min-h-80"
contentClassName="max-w-xl"
/>Tune
- Keep the story to roughly
3–5steps. - Choose a
topoffset that stays below the site header and never hides focus. - Give each step enough content height to make the relationship legible.
- Use low-contrast visual transitions; the copy should carry the rhythm.
Accessibility
- Keep steps and headings in document order with real text semantics.
- The visual is supplemental and must not be the only way to understand a step.
- Test keyboard reading, zoom, focus visibility and sticky overflow boundaries.
- Touch layouts use ordinary flow; no swipe or pinned gesture is required.
Reduced motion
Reduced motion removes visual crossfades while the active step, text order and compact stack remain understandable and usable.