60: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"] 61: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"] 62:T72eb,import { useCallback, useEffect, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; import type { ReactNode } from "react"; /** Everything printed on the carton and packed inside it. */ const parcel = { courier: "Fennick Parcel Co.", tape: "FENNICK PARCEL CO. / PACKED BY HAND / ", order: "Order 48-2217", to: ["Ines Calder", "14 Tannery Row", "Halewick HW3 9QT"], route: "HW3", bay: "07", item: "Fisherman rib jumper", detail: "Marigold lambswool, size M", maker: "Marrow Knitwear", photo: { src: "https://images.pexels.com/photos/1487703/pexels-photo-1487703.jpeg?auto=compress&cs=tinysrgb&w=900", alt: "Close view of a marigold yellow cable knit jumper", tone: "#d99413" }, }; // Design pixels in the carton's own space: x runs along it, y across it, z up off the table. const W = 340; const D = 236; const H = 186; const F = D / 2; // every flap is half the short side, as on a real regular slotted carton const T = 5; // board thickness const TAPE = 46; // tape width const TAB = 58; // how far the tape runs down the end wall const FILL = H - 42; // height of the packed contents const SCENE_W = 900; const SCENE_H = 600; const TURN = 33; const TIP = 54; // resting angles of the four flaps when the box is open, in degrees from closed const BACK_OPEN = 109; const LEFT_OPEN = 116; const FRONT_OPEN = 203; const RIGHT_OPEN = 207; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; // paper fibre for the kraft liner, and a crumpled sheet for the tissue const fibre = svg( "", ); const mottle = svg( "", ); const crumple = svg( "", ); const KRAFT = "#c39a64"; const KRAFT_IN = "#c9a26d"; const INK = "#4a3015"; const RED = "#c5311f"; const TAPE_PAPER = "#efe6d3"; const flutesX = "repeating-linear-gradient(90deg, rgba(255,240,214,0.07) 0 3.5px, rgba(60,34,8,0.07) 3.5px 7px)"; const flutesY = "repeating-linear-gradient(180deg, rgba(255,240,214,0.07) 0 3.5px, rgba(60,34,8,0.07) 3.5px 7px)"; const cutEdgeX = "linear-gradient(180deg, #e2c598 0 1px, rgba(0,0,0,0) 1px 4px, #a98250 4px), repeating-linear-gradient(90deg, #7d5c33 0 1px, #d6b684 1px 2.6px, #9c7747 2.6px 4px)"; const cutEdgeY = "linear-gradient(90deg, #e2c598 0 1px, rgba(0,0,0,0) 1px 4px, #a98250 4px), repeating-linear-gradient(180deg, #7d5c33 0 1px, #d6b684 1px 2.6px, #9c7747 2.6px 4px)"; const board = (ribs: string, base = KRAFT) => ({ backgroundColor: base, backgroundImage: `${ribs}, ${fibre}, ${mottle}`, backgroundSize: "auto, 260px 260px, 400px 400px" }); const barcode = [2, 1, 1, 3, 1, 2, 2, 1, 3, 1, 1, 2, 1, 3, 2, 1, 1, 1, 3, 2, 1, 2, 1, 1, 3, 1, 2, 1, 2, 3, 1, 1, 2, 1]; /** One flap with real thickness: printed outside, plain inside and a fluted cut edge all round. */ function Flap({ w, h, ribs, shade, children }: { w: number; h: number; ribs: string; shade: string; children?: ReactNode }) { return ( <>

{children}

); } function TapePrint({ flip = false }: { flip?: boolean }) { return ( {parcel.tape.repeat(4)} ); } export default function CardboardParcelUnboxing() { const reduce = !!useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const [open, setOpen] = useState(true); const timers = useRef([]); const state = useRef({ paused: false, touched: false }); const flapSpring = { stiffness: 62, damping: 9.5, mass: 1 }; const peel = useMotionValue(1); // 0 = taped shut, 1 = tape off const fBack = useSpring(1, flapSpring); const fFront = useSpring(0.9, { stiffness: 54, damping: 8.5, mass: 1.1 }); const fLeft = useSpring(1, flapSpring); const fRight = useSpring(1, { stiffness: 58, damping: 8.5, mass: 1 }); const tissue = useSpring(0.5, { stiffness: 46, damping: 12 }); const px = useMotionValue(0); const py = useMotionValue(0); const rz = useSpring(useTransform(px, (v) => TURN + v * 5), { stiffness: 50, damping: 14 }); const rx = useSpring(useTransform(py, (v) => TIP - v * 3.5), { stiffness: 50, damping: 14 }); const backT = useTransform(fBack, (v) => `translateZ(${H + T}px) rotateX(${(v * BACK_OPEN).toFixed(2)}deg)`); const frontT = useTransform(fFront, (v) => `translateZ(${H + T}px) rotateX(${(-v * FRONT_OPEN).toFixed(2)}deg)`); const leftT = useTransform(fLeft, (v) => `translateZ(${H}px) rotateY(${(-v * LEFT_OPEN).toFixed(2)}deg)`); const rightT = useTransform(fRight, (v) => `translateZ(${H}px) rotateY(${(v * RIGHT_OPEN).toFixed(2)}deg)`); const frontShade = useTransform(fFront, (v) => clamp((v - 0.55) * 2.2, 0, 1)); const rightShade = useTransform(fRight, (v) => clamp((v - 0.55) * 2.2, 0, 1)); const inside = useTransform(fBack, (v) => clamp(v * 3, 0, 1)); // the tape: a strip stuck across the seam whose free end lifts, folds back and curls as it is pulled const stuck = useTransform(peel, (p) => `inset(0 ${(clamp((p - 0.14) / 0.86, 0, 1) * 100).toFixed(2)}% 0 0)`); const tailT = useTransform(peel, (p) => { const q = clamp((p - 0.14) / 0.86, 0, 1); const a = 90 - clamp(p / 0.3, 0, 1) * 222; return `translate3d(${(W * (1 - q) + (p < 0.14 ? 1 : 0)).toFixed(1)}px, ${D / 2 - TAPE / 2}px, ${H + T + 1}px) rotateY(${a.toFixed(1)}deg)`; }); const tailW = useTransform(peel, (p) => clamp(TAB + W * clamp((p - 0.14) / 0.86, 0, 1), TAB, 132)); const curlT = useTransform(peel, (p) => `rotateY(${(-clamp((p - 0.08) / 0.3, 0, 1) * 52).toFixed(1)}deg)`); const tailO = useTransform(peel, (p) => clamp((0.99 - p) / 0.07, 0, 1)); const offO = useTransform(peel, (p) => clamp((p - 0.9) / 0.1, 0, 1)); const partL = useTransform(tissue, (v) => `translateZ(${FILL + 5}px) rotateY(${(-v * 30).toFixed(1)}deg) scaleX(${(1 - v * 0.68).toFixed(3)})`); const partR = useTransform(tissue, (v) => `translateZ(${FILL + 6}px) rotateY(${(v * 30).toFixed(1)}deg) scaleX(${(1 - v * 0.66).toFixed(3)})`); const play = useCallback( (to: boolean) => { timers.current.forEach((t) => window.clearTimeout(t)); timers.current = []; setOpen(to); if (reduce) { [fBack, fFront, fLeft, fRight, tissue].forEach((m) => m.jump(to ? 1 : 0)); peel.set(to ? 1 : 0); return; } const at = (ms: number, fn: () => void) => timers.current.push(window.setTimeout(fn, ms)); if (to) { animate(peel, 1, { duration: 1.05, ease: [0.35, 0, 0.25, 1] }); at(900, () => fBack.set(1)); at(1040, () => fFront.set(1)); at(1380, () => fLeft.set(1)); at(1480, () => fRight.set(1)); at(1900, () => tissue.set(1)); } else { tissue.set(0); at(380, () => fLeft.set(0)); at(470, () => fRight.set(0)); at(980, () => fBack.set(0)); at(1120, () => fFront.set(0)); at(1900, () => animate(peel, 0, { duration: 0.95, ease: [0.3, 0, 0.2, 1] })); } }, [fBack, fFront, fLeft, fRight, peel, reduce, tissue], ); // self-playing demo: start packed open, then seal it and cut it open again until someone takes over useEffect(() => { if (reduce) { fFront.jump(1); tissue.jump(1); return; } // the last of the unpacking settles as the page loads fFront.set(1); tissue.set(1); const s = state.current; let shut = false; let id = window.setTimeout(function tick() { if (s.touched) return; if (!s.paused && !document.hidden) { shut = !shut; play(!shut); } id = window.setTimeout(tick, shut ? 4300 : 6400); }, 3700); return () => { window.clearTimeout(id); timers.current.forEach((t) => window.clearTimeout(t)); }; }, [fFront, play, reduce, tissue]); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; if (!wrap || !scene) return; const measure = () => { const sc = clamp(wrap.clientWidth / (SCENE_W - 60), 0.42, 1.16); wrap.style.height = `${Math.round(SCENE_H * sc + 70)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); const toggle = () => { state.current.touched = true; play(!open); }; const onMove = (e: React.PointerEvent) => { if (reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); px.set(((e.clientX - r.left) / r.width) * 2 - 1); py.set(((e.clientY - r.top) / r.height) * 2 - 1); }; const p3 = "preserve-3d" as const; return (

(state.current.paused = true)} onPointerLeave={() => { state.current.paused = false; px.set(0); py.set(0); }} className="relative mx-auto w-full overflow-hidden" style={{ height: SCENE_H + 70 }} >

{/* shadows on the table */}

{/* the strip of tape after it has been pulled off, lying on the table */}

{/* floor, then the two inside walls */}

{/* what is packed inside */} {parcel.photo.alt}

{/* the fold of the jumper and the paper band round it */}

{parcel.maker}

{parcel.item}

{parcel.detail}

{/* two sheets of tissue that part and bunch against the ends */}

{/* front wall, printed with handling marks */}

This way up

Fragile, keep dry

Board 32 ECT / single wall

Fennick

Parcel Co.

{/* right end wall */}

Fragile

Handle with care

Gross 0.9 kg

34 x 24 x 19 cm

{/* the two short flaps, folded in first */} {/* the two long flaps that meet under the tape */}

Open this side

Pull the tape, do not cut

Packed
No. 12
Halewick

{/* the courier's label */}

Fennick

Tracked 48

{parcel.to.map((l) => (

{l}

))}

{barcode.map((b, i) => ( ))}

{parcel.route}

{parcel.bay}

Bay

{/* tape across the seam */}

{parcel.order} {parcel.item}, {parcel.courier}

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/corrugated-cardboard-parcel-with-printed-paper-tape-that-peels-back-and-four-flaps-that-fold-open-over-a-folded-jumper.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]