24+ Parallax Sections, Scroll Animations, and Apple-Style Website Effects
Parallax hero sections, sticky scroll cards, Apple-style product storytelling, Ken Burns pans, word-by-word text reveals, blur to focus scroll effects, and expanding scroll heroes. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
by the same hand.
Parallax Storytelling Hero Section
Parallax storytelling section with three full-viewport panels and Apple-style cinematic image reveal on scroll, for editorial landing pages and product story pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Sticky Scroll Stacked Cards Section
Apple-style sticky scroll stacked cards section for landing pages and product feature walkthroughs, cards pin as the reader scrolls. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
3D Parallax Depth Hero Section
Three-layer parallax depth hero section with image layers that recede on scroll, for cinematic product story pages and editorial landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Expanding Clip Scroll Hero (Apple-Style)
Apple-style expanding clip scroll hero, a small card expands to full-bleed as the reader scrolls, for product launch pages and campaign hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Reverse Zoom Scroll Hero (Full-Bleed to Card)
Reverse zoom scroll hero, a full-bleed image shrinks into a rounded card as the reader scrolls, for product landing pages where the closing headline matters more than the opening image. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Pinned Text Sequence Scroll Hero (Product Story)
Apple-style pinned text sequence scroll hero with cross-fading headlines over a fixed image, for product story pages and campaign landing sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Horizontal Split Panels Scroll Hero
Horizontal split panels scroll hero, top and bottom image panels part on scroll to reveal a headline, for product reveal pages and campaign hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Wide by design.
Ken Burns Slow Pan Scroll Hero
Ken Burns slow pan scroll hero with a cinematic horizontal image pan and bottom-left overlay copy, for editorial magazine covers and film production sites. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Ascending Image Slide-Up Hero (Type-First)
Ascending image slide-up scroll hero, the image rises from below the fold as the reader scrolls, for type-first product pages and essay openings. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Zoom Out Reveal Scroll Hero
Zoom out reveal scroll hero, an extreme close-up image scales out to the full scene on scroll, for cinematic product pages and editorial hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Vertical Split Scroll Hero
Vertical split scroll hero, left and right image panels part on scroll to reveal a centered column of content, for product reveal pages and campaign landing sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Blur to Focus Scroll Hero
Blur to focus scroll hero, a blurred image sharpens as the reader scrolls, for photography portfolios and product story pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Sticky Text Marquee Hero
Sticky text marquee hero with a centered headline pinned in the viewport and a drifting marquee behind, for editorial magazine covers and essay landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
A quieter workspace where every model listens, remembers, answers as you.
Word-by-Word Text Reveal Scroll Hero
Word-by-word text reveal scroll hero, a headline arrives one word at a time as the reader scrolls, for essay openings and manifesto landing pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
The best AI product is the one you stop noticing.
We built this for the writer at 6am, the designer between meetings.
Sticky Kicker Manifesto Hero
Sticky kicker manifesto hero with a top-of-page label that updates as the reader scrolls through sections, for long-form editorial pages and multi-chapter product story pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
“The best AI is the one you stop noticing.”
Sarah C. · Product
Pull Quote Testimonial Hero
Pull quote testimonial hero with a centered quote pinned over a full-bleed image, for case study pages and social proof hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
The last time you built a landing page,
you probably wrote the copy in a doc,
imagined the layout on a whiteboard,
and asked five tools to help you.
Line-by-Line Text Reveal Scroll Hero
Line-by-line text reveal scroll hero, each line fades in as the reader scrolls, for essay openings and blog post hero sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Sticky Split Text Scroll Hero
Sticky split text scroll hero, a large headline splits open on scroll to reveal a subtitle between, for product story pages and single-word big-idea headlines. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Scroll Chapter Panels
Scroll chapter panels with per-panel horizontal text slide-in and image fade, for editorial landing pages and product story sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
brick by careful brick.
Pinned Feature Tab Showcase
Pinned feature tab showcase with a sticky left tab list and scroll-driven image crossfade on the right, for SaaS feature sections and product walkthroughs. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
What people say
“The kind of studio you build a career hoping to work with.”
Sarah Chen
Scroll Quote Reveal
Scroll quote reveal with word-by-word text animation on a dark textured background, for testimonial sections and pull-quote landing moments. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
By the numbers
12+
Years quietly at it
84
Products shipped
3.1M
People who stayed
0
Sponsored posts
Count-Up Stats on Scroll
Count-up stats section where numbers animate from zero when they enter the viewport, with a subtle parallax background, for product landing pages and press sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Recent work
The rooms we've walked through.
Velocity Image Strip
Velocity image strip that accelerates when the reader scrolls faster, for portfolio strips and work showcase sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
The product
Made once.
Made well.
A single conditioner. Four ingredients.
Sticky Product Spotlight
Sticky product spotlight where a product image stays pinned while benefit copy scrolls alongside it in cross-fading segments, for e-commerce product pages and product launch sections. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
What can I build with scroll animations & parallax sections?
Build:
- + parallax sections
- + parallax hero sections
- + sticky scroll sections
- + Apple-style scroll storytelling
- + scroll animations
- + image reveal effects
- + text reveal animations
- + split screen layouts
- + zoom transitions
- + Ken Burns pans
All components are built with React 18 and Tailwind CSS and can be customized using Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
About scroll animations & parallax sections
Parallax sections, sticky scroll experiences, Apple-style scroll animations, and website scroll effects. Every component in this category ships with a live preview, copy-paste React and Tailwind source code, and the prompt that regenerates it in Claude Code, Cursor, Codex, Lovable, Replit, or Google Stitch.
Every component includes
- + A live preview of the exact section, screen, or animation
- + The prompt written for each of the 6 AI coding tools
- + Copy-paste React and Tailwind source code
- + Commercial usage rights
- + Implementation notes
- + Supported frameworks
Used inside
- + Landing pages
- + AI product websites
- + SaaS dashboards
- + AI chat apps
- + Startup websites
- + Portfolios
- + Marketing pages
- + Waitlist pages
React 18 and Tailwind CSS v3 assumed. Additional dependencies (framer-motion, gradflow) are listed on each component page when required.
Related prompts for scroll animations & parallax sections
Frequently asked questions
Can I use this component copyright-free in my website or app?+
Yes. Every component, code file, and included asset on this page is free for commercial use with no attribution required. There is no license fee, no royalty, and no copyright restriction. Copy it, adapt it, ship it in client work, SaaS products, open-source projects, or internal tools — it is yours from the moment you copy the code.
How do I use this component in my project?+
Copy the source file from the "Copy code" button and save it into your components folder. Add any listed dependencies (React 18 or later and Tailwind CSS v3 or later are always required, plus framer-motion or gradflow if the component lists them). Import and render the component wherever you want it. Every prop is optional and defaulted.
Does this component work with TypeScript?+
Yes. Every component is written in TypeScript with fully typed props and exported interfaces. Paste it into a TypeScript project and it works without modification. If you need a plain JavaScript version, paste the file into Claude Code or Cursor and ask it to strip the types.
Can I customise this component for my brand?+
Yes. Every component uses Tailwind utility classes throughout and accepts content props (headline, subtitle, image URL, CTA, and so on). Change the brand color in one place and every CTA updates. Swap the font in next/font and every heading updates. For structural changes, paste the prompt into Claude Code, Cursor, Lovable, Replit, or Codex and describe your brand tokens, spacing, or motion preferences.
Will this component slow down my page?+
No meaningful impact. Components that animate use CSS transforms, which are GPU-composited and do not trigger layout. Components that scroll-drive use a lightweight IntersectionObserver or useScroll hook — no polling or continuous repaints. The Tailwind output is tree-shaken at build time so no unused styles ship. Total JavaScript added per component is under 2 KB gzipped in most cases.
Can I use this with shadcn/ui or other component libraries?+
Yes. These components are standalone: no shared context, no global CSS, no conflicting reset. They use Tailwind utility classes and standard React hooks, which are compatible with shadcn/ui, Radix UI, MUI, and any other component library. Import them alongside your existing components without conflicts.
Are the components free for commercial use?+
Yes. Everything on this page is free to copy, adapt, and ship in commercial projects. No attribution required. If you post a public showcase we always appreciate a link back.
Which AI coding tool works best for these components?+
All five prompts produce the same design. Claude Code and Codex are best when you want the component slotted into a project with existing conventions. Cursor is ideal for editing inside your IDE with the file open. Lovable and Replit spin up a fresh preview fastest, useful for a quick play.
Do these work with Next.js, Vite, and Remix?+
Yes. The source files are plain React 18 client components. They run on any framework that supports React 18 and Tailwind CSS v3. If a component needs the "use client" directive (all of them do here, since they use hooks), keep the directive at the top of the file when you paste.