Installation & details
Svg follow scroll by Skiper UI. SVG path animation that follows scroll progress with smooth drawing effects. Try the live React demo, inspect the original source, and install from PODIE.
React · Tailwind CSS · Author permission · Original registry
Added to PODIE · Catalog updated · Page updated
Installation and usage
The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.
01 — Set up your project
First component? Initialize shadcn once.
pnpm dlx shadcn@latest init02 — Install the component
pnpm dlx shadcn@latest add https://podie.dev/r/skiper--skiper19.json03 — Add it to your interface
Import the component from the path created by the installer.
'use client';
import { Skiper19 } from '@/components/skiper/skiper19';
export default function Example() {
return (
<div style={{ width: '100%', height: '100vh' }}>
<Skiper19 />
</div>
);
}
Example styling
These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.
.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }Dependencies and distribution
framer-motion The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.
By Skiper UI · Author permission. Original component source and license included.
Choosing and integrating this component
PODIE source review ·
Where it fits
An SVG path that follows progress through a long scrolling section. The reviewed section is 350vh tall and uses Framer Motion useScroll with its own target ref.
Integration boundary
Native React source. Plan enough vertical space and replace the bundled heading and copy. It is a page section, not a small inline icon.
Checks before shipping
Check heading hierarchy when inserting its built-in h1 into a page. The final scroll behavior depends on your surrounding layout.
Recorded verification
Included in the October 1, 2026 production sample: npm, pnpm, Yarn and Bun installation, TypeScript checking and a Vite build passed in four separate React 19.2.6 / Tailwind CSS 4.2.1 projects, with all 20 sampled entries installed together. Read the method and limitations.
No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.
Reviewed source identity
Registry SHA-256: f9ea10a95000a1951b93d37644f031305a7aa4f86fb850a3f7f368845fab12ff
Entry file: components/skiper/skiper19/index.tsx. 3 files in the registry payload.
Consider also: Card stack scroll.