Anime Scroll Story Rail
A long-form narrative layout with a premium vertical scroll rail and reading progress capsule, inspired by Skiper UI's Anime JS scrollbar and adapted into a production-ready Velocity Story Rail.
Installation
Add this component to your project using the CLI:
npx vui-registry-cli-v1 add anime-js-scrollbarSource Code
export { default as AnimeJsScrollbar } from "./velocity-story-rail";
export { default } from "./velocity-story-rail";
Dependencies
framer-motion: latest
Props
Component property reference.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional classes for the outer scroll container. |
| sections | Array<{ id: string; title: string; kicker?: string; body: string }> | Built-in narrative sections | Override the default narrative blocks with your own content sections. |
| height | number | string | "420px" | Height of the scroll viewport; useful for dashboards or modals. |
| railPosition | "left" | "right" | "right" | Choose which side of the layout the progress rail should live on. |
| onSectionChange | (id: string, index: number) => void | undefined | Optional callback fired when the active section changes while scrolling. |
| showLabels | boolean | true | Toggle the compact label chips that sit above each section heading. |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.