61: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"] 62: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"] 63:T4d4f,import { useEffect, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent, ReactNode } from "react"; import { motion, useReducedMotion, useSpring, useTransform } from "framer-motion"; // The sheets, bottom to top. The names are printed beside each one while the stack is apart. const layers = ["Shell", "Sky", "Hills", "Ground", "Hero", "Score", "Glass"]; const GAP = 60; // distance between sheets when the stack is apart const TILT = 57, TURN = -33; // the angle the open stack is viewed from, in degrees const BLUE = "#4F98FB"; const PW = 250, PH = 500; // phone size in design pixels const SW = PW - 14; // screen width const GROUND = 104, HERO = 24, HX = 52, OBW = 14, OBH = 24; const SPEED = 118, JUMP = 540, GRAV = 1650; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const screenBox = "absolute inset-[7px] overflow-hidden rounded-[37px]"; function Sheet({ i, open, glass, children }: { i: number; open: boolean; glass?: boolean; children: ReactNode }) { const reduce = useReducedMotion(); const target = open ? (i - (layers.length - 1) / 2) * GAP : i * 0.6; const spring = useSpring(target, { stiffness: 150, damping: 14, mass: 0.9 }); const now = useRef({ open, target }); now.current = { open, target }; // While closing, a sheet may not bounce past its resting place, or it would pass through its neighbour. const z = useTransform(spring, (v) => (now.current.open ? v : i < layers.length / 2 ? Math.min(v, now.current.target) : Math.max(v, now.current.target))); useEffect(() => { if (reduce) { spring.jump(target); return; } const id = window.setTimeout(() => spring.set(target), (open ? layers.length - 1 - i : i) * 75); return () => window.clearTimeout(id); }, [target, open, reduce, i, spring]); return ( {glass && (

