Scroll-pinned Reveal

What it is. A scroll-pinned reveal fixes a container on screen and drives its internal UI changes with scroll position. The panel stays locked in the viewport while supporting content flows past it. Each new scroll milestone swaps the content inside the pinned frame so the reader watches the actual product respond instead of staring at static images. Cursor turned this into their signature move. Linear followed. By 2026 it separates sites that feel like live demos from sites that feel like brochures. Implementation usually pairs a position sticky or fixed container with Framer Motion scroll triggers or GSAP ScrollTrigger. The scroll value gets mapped to discrete steps that trigger variants or state changes. Done right the transitions feel inevitable. The reader never loses context because the demo travels with them.

What it is not. It is not a sticky header that follows you down the page while the content scrolls underneath. It is not a parallax layer that drifts at 0.5x speed for fake depth. It is not a Lottie animation scrubbed by scroll progress. Those techniques sit on top of content. Scroll-pinned reveal replaces content. The pinned element is the content. It also is not progressive disclosure hidden behind a click. The scroll itself becomes the input device. If your version requires a button or plays like a video timeline you built the wrong pattern. Cursor does not ask you to click through states. The scroll forces the reveal so the demo stays in lockstep with the sales copy.

Concrete example. Open Cursor dot sh in 2026. After the hero you hit a tall split layout. The left column runs eight feature explanations spaced out over 2800 pixels of height. The right column holds one pinned frame containing a live mockup of the Cursor editor. As the first block titled Inline Edits scrolls into view the pinned editor populates with a code file and shows AI suggestions appearing character by character. Scroll another 400 pixels and the panel instantly updates to a chat interface where Claude answers a debugging question. The transition uses a 180 millisecond crossfade plus a subtle scale so it never feels like a hard cut. Two scrolls later the panel switches to a multi cursor refactoring view with four simultaneous edits happening. Every state matches the exact claim on the left. Linear runs a tighter version on their 2025 homepage for the command bar. The pinned bar sits at the top of a phone frame. As you scroll through keyboard shortcut explanations the bar populates with different commands firing in sequence complete with the signature blue highlight that Linear made famous. Stripe borrowed the pattern in late 2025 for their checkout flow page. The pinned panel shows a real payment UI. Scroll through integration methods and the panel updates the country selector currency toggle and success animation to match each method. Anthropic uses a restrained variant on their Claude 3.5 page where the pinned window cycles between different response formats while you read capability claims. Each example shares one rule. The pinned content is not decoration. It is the product doing the actual work the copy describes.

When to use it. Use scroll-pinned reveal when your product interface itself sells the story better than any screenshot ever could. Developer tools AI applications design software and complex dashboards benefit most. The pattern shines when you must demonstrate state changes that would otherwise need six separate images and a carousel nobody will swipe. It works especially well on pages where the feature list is long and attention would normally drop off. The pin keeps the demo in eyesight for the entire journey. Pair it with variable fonts and noisy gradients and the whole section feels like 2026 instead of 2021. Build it once in Framer Motion with useScroll and useTransform then reuse the component across every marketing page that needs to prove capability. Test it on a mid tier Android on 4G. If it stays under 60 fps you cleared the bar.

When not to use it. Do not use it on simple brochure sites for restaurants agencies or consumer products where atmosphere matters more than interface. The technique adds JavaScript weight and scroll listeners. If your site already ships 400 kilobytes of bundle you will pay for it in Core Web Vitals. Skip it on mobile first experiences where the reduced viewport makes the pinned area feel like a tiny prison. Never deploy it as pure visual flair. If the updates inside the panel do not map one to one with the claims in the copy the pattern becomes expensive decoration and users feel manipulated. Avoid it when the product states cannot be represented accurately inside a single frame. Forcing a complex 3D workflow into a 600 pixel square pinned panel just creates a blurry lie. Finally do not use it if you lack the motion engineering resources to make the updates feel instantaneous. Janky scroll pinned reveals die in the first 300 milliseconds and make the whole site feel like a 2022 Webflow template.

Scroll-pinned reveals turn your marketing page into a live product demo that follows the reader instead of forcing them to imagine how it works.