Apple-Style Sticky Scroll

Pro

A pinned cinematic section that morphs in lock-step with scroll, staying perfectly in sync whichever way you travel.

cinematic interactionsapplestickyscrollsequenceframer motion
Apple-Style Sticky Scroll component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add apple-sticky-scroll-sequence

Usage

Import AppleStickyScrollSequence from @/components/wensity/apple-sticky-scroll-sequence and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { AppleStickyScrollSequence } from "@/components/wensity/apple-sticky-scroll-sequence";
const frames = [
{
id: "library",
title: "Grand Library",
description:
"A sunlit hall of shelves where quiet does the heavy lifting. Tall windows pour warm light across endless stacks, carving soft paths through dust and timber so the room feels ceremonial, focused, and ready for deep reading.",
points: [
"Light pouring through tall windows onto endless stacks",
"A reading room built for deep focus, not distraction",
"Architecture that makes knowledge feel ceremonial",
],
image: "https://assets.wensity.com/photos/landscape/grand-library-hall.webp",
},
{
id: "falls",
title: "Rainforest Falls",
description:
"Mist, canopy, and a fall that keeps rewriting the frame. Wild water cuts through living green while layered foliage holds depth from cliff edge to forest floor, so the scene feels alive before you can name what moved.",
points: [
"Constant motion you feel before you name it",
"Layered canopy depth from cliff to forest floor",
"A scene that rewards a slow, pinned scroll",
],
image: "https://assets.wensity.com/photos/landscape/rainforest-falls.webp",
},
{
id: "taj",
title: "Taj at Sunrise",
description:
"Marble catching the day's first color across white stone and still water. The landmark holds symmetry while the sky shifts, earning a pause that feels like arrival rather than exit: calm, deliberate, and complete.",
points: [
"Warm first light across white stone and reflecting pools",
"Symmetry that holds still while the sky changes",
"A final beat that feels like a destination, not an exit",
],
image: "https://assets.wensity.com/photos/landscape/taj-mahal-sunrise.webp",
},
];
export function AppleStickyScrollSequenceDemo() {
return (
<AppleStickyScrollSequence height="640px" frames={frames} />
);
}

Props

PropTypeDefaultDescription
framesStickyScrollFrame[]-Pinned story frames with title, description, optional points[], image/imageAlt, and accent.
heightstring"640px"Height of the embedded scroll container when not using window scroll.
travelnumber1Vertical scroll travel per frame in viewport units.
useWindowbooleanfalseDrive the sequence from window scroll instead of the embedded container.