# Numbered Process Steps Stacking With Peeking Headers A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/numbered-process-steps-stacking-with-peeking-headers). - Page, with a live preview: https://shadcn.exchange/r/weinc/numbered-process-steps-stacking-with-peeking-headers - Screenshot: https://shadcn.exchange/shot/weinc/numbered-process-steps-stacking-with-peeking-headers/light.png - Registry item: https://we.inc/r/numbered-process-steps-stacking-with-peeking-headers.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/numbered-process-steps-stacking-with-peeking-headers.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/numbered-process-steps-stacking-with-peeking-headers.tsx` ```tsx import { useEffect, useRef } from "react"; import { useReducedMotion } from "framer-motion"; const steps = [ { title: "Roof survey", time: "One visit", text: "An installer climbs up, measures every face of the roof and checks the rafters and the fuse board before anything is drawn.", gets: ["Photos of each roof face", "A note on any repairs needed first"] }, { title: "Panel layout", time: "About three days", text: "We draw where each panel sits, how the cables run and where the inverter hangs, then walk you through it on a call.", gets: ["A drawn layout you can mark up", "A fixed price that will not change"] }, { title: "Permits and grid sign-off", time: "Two to four weeks", text: "We file the paperwork with the council and the network operator and chase it, so you only hear from us when it is approved.", gets: ["Every form filed for you", "A date for install day"] }, { title: "Install day", time: "One day", text: "Scaffold goes up early, panels are fixed by lunch and the system is switched on and tested with you before the team leaves.", gets: ["A live system and handover pack", "The monitoring app set up on your phone"] }, ]; const BASE = 24; // pin line of the first card, in px const PEEK = 64; // how much of each earlier card stays visible const FADE = 0.7; // how far a covered card's body fades const AUTO_PX_PER_SEC = 32; // demo scroll speed; 0 turns it off export default function NumberedProcessStepsStackingWithPeekingHeaders() { const reduce = useReducedMotion(); const boxRef = useRef(null); useEffect(() => { const box = boxRef.current; if (!box || reduce) return; const cards = Array.from(box.querySelectorAll(".w4nps-card")); let raf = 0; const paint = () => { raf = 0; const top = box.getBoundingClientRect().top; const cover = cards.map((c) => { const d = c.getBoundingClientRect().top - top - parseFloat(getComputedStyle(c).top); return Math.min(1, Math.max(0, 1 - d / (c.offsetHeight - PEEK))); }); cards.forEach((c, i) => { const under = i + 1 < cards.length ? cover[i + 1] : 0; c.querySelector(".w4nps-body")!.style.opacity = String(1 - FADE * under); c.querySelector(".w4nps-shade")!.style.opacity = String(under); }); box.toggleAttribute("data-scrolled", box.scrollTop > 8); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(paint); }; box.addEventListener("scroll", onScroll, { passive: true }); paint(); let demo = 0, last = 0, pos = box.scrollTop, seen = true, done = !AUTO_PX_PER_SEC; const step = (now: number) => { const dt = last ? Math.min(now - last, 50) : 0; last = now; pos += (AUTO_PX_PER_SEC * dt) / 1000; if (pos >= box.scrollHeight - box.clientHeight) { done = true; demo = 0; return; } box.scrollTop = pos; demo = requestAnimationFrame(step); }; const start = () => { if (!done && seen && !demo) { last = 0; demo = requestAnimationFrame(step); } }; const stop = () => { cancelAnimationFrame(demo); demo = 0; }; const handOver = () => { done = true; stop(); }; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; if (seen) start(); else stop(); }); io.observe(box); const evs = ["wheel", "touchstart", "pointerdown", "keydown"] as const; evs.forEach((ev) => box.addEventListener(ev, handOver, { passive: true })); start(); return () => { stop(); cancelAnimationFrame(raf); io.disconnect(); box.removeEventListener("scroll", onScroll); evs.forEach((ev) => box.removeEventListener(ev, handOver)); }; }, [reduce]); return (

Northpoint Solar

From first visit to switch on

Book a roof survey
    {steps.map((s, i) => (
  1. {String(i + 1).padStart(2, "0")}

    {s.title}

    {s.time}

    {s.time}

    {s.text}

    You get

      {s.gets.map((g) =>
    • {g}
      • )}
    2. ))}
); } ```