{/* three stacked outlines read as the thickness of the sheet */}

)} {children} ); } export default function PhoneGameBuiltFromGlassLayers() { const reduce = useReducedMotion(); const root = useRef(null); const hero = useRef(null); const ground = useRef(null); const obstacles = useRef<(HTMLDivElement | null)[]>([]); const coins = useRef<(HTMLDivElement | null)[]>([]); const ptr = useRef({ x: 0, y: 0 }); const tapAt = useRef(-1e9); const wantJump = useRef(false); const [open, setOpen] = useState(true); const [auto, setAuto] = useState(true); const [score, setScore] = useState(0); const [scale, setScale] = useState(1); const openRef = useRef(true); openRef.current = open; const rx = useSpring(TILT, { stiffness: 90, damping: 15 }); const ry = useSpring(0, { stiffness: 90, damping: 15 }); const rz = useSpring(TURN, { stiffness: 90, damping: 15 }); const floor = useSpring(-((layers.length - 1) / 2) * GAP - 70, { stiffness: 90, damping: 16 }); useEffect(() => { const el = root.current; if (!el) return; const fit = () => setScale(Math.min(1.06, (el.clientWidth - 12) / 584)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); // With motion reduced the finished phone is shown and nothing loops. useEffect(() => { if (reduce) setOpen(false); }, [reduce]); useEffect(() => { if (!reduce) { floor.set(open ? -((layers.length - 1) / 2) * GAP - 70 : -36); return; } rx.jump(open ? TILT : 0); rz.jump(open ? TURN : 0); ry.jump(0); floor.jump(open ? -((layers.length - 1) / 2) * GAP - 70 : -36); }, [open, reduce, rx, ry, rz, floor]); // Left alone, the stack presses together, plays for a while and comes apart again. useEffect(() => { if (reduce || !auto) return; const id = window.setTimeout(() => setOpen((o) => !o), open ? 4400 : 6200); return () => window.clearTimeout(id); }, [open, auto, reduce]); // One loop runs the little game and the slow sway of the stack. useEffect(() => { if (reduce) return; const el = root.current; if (!el) return; const g = { y: 0, vy: 0, last: 0, scroll: 0, obs: [250, 430, 640], coin: [true, true, true], hurt: 0 }; let raf = 0, seen = true, seed = 11; const rand = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; const frame = (now: number) => { raf = 0; if (!g.last) g.last = now; const dt = Math.min(0.033, (now - g.last) / 1000); g.last = now; g.scroll += SPEED * dt; const self = now - tapAt.current > 5000; // the game plays itself until someone taps for (let i = 0; i < g.obs.length; i++) { g.obs[i] -= SPEED * dt; if (g.obs[i] < -40) { g.obs[i] = Math.max(...g.obs, SW) + 150 + rand() * 110; g.coin[i] = true; } const gap = g.obs[i] - (HX + HERO); if (self && g.y === 0 && gap > 0 && gap < 30) g.vy = JUMP; if (g.obs[i] < HX + HERO - 5 && g.obs[i] + OBW > HX + 5 && g.y < OBH - 6 && now > g.hurt) g.hurt = now + 700; if (g.coin[i] && Math.abs(g.obs[i] + OBW / 2 - (HX + HERO / 2)) < 15 && g.y > 34) { g.coin[i] = false; setScore((s) => (s + 1) % 1000); } } if (wantJump.current && g.y === 0) g.vy = JUMP; wantJump.current = false; if (g.y > 0 || g.vy > 0) { g.vy -= GRAV * dt; g.y = Math.max(0, g.y + g.vy * dt); if (g.y === 0) g.vy = 0; } if (hero.current) { const stretch = 1 + Math.max(-0.16, Math.min(0.2, g.vy / 2800)); hero.current.style.transform = `translate3d(${HX}px,${-g.y}px,0) scale(${2 - stretch},${stretch})`; hero.current.style.opacity = now < g.hurt && Math.floor(now / 90) % 2 === 0 ? "0.25" : "1"; } if (ground.current) ground.current.style.backgroundPositionX = `${-g.scroll % 48}px`; g.obs.forEach((x, i) => { const o = obstacles.current[i], c = coins.current[i]; if (o) o.style.transform = `translate3d(${x}px,0,0)`; if (c) { c.style.transform = `translate3d(${x + OBW / 2 - 6}px,${Math.sin(now / 260 + i) * 3}px,0)`; c.style.opacity = g.coin[i] ? "1" : "0"; } }); const o = openRef.current; rz.set((o ? TURN + Math.sin(now / 2100) * 4 : 0) + ptr.current.x * (o ? 14 : 0)); rx.set((o ? TILT : 0) - ptr.current.y * (o ? 9 : 7)); ry.set(o ? 0 : ptr.current.x * 11 + Math.sin(now / 2400) * 2.5); if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf) { g.last = 0; raf = requestAnimationFrame(frame); } }; wake(); const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen) wake(); }); io.observe(el); const onVis = () => { if (!document.hidden) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { cancelAnimationFrame(raf); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, [reduce, rx, ry, rz]); const onMove = (e: ReactPointerEvent) => { if (e.pointerType === "touch") return; const b = e.currentTarget.getBoundingClientRect(); ptr.current = { x: (e.clientX - b.left) / b.width - 0.5, y: (e.clientY - b.top) / b.height - 0.5 }; }; const jump = () => { tapAt.current = performance.now(); wantJump.current = true; }; const toggle = () => { setAuto(false); setOpen((o) => !o); }; return (

{ ptr.current = { x: 0, y: 0 }; }} style={{ fontFamily: FONT }} className="relative flex min-h-[640px] w-full items-center justify-center overflow-hidden bg-[#0B0D12] bg-[radial-gradient(70%_60%_at_50%_44%,#1a2233_0%,#0f131c_45%,#0B0D12_78%)] sm:min-h-[800px]" >

{/* what is inside the shell: a cell, a board and one lamp */}

Cell

{[0, 1, 2].map((i) => (

{ obstacles.current[i] = el; }} style={{ bottom: GROUND, width: OBW, height: OBH, transform: `translate3d(${[150, 330, 540][i]}px,0,0)` }} className="absolute left-0 rounded-t-[4px] bg-[#4F98FB] shadow-[inset_-4px_0_0_rgba(11,13,18,0.28),inset_0_3px_0_rgba(255,255,255,0.45)]" /> ))} {[0, 1, 2].map((i) => (

{ coins.current[i] = el; }} style={{ bottom: GROUND + 68, transform: `translate3d(${[151, 331, 541][i]}px,0,0)` }} className="absolute left-0 h-3 w-3 rounded-full border-[3px] border-[#F6F4EF] shadow-[0_0_10px_rgba(246,244,239,0.6)]" /> ))}

Rings {String(score).padStart(3, "0")}

Tap to jump

{open ? "Seven layers shown apart." : "Layers pressed together into one screen."}

); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/phone-game-built-from-stacked-glass-layers-that-press-together-into-a-playable-screen.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]