62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T2d7d,import { useEffect, useId, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; // The word that is cut through the sheets, and the pictures that pass behind it. const WORD = "BLOOM"; const CAPTION = "Four sheets of card, one word"; const photos = [ { src: "https://images.pexels.com/photos/33966527/pexels-photo-33966527.jpeg?auto=compress&cs=tinysrgb&w=1400", alt: "Pink chrysanthemums in full bloom, photographed close up", }, { src: "https://images.pexels.com/photos/38017379/pexels-photo-38017379.jpeg?auto=compress&cs=tinysrgb&w=1400", alt: "Red poppies and wildflowers in a green meadow", }, { src: "https://images.pexels.com/photos/33978371/pexels-photo-33978371.jpeg?auto=compress&cs=tinysrgb&w=1400", alt: "A lilac chrysanthemum surrounded by bright yellow flowers", }, ]; // Top sheet first. `grow` widens the cut (in drawing units) so each sheet above shows a rim of the one below. const sheets = [ { fill: "#fbfaf5", grow: 27, depth: 0 }, { fill: "#f5f2ea", grow: 18, depth: 1 }, { fill: "#eeeadf", grow: 9, depth: 2 }, { fill: "#e6e1d3", grow: 0, depth: 3 }, ]; const VB_W = 1200; const VB_H = 560; const SECONDS_PER_PHOTO = 4.2; export default function LayeredPaperCutWord() { const reduce = useReducedMotion(); const uid = useId().replace(/[^a-zA-Z0-9]/g, ""); const boxRef = useRef(null); const layerRefs = useRef<(HTMLDivElement | null)[]>([]); const photoRef = useRef(null); const tiltRef = useRef(null); const [shown, setShown] = useState(0); // Pictures change on a timer; with motion reduced the first one stays. useEffect(() => { if (reduce) return; const t = window.setInterval(() => { if (!document.hidden) setShown((n) => (n + 1) % photos.length); }, SECONDS_PER_PHOTO * 1000); return () => window.clearInterval(t); }, [reduce]); // Looking around the box: deeper sheets slide further, the photograph furthest of all. useEffect(() => { const box = boxRef.current; if (!box || reduce) return; let raf = 0; let visible = true; let last = performance.now(); let t = 0; const view = { x: 0, y: 0, vx: 0, vy: 0 }; const pointer = { on: false, x: 0, y: 0 }; const frame = (now: number) => { raf = 0; const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt; // Idle: a slow look from side to side, as if someone were walking past the frame. const tx = pointer.on ? pointer.x : Math.sin(t * 0.9) * 0.85; const ty = pointer.on ? pointer.y : Math.sin(t * 0.55 + 1) * 0.45; // A soft spring, so the sheets lag and settle instead of tracking the pointer rigidly. view.vx += ((tx - view.x) * 60 - view.vx * 13) * dt; view.vy += ((ty - view.y) * 60 - view.vy * 13) * dt; view.x += view.vx * dt; view.y += view.vy * dt; const unit = box.clientWidth / 100; for (let i = 0; i < sheets.length; i++) { const el = layerRefs.current[i]; if (!el) continue; const k = sheets[i].depth * 0.34 * unit; el.style.transform = `translate3d(${(-view.x * k).toFixed(2)}px, ${(-view.y * k).toFixed(2)}px, 0)`; } if (tiltRef.current) { // the whole stack leans a few degrees toward the viewer's side tiltRef.current.style.transform = `perspective(1400px) rotateY(${(view.x * 5).toFixed(2)}deg) rotateX(${(-view.y * 4).toFixed(2)}deg)`; } if (photoRef.current) { const k = 2.3 * unit; photoRef.current.style.transform = `translate3d(${(-view.x * k).toFixed(2)}px, ${(-view.y * k).toFixed(2)}px, 0)`; } if (visible && !document.hidden) raf = requestAnimationFrame(frame); }; const start = () => { if (!raf && visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const io = new IntersectionObserver(([en]) => { visible = en.isIntersecting; start(); }); io.observe(box); const onVis = () => start(); document.addEventListener("visibilitychange", onVis); const move = (ev: PointerEvent) => { const r = box.getBoundingClientRect(); pointer.on = true; pointer.x = Math.max(-1, Math.min(1, ((ev.clientX - r.left) / r.width) * 2 - 1)); pointer.y = Math.max(-1, Math.min(1, ((ev.clientY - r.top) / r.height) * 2 - 1)); }; const leave = () => { pointer.on = false; }; box.addEventListener("pointermove", move); box.addEventListener("pointerdown", move); box.addEventListener("pointerleave", leave); box.addEventListener("pointercancel", leave); start(); return () => { cancelAnimationFrame(raf); io.disconnect(); document.removeEventListener("visibilitychange", onVis); box.removeEventListener("pointermove", move); box.removeEventListener("pointerdown", move); box.removeEventListener("pointerleave", leave); box.removeEventListener("pointercancel", leave); }; }, [reduce]); return (

{/* The word itself, for screen readers and search. The cut sheets below are decoration. */}

{WORD.charAt(0) + WORD.slice(1).toLowerCase()}

{/* shadow the whole stack throws on the table */}

{/* the edges of the lower sheets, seen along the bottom of the stack */} {[3, 2, 1].map((n) => (

))}

{/* the photograph at the back of the box */}

{photos.map((p, i) => ( {p.alt}

))} {/* the sheets, deepest first so the top sheet is painted last */} {[...sheets].reverse().map((s) => { const i = sheets.indexOf(s); const maskId = `${uid}-cut-${i}`; const grainId = `${uid}-grain-${i}`; const lightId = `${uid}-light-${i}`; return (

{ layerRefs.current[i] = el; }} aria-hidden="true" className="absolute -inset-[4%] will-change-transform" style={{ filter: i === 0 ? "drop-shadow(0 0.2cqw 0.2cqw rgba(38,30,18,0.34)) drop-shadow(0 0.95cqw 1.05cqw rgba(38,30,18,0.3))" : "drop-shadow(0 0.2cqw 0.2cqw rgba(38,30,18,0.36)) drop-shadow(0 0.85cqw 0.95cqw rgba(38,30,18,0.32))", }} >

); })} {/* a soft bevel around the top sheet */}

{CAPTION}

); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L62",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/we-inc/layered-paper-cut-word-with-a-photograph-drifting-behind-the-letters.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]