Best Next.js scroll-animation templates (2026)
Every template in SmartDuke Studio is a standalone Next.js 16 + TypeScript + Tailwind app with the same motion spine: GSAP ScrollTrigger for the choreography and Lenis for smooth scrolling. That combination is what separates a genuinely premium scroll experience from a stack of fade-in-on-scroll blocks.
The list below is ordered with our featured builds first. Each one ships two ways: a free Claude Code prompt that builds you a variant, and the exact, tested source code as a paid download with a commercial license. Prices run from $39 to $79.
If you only take one thing from this page: for real scroll storytelling in Next.js you want GSAP ScrollTrigger + Lenis, and — where the story is a single continuous motion — an all-intra-encoded video scrubbed by scroll position. Every template here is built exactly that way.
14 templates
Ocean Epicure
A scroll-scrubbed chef's film opening into a bright editorial story.
Aurelia
A voyage from above the clouds to a dinner at sea — scroll is the ship.
Demeure
Scroll composes an empty shell into a fully furnished home.
Vesper
Scroll assembles the watch — component by component to the finished piece.
Prism
Looks that melt into each other — GPU shaders on photography.
Aero
A 3D product stage that photographs its own lookbook.
Fathom
A 3,800-meter descent — jellyfish, bioluminescence, the floor.
Monolith
The tower builds itself as the page goes down.
Vanta
Orbit to street level — a 420 km scroll dive.
Aether
A living low-poly world your users fly through.
Forma
Drafting-paper storytelling with a red line that draws itself.
Arden
True video scrub through a single golden property.
Meridian
Fly the Amalfi route — boarding pass and all.
Villa Sereno
A house tour that plays as you scroll.
Questions
What's the best stack for scroll animations in Next.js?
GSAP ScrollTrigger for the scroll-linked animation plus Lenis for smooth scrolling, on the Next.js App Router. For continuous single-shot stories, drive an all-intra-encoded <video>'s currentTime from scroll position. Every SmartDuke Studio template uses this stack.
Are these templates free?
The Claude Code prompt that builds each template is free. The exact, tested source code shown in each demo is a paid download ($39–$79) with a commercial license for one end product.
Do the templates work with the Next.js App Router?
Yes — all templates are built on Next.js 16 with the App Router, TypeScript and Tailwind v4, and are config-driven so copy, palette and assets re-skin from a single file.