July 27, 2026/Intermediate/Features & Process/Milk Network ↗

Milk What We Do

Milk Network's 'What we do' service list: full-row links with bottom-aligned titles and 210px rounded image wells. Each image runs three simultaneous scroll-scrubbed layers — a left-to-right clip-path inset wipe (expo.out mapped onto scroll progress so the reveal front-loads), a -15% horizontal drift of the media beneath the wipe, and a ±25px vertical parallax — all repeating on re-entry. Hovering a row zooms the image to 1.05 and fires the arrow's masked fly-through (exit right, re-enter from the left). Titles rise in once with a masked line reveal.

Live Demo ↗

Preview

What we do

Source

import MilkWhatWeDo from "./index.jsx";
import { milkWhatWeDo } from "../demo-data.js";
import styles from "./demo.module.css";

export default function MilkWhatWeDoDemo() {
  return (
    <div className={styles.page}>
      <div className={styles.spacer}>Scroll</div>
      <MilkWhatWeDo {...milkWhatWeDo} />
      <div className={styles.spacerBottom} />
    </div>
  );
}