Docking Scroll
Scroll, and the headline shrinks into a bar while the product rises and docks beneath it.
Features
- The headline shrinks into a sticky bar with the call to action
- The product rises out of a 3D tilt and docks under the bar
- Its chart grows in once it lands
- Hidden buttons can't be tabbed to; the visible ones always can
- No scroll-linked movement for reduced motion
Best for: SaaS and analytics products whose app is the selling point: the hero hands over to the product.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo, shown in the docked bar. |
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The blue button, also in the docked bar. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| scrollScreens | number | 2.4 | How many screens of scrolling the docking takes. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Docking Scroll free to use?
Yes. Docking Scroll is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Docking Scroll work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Docking Scroll in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Docking Scroll need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Docking Scroll accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.