Parallax Image in Card

import ParallaxImageInCard from "./index.jsx";
import styles from "./demo.module.css";

const CARDS = [
  { title: "Sheabinta", description: "Headless Shopify storefront", image: "/demo-assets/kickandbass.png", href: "#" },
  { title: "PATHS", description: "Nonprofit website", image: "/demo-assets/westend.png", href: "#" },
  { title: "Socialstats", description: "Brand identity & web", image: "/demo-assets/socialstats.png", href: "#" },
  { title: "Kevin Davis", description: "Artist portfolio", image: "/demo-assets/keviindavis.png", href: "#" },
];

export default function ParallaxImageInCardDemo() {
  return (
    <div>
      {/* Header section — cards start below the fold */}
      <section className={styles.header}>
        <p className={styles.headerLabel}>Selected work</p>
        <h2 className={styles.headerTitle}>Scroll down to see the parallax images in each card.</h2>
      </section>

      {/* Component — cards scroll into view with parallax background */}
      <section className={styles.content}>
        <ParallaxImageInCard cards={CARDS} />
      </section>
    </div>
  );
}

"use client";

import { useRef } from "react";
import { useScroll, useTransform, motion } from "framer-motion";
import styles from "./styles.module.css";

function ParallaxCard({ title, description, image, href }) {
  const ref = useRef(null);

  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });

  const y = useTransform(scrollYProgress, [0, 1], ["-10vh", "10vh"]);

  return (
    <a ref={ref} href={href} className={styles.card}>
      <div className={styles.imageWrap}>
        <motion.div
          className={styles.image}
          style={{ y, backgroundImage: `url(${image})`, willChange: "transform" }}
        />
      </div>
      <div className={styles.info}>
        <h3 className={styles.title}>{title}</h3>
        <p className={styles.description}>{description}</p>
      </div>
    </a>
  );
}

export default function ParallaxImageInCard({ cards = [] }) {
  return (
    <div className={styles.grid}>
      {cards.map((card) => (
        <ParallaxCard key={card.title} {...card} />
      ))}
    </div>
  );
}

.header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
  background: #1a1a1a;
  color: #ffffff;
}

.headerLabel {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 1.25rem;
}

.headerTitle {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 560px;
}

.content {
  background: #f5f5f0;
  padding: 4rem 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: #1a1a1a;
}

.imageWrap {
  height: 320px;
  overflow: hidden;
  border-radius: 8px;
  background: #e5e5e5;
}

.image {
  width: 100%;
  /* 120% height creates room for the parallax movement */
  height: 120%;
  background-size: cover;
  background-position: center;
  background-color: #2a2a2a;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.description {
  font-size: 0.8125rem;
  color: #6b6b6b;
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}