Process Rail in Vue.
A row of steps along a line. As you scroll, a small bead draws the line behind it and each step lights up as the bead reaches it, its number rolling in and its image fading in underneath and staying. For how-it-works, onboarding and process sections.
Install Process Rail in your Vue project
Process Rail ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.
Where it goes in your Vue app
Process Rail is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.
In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.
The component uses the <script setup> composition API and TypeScript-friendly defineProps.
Common questions
- Does Process Rail work in Nuxt 3?
- Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in
- Does Process Rail work with Vue 2?
- No - the component uses the Vue 3 Composition API and