60: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"] 61:T6366,import { useCallback, useEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react"; // What is locked inside, and the three numbers that open it. const CODE = "VAULT-20"; const OFFER = "20% off your first order"; const SMALL = "One use per basket. Ends Sunday."; const COMBO = [24, 68, 37]; const MAKER = "Halden & Pryce"; const SWING = 108; // how far the door opens, in degrees const BODY = 420; // the safe is built at this size and scaled to fit const STEP = 3.6; // degrees per number on a 100 number dial const read = (turn: number) => (((Math.round(-turn / STEP) % 100) + 100) % 100); const BRASS = "conic-gradient(from 205deg, #fff1c2, #c99b3c 9%, #6d4a12 20%, #dcb65c 31%, #fff3cc 42%, #b08430 52%, #5e3f0d 63%, #d5ad52 76%, #f6dc93 88%, #fff1c2)"; const STEEL = "conic-gradient(from 205deg, #ffffff, #aab2bb 9%, #4c545d 20%, #c4cbd2 31%, #ffffff 42%, #98a1aa 52%, #3d444c 63%, #b9c0c8 76%, #e9edf0 88%, #ffffff)"; const ENAMEL = "linear-gradient(150deg, #3d4f5f 0%, #2b3946 34%, #1d2731 70%, #151c24 100%)"; export default function SteelSafePromoReveal() { const [turn, setTurn] = useState(-COMBO[2] * STEP); const [set, setSet] = useState(3); // how many numbers are in const [lever, setLever] = useState(true); const [open, setOpen] = useState(true); const [mode, setMode] = useState<"none" | "drag" | "snap" | "auto">("none"); const [copied, setCopied] = useState(false); const [scale, setScale] = useState(1); const stage = useRef(null); const dial = useRef(null); const turnRef = useRef(turn); const drag = useRef({ on: false, last: 0 }); const timers = useRef([]); const touched = useRef(false); turnRef.current = turn; const later = (ms: number, fn: () => void) => { timers.current.push(window.setTimeout(fn, ms)); }; const clear = () => { timers.current.forEach((t) => window.clearTimeout(t)); timers.current = []; }; const lock = useCallback((instant: boolean) => { setMode(instant ? "none" : "auto"); setOpen(false); setCopied(false); setSet(0); const home = Math.round(turnRef.current / 360) * 360; if (instant) { setLever(false); setTurn(home); return; } later(620, () => { setLever(false); setTurn(home); }); }, []); // Spin to each number in turn, alternating direction like a real combination lock. const enter = useCallback((lead: number) => { let at = turnRef.current; COMBO.forEach((n, i) => { const base = -n * STEP, dir = i % 2 ? -1 : 1; let goal = base + Math.round((at - base) / 360) * 360; if (dir > 0 && goal < at + 30) goal += 360; if (dir < 0 && goal > at - 30) goal -= 360; at = goal; later(lead + i * 320, () => { setMode("auto"); setTurn(goal); }); later(lead + i * 320 + 285, () => setSet(i + 1)); }); }, []); // Three numbers in: the lever drops, the bolts draw back and the door swings. useEffect(() => { if (set < 3 || open) return; setLever(true); const id = window.setTimeout(() => setOpen(true), 170); return () => window.clearTimeout(id); }, [set, open]); // Resting on the next number for a moment counts as entering it. useEffect(() => { if (open || set >= 3 || mode === "auto" || mode === "none" || read(turn) !== COMBO[set]) return; const id = window.setTimeout(() => setSet((s) => s + 1), mode === "drag" ? 520 : 380); return () => window.clearTimeout(id); }, [turn, set, open, mode]); useEffect(() => { const el = stage.current; if (!el) return; const fit = () => setScale(Math.min(1.18, el.clientWidth / 590)); fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect(); }, []); // Left alone it locks itself, dials the combination and opens, again and again. useEffect(() => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const cycle = (first: boolean) => { if (touched.current) return; lock(first); enter(first ? 140 : 1300); later(first ? 9000 : 10200, () => cycle(false)); }; cycle(true); return clear; }, [lock, enter]); const mine = () => { if (!touched.current) { touched.current = true; clear(); } }; const angleAt = (e: ReactPointerEvent) => { const b = (dial.current as HTMLDivElement).getBoundingClientRect(); return (Math.atan2(e.clientY - (b.top + b.height / 2), e.clientX - (b.left + b.width / 2)) * 180) / Math.PI; }; const onDown = (e: ReactPointerEvent) => { if (open) return; mine(); drag.current = { on: true, last: angleAt(e) }; e.currentTarget.setPointerCapture(e.pointerId); setMode("drag"); }; const onMove = (e: ReactPointerEvent) => { if (!drag.current.on) return; const a = angleAt(e); let d = a - drag.current.last; if (d > 180) d -= 360; if (d < -180) d += 360; drag.current.last = a; setTurn((t) => t + d); }; const onUp = () => { if (!drag.current.on) return; drag.current.on = false; setMode("snap"); setTurn((t) => Math.round(t / STEP) * STEP); }; const onKey = (e: ReactKeyboardEvent) => { const by = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : e.key === "PageUp" ? 10 : e.key === "PageDown" ? -10 : 0; if (!by || open) return; e.preventDefault(); mine(); setMode("snap"); setTurn((t) => Math.round(t / STEP) * STEP - by * STEP); }; const solve = () => { mine(); if (open) { lock(false); return; } setSet(0); enter(60); }; const copy = () => { mine(); try { void navigator.clipboard?.writeText(CODE).catch(() => undefined); } catch { /* the code is on screen either way */ } setCopied(true); later(1800, () => setCopied(false)); }; const value = read(turn); const spin = mode === "drag" || mode === "none" ? "none" : mode === "snap" ? "transform 130ms cubic-bezier(.2,.8,.3,1.2)" : "transform 285ms cubic-bezier(.45,.05,.2,1)"; const still = mode === "none"; return (

