Blur Transition

ProTransitions

A scroll-scrubbed transition that blurs and scales through a sequence of items as the page moves. GSAP ScrollTrigger drives the scrub with a configurable lerp, and the scroll binding can be switched off to drive progress yourself.

Blur Transition

Included with membership

Members install Blur Transition with one command and get the full source, the usage code and the Framer remix, licensed for client work. One membership covers the whole library and the CLI.

When to use it

Two separate things ship in this file. The card stack is for a run of full-bleed editorial cards that should read as one continuous scroll rather than a list — case studies, chapters, a launch story. The page-transition provider underneath it is unrelated: wrap a route group and its links blur out before navigating. Use either without the other.

  • Give every item a stable id — it keys the card, and a changing id restarts the transition mid-scroll.
  • Use full-bleed images sized near the viewport; each card fills the screen, so a small image is visibly soft.
  • Pass scroller when the section lives inside its own scrolling container rather than on the page.

Avoid:

  • Do not nest the card stack inside another pinned scroll section — two components fighting for the same scroll produce no motion at all.
  • Do not raise maxBlur far past the default to make it more dramatic; heavy blur over a full-screen image is the most expensive thing this component does.
  • Do not wrap the card stack in the page-transition provider expecting them to interact. They are independent.

Props

A stack of full-bleed cards that hand off as you scroll: the one leaving blurs out and grows, the next arrives sharp. You supply the content as data rather than markup, so the whole section is one tag.

<BlurTransition />

The scroll section. Give it items and it builds the cards.

PropTypeDefaultDescription
items*BlurTransitionItem[]—One entry per card, in order. Required — the component renders nothing without it.
maxBlurnumber40How far out of focus a card goes at the midpoint of its handoff, in pixels. Lower keeps it legible for longer.
scaleAmountnumber1.12How much the outgoing card grows as it blurs. 1 removes the zoom and leaves only the blur.
scrubLerpnumber1.0Seconds the animation takes to catch up to the scroll position. 0 locks it to the scrollbar exactly; higher lets it trail and settle.
enableScrollbooleantrueWhether scroll drives the transition at all. Turn it off to render the first card as a static hero.
scrollerstring | Elementthe pageThe element that actually scrolls, when it isn't the page. Without it inside a nested scrolling container the section listens to the page scrollbar and never advances.
classNamestring""Appended to the outer section.

<PageBlurTransitionProvider />

A separate, route-level use of the same idea: wrap a section of the app and every link inside it blurs out before navigating. Independent of the card stack above — you can use either without the other.

PropTypeDefaultDescription
children*React.ReactNode—The routes the transition covers.
durationnumber0.4Seconds the blur takes before the route changes.
maxBlurnumber24How far the outgoing page blurs, in pixels, at the peak of the transition.
navigate(href: string) => voidfull document navigationHow to change route once the blur finishes. Pass your router's push here — on Next that is router.push from useRouter(). Left out it falls back to a whole-document navigation, which works anywhere but loses client-side routing.
prefetch(href: string) => void—Optional warm-up for the destination, called as the blur starts. On Next, router.prefetch.

<PageBlurLink />

Use in place of your router's link inside the provider. Takes everything an anchor takes, plus href.

PropTypeDefaultDescription
href*string—Destination route.
children*React.ReactNode—Link content.

<BlurTransitionItem />

type

The shape of one card.

PropTypeDefaultDescription
id*string—Stable key for the card.
title*string—Headline.
category*string—Small label above the headline.
image*string—Full-bleed background image for the card.
description*string—Body copy under the headline.
colorstring—Optional accent for this card.
Client component. It pins a section and measures the viewport, so it has to run in the browser.
Each card carries a full-bleed image and a live blur, which is one of the more expensive things a browser can composite. Ship the images near the size they are shown, and keep the list short.
The handoff is scroll-driven and stays under reduced motion — it is the section's layout, not decoration. Set enableScroll={false} if you want a still version.
Back to all components