Sticky Cards Parallax
Cards stack as you scroll — each sticks to the top while the next one slides underneath. The image inside each card zooms from 2× to 1× as the card settles, and previous cards scale down slightly as new ones arrive.
Preview
Kickandbass
A motion-forward headless Shopify storefront built for a London-based music label. Every interaction is driven by an animation language developed from the brand's visual identity.
See more
Westend
A nonprofit campaign site for a community arts organisation. The brief was to make the site feel alive — every scroll, hover, and transition reinforces the brand's energy.
See more
Delivrd
Brand identity and web for a logistics startup entering a crowded market. The challenge was to make 'fast and reliable' feel premium rather than generic.
See more
Socialstats
A data product for social media managers. Dense information, zero visual noise. The design system was built to make complex analytics feel intuitive at a glance.
See more
Kevin Davis
An artist portfolio for a London-based photographer and director. The goal was to let the work speak — minimal UI, maximum presence.
See more
Source
"use client";
import { useEffect } from "react";
import StickyCardsParallax from "./index.jsx";
import { stickyCardsParallax } from "../demo-data.js";
import styles from "./demo.module.css";
export default function StickyCardsParallaxDemo() {
// Original tutorial runs Lenis smooth scroll to smooth the sticky/scale sync
useEffect(() => {
let lenis;
let cancelled = false;
(async () => {
const { default: Lenis } = await import("lenis");
if (cancelled) return;
lenis = new Lenis({ autoRaf: true });
})();
return () => {
cancelled = true;
lenis?.destroy();
};
}, []);
return (
<div className={styles.demo}>
<StickyCardsParallax cards={stickyCardsParallax.cards} />
</div>
);
}
Dependencies
framer-motionlenis
Related Components