{/* Shadow on the floor and the two feet. */}

{/* The cabinet. */}

{/* Inside. */}

{/* Top shelf with banded bundles of invented notes. */}

{[0, 1, 2, 3, 4].map((b) => (

))} {/* The card you came for. */}

Private sale code

{CODE}

{OFFER}

{SMALL}

{/* Hinges, fixed to the cabinet. */} {[70, 300].map((y) => (

))} {/* The door: a front, a back and the thick edge that carries the bolts. */}

{/* Maker's plate. */} {/* Three lenses that light as each number goes in. */}

{COMBO.map((n, i) => ( i ? "steel-safe-promo-code-reveal-lit" : ""}`} style={{ background: set > i ? "radial-gradient(circle at 35% 30%,#f4ffe9,#7fe08a 40%,#1f8f3c)" : "radial-gradient(circle at 35% 30%,#59636d,#1a2027 55%,#0b0f13)", boxShadow: set > i ? "0 0 0 2.5px #11161c,0 0 0 3.5px rgba(255,255,255,.18),0 0 14px 2px rgba(110,230,130,.75)" : undefined, transition: "background 160ms, box-shadow 160ms" }} /> ))}

{/* The dial. */}

{/* Knurled knob: the grip turns, the reflections stay with the room. */}

{/* Lever handle. */}

{/* Back of the door. */}

{["left-3 top-3", "right-3 top-3", "left-3 bottom-3", "right-3 bottom-3"].map((p) => )} {[18, 50, 82].map((y) =>

)}

{/* The edge, with three bolt ends. */}

{open ? ( <>Open / your code is {CODE} ) : ( <> Turn the dial to {COMBO.map((n, i) => ( i ? "line-through opacity-60" : set === i ? "bg-[#3a1a0f] text-[#f6dccf]" : ""}`}>{String(n).padStart(2, "0")} ))} )}

{open ? ( ) : null}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"components/we-inc/steel-safe-promo-code-reveal-with-a-combination-dial-you-turn-and-a-thick-door-that-swings-open.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]