Clip-Path Inset Reveal

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

const ITEMS = [
  { label: "Brand Identity", image: "/demo-assets/kickandbass.png", description: "Visual systems that define who you are." },
  { label: "Web Design", image: "/demo-assets/westend.png", description: "Motion-forward websites that convert." },
  { label: "Branding", image: "/demo-assets/socialstats.png", description: "Identity systems for ambitious brands." },
  { label: "Portfolio", image: "/demo-assets/keviindavis.png", description: "Showcasing creative work with intention." },
];

export default function ClipPathInsetRevealDemo() {
  return (
    <div>
      {/* Intro — items start below fold so they animate in on scroll */}
      <section className={styles.intro}>
        <p className={styles.introLabel}>Services</p>
        <h2 className={styles.introTitle}>Each item reveals from inset as you scroll it into view.</h2>
      </section>

      {/* Component */}
      <section className={styles.content}>
        <ClipPathInsetReveal items={ITEMS} />
      </section>
    </div>
  );
}

"use client";

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

export default function ClipPathInsetReveal({ items = [] }) {
  return (
    <div className={styles.list}>
      {items.map((item) => (
        <RevealItem key={item.label} {...item} />
      ))}
    </div>
  );
}

function RevealItem({ label, image, description }) {
  const ref = useRef(null);

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

  const clipPath = useTransform(
    scrollYProgress,
    [0, 1],
    ["inset(20% 5% 20% 5%)", "inset(0% 0% 0% 0%)"]
  );
  const opacity = useTransform(scrollYProgress, [0, 0.4], [0, 1]);

  return (
    <div ref={ref} className={styles.item}>
      <motion.div
        className={styles.media}
        style={{ clipPath, opacity, willChange: "clip-path, opacity" }}
      >
        <div
          className={styles.image}
          style={{ backgroundImage: `url(${image})`, backgroundColor: "#1a1a1a" }}
        />
      </motion.div>
      <div className={styles.info}>
        <span className={styles.label}>{label}</span>
        <p className={styles.description}>{description}</p>
      </div>
    </div>
  );
}

.intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 3rem;
  background: #f5f5f0;
}

.introLabel {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9b9b9b;
  margin-bottom: 1.25rem;
}

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

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

.list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
}

.image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

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

.label {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.description {
  font-size: 0.9375rem;
  color: #6b6b6b;
  line-height: 1.65;
}

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