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:T568d,import { useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; const BLUE = "#4F98FB"; const INK = "#0B0D12"; const PAPER = "#F8F6F1"; const NIGHT = "#12151C"; const sans = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const site = { brand: "Saltline Surf School", links: ["Lessons", "Camps", "Find us"], plain: ["Surf", "lessons in", "Ericeira."], bold: ["Stand up on", "your first", "wave."], sub: "Small groups, soft boards and warm wetsuits, all year.", cta: "Book a lesson", beach: { src: "https://images.pexels.com/photos/5689762/pexels-photo-5689762.jpeg?auto=compress&cs=tinysrgb&w=600", tone: "#9db4c4" }, wave: { src: "https://images.pexels.com/photos/14793463/pexels-photo-14793463.jpeg?auto=compress&cs=tinysrgb&w=600", tone: "#7f9c9a" }, }; /** The history, oldest first. Each sentence produced the leaf with the same number. */ const edits = ["First draft.", "Make the headline bolder.", "Use the photo of the wave.", "Give it a dark header.", "Make the button blue."]; const N = edits.length; // Design pixels. The scene is scaled to fit its frame. const W = 500; const H = 360; const HALF = H / 2; const BOX_W = 596; const BOX_H = 470; const SCENE_W = 900; const SCENE_H = 530; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /** The page after `i` edits. */ function Face({ i }: { i: number }) { const band = i >= 3; const bold = i >= 1; const photo = i >= 2 ? site.wave : site.beach; return (

{site.brand} {site.links.map((l) => ( {l} ))}

{(bold ? site.bold : site.plain).map((l) => ( {l} ))}

{site.sub}

= 4 ? BLUE : INK, color: i >= 4 ? INK : "#ffffff" }}> {site.cta}

); } /** One leaf: the upper or lower half of a page, printed on a thin card. */ function Leaf({ i, lower, flip }: { i: number; lower?: boolean; flip?: boolean }) { return ( ); } const all = Array.from({ length: N }, (_, i) => i); export default function SplitFlapUndoBoard() { const reduce = useReducedMotion(); const stageRef = useRef(null); const wrapRef = useRef(null); const sceneRef = useRef(null); const boxRef = useRef(null); const flapRef = useRef(null); const knobRef = useRef(null); const [ver, setVer] = useState(N - 1); const api = useRef<{ step: (d: number) => void } | null>(null); useEffect(() => { const stage = stageRef.current, wrap = wrapRef.current, scene = sceneRef.current, box = boxRef.current, flap = flapRef.current, knob = knobRef.current; if (!stage || !wrap || !scene || !box || !flap || !knob) return; const q = (sel: string) => Array.from(box.querySelectorAll(sel)); const tops = q("[data-top]"), bots = q("[data-bot]"), fronts = q("[data-front]"), backs = q("[data-back]"), lamps = q("[data-lamp]"), above = q("[data-above]"), below = q("[data-below]"); const shadeF = box.querySelector("[data-shade-front]"), shadeB = box.querySelector("[data-shade-back]"), castT = box.querySelector("[data-cast-top]"), castB = box.querySelector("[data-cast-bot]"); if (!shadeF || !shadeB || !castT || !castB) return; const s = { pos: N - 1, v: 0, target: N - 1, rate: 1.7, kick: 0, vkick: 0, px: 0, py: 0, tpx: 0, tpy: 0, user: -1e9, demoT: performance.now() + 900, demoDir: -1, shown: N - 1, lo: -1 }; let raf = 0; let visible = true; let last = performance.now(); const measure = () => { const sc = clamp(wrap.clientWidth / 760, 0.42, 1.06); wrap.style.height = `${Math.round(SCENE_H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const paint = () => { const lo = clamp(Math.floor(s.pos), 0, N - 2); const a = clamp(s.pos - lo, 0, 1); const ang = 180 * a; if (lo !== s.lo) { s.lo = lo; // upper window shows the newer page, lower window the older one, and the leaf between them carries one half of each tops.forEach((el, i) => (el.style.visibility = i === lo + 1 ? "visible" : "hidden")); bots.forEach((el, i) => (el.style.visibility = i === lo ? "visible" : "hidden")); fronts.forEach((el, i) => (el.style.visibility = i === lo ? "visible" : "hidden")); backs.forEach((el, i) => (el.style.visibility = i === lo + 1 ? "visible" : "hidden")); } flap.style.transform = `translateZ(1.5px) rotateX(${(-ang).toFixed(2)}deg)`; const mid = Math.sin((ang * Math.PI) / 180); shadeF.style.opacity = (ang < 90 ? mid * 0.5 : 0).toFixed(3); shadeB.style.opacity = (ang >= 90 ? mid * 0.38 : 0).toFixed(3); castT.style.opacity = (a > 0.001 && a < 0.5 ? 0.42 * (1 - a * 2) + 0.12 : a >= 0.5 && a < 0.999 ? 0.12 * (1 - a) * 2 : 0).toFixed(3); castB.style.opacity = (ang > 90 && a < 0.999 ? 0.6 * (1 - mid) + 0.1 : ang > 4 && ang <= 90 ? 0.1 * mid : 0).toFixed(3); knob.style.transform = `rotate(${(s.pos * 67).toFixed(2)}deg)`; lamps.forEach((el, i) => el.style.setProperty("--lit", clamp(s.pos - i + 1, 0, 1).toFixed(3))); const now = Math.round(s.pos); above.forEach((el, i) => (el.style.opacity = i < N - 1 - now ? "1" : "0")); below.forEach((el, i) => (el.style.opacity = i < now ? "1" : "0")); if (now !== s.shown) { s.shown = now; setVer(now); } }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; // with nobody touching it, the board rewinds to the first draft and then lets the edits fall back in if (!reduce && now - s.user > 7000 && s.pos === s.target && now > s.demoT) { if (s.demoDir < 0) { s.target = 0; s.rate = 1.55; } else s.target = N - 1; s.demoDir = -s.demoDir; } if (reduce) s.pos = s.target; else if (s.pos > s.target) { // undo: the spindle is driven backwards at a steady rate and each leaf is carried up and over const before = Math.ceil(s.pos - 1e-6); s.pos = Math.max(s.target, s.pos - s.rate * dt); if (Math.ceil(s.pos - 1e-6) < before || s.pos === s.target) s.vkick += 46; if (s.pos === s.target) s.demoT = now + 1500; s.v = 0; } else if (s.pos < s.target) { // redo: a leaf is let go and falls under its own weight const edge = Math.floor(s.pos + 1e-6) + 1; s.v += 26 * dt; s.pos += (0.7 + s.v) * dt; if (s.pos >= edge) { s.pos = edge; s.v = 0; s.vkick -= 80; if (s.pos === s.target) s.demoT = now + 2600; } } paint(); s.vkick += (-520 * s.kick - 20 * s.vkick) * dt; s.kick += s.vkick * dt; s.px += (s.tpx - s.px) * 0.07; s.py += (s.tpy - s.py) * 0.07; const idle = reduce ? 0 : Math.sin(now / 2600) * 2.4; box.style.transform = `translateY(${(-s.kick).toFixed(2)}px) rotateX(${(6 - s.py * 4).toFixed(2)}deg) rotateY(${(-15 + s.px * 7 + idle).toFixed(2)}deg)`; if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(stage); paint(); raf = requestAnimationFrame(tick); const move = (e: PointerEvent) => { const r = stage.getBoundingClientRect(); s.tpx = clamp(((e.clientX - r.left) / r.width - 0.5) * 2, -1, 1); s.tpy = clamp(((e.clientY - r.top) / r.height - 0.5) * 2, -1, 1); }; const leave = () => { s.tpx = 0; s.tpy = 0; }; stage.addEventListener("pointermove", move); stage.addEventListener("pointerleave", leave); api.current = { step: (d) => { s.user = performance.now(); s.rate = 4.6; s.target = clamp(Math.round(s.target) + d, 0, N - 1); s.demoDir = s.target === 0 ? 1 : -1; }, }; return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); stage.removeEventListener("pointermove", move); stage.removeEventListener("pointerleave", leave); api.current = null; }; }, [reduce]); const steel = "linear-gradient(180deg, #f4f5f7 0%, #b9bdc4 38%, #7d828b 62%, #d5d8dd 100%)"; const pill = "inline-flex h-12 items-center gap-2 rounded-full px-6 text-[14px] font-extrabold tracking-[-0.01em] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0B0D12] focus-visible:ring-offset-2 focus-visible:ring-offset-[#4F98FB] disabled:opacity-40"; return (

{/* shadow on the floor */}

{/* the depth of the case */} {[16, 14, 12, 10, 8, 6, 4, 2].map((i) => (

13 ? "#020304" : i % 4 ? "#0a0c11" : "#161a23", transform: `translateZ(${-i * 4}px)` }} /> ))} {/* the knob on the spindle, half hidden behind the case */}

{/* the face of the case */}

{/* the well the leaves sit in */}

{/* leaves waiting above and leaves already turned below: the history you can see */} {[0, 1, 2, 3].map((k) => (

))} {[0, 1, 2, 3].map((k) => (

))}

{/* upper window */}

{all.map((i) => (

))}

{/* lower window */}

{all.map((i) => (

))}

{/* the leaf in the air: front is the upper half of the older page, back is the lower half of the newer one */}

{all.map((i) => (

))}

{all.map((i) => (

))}

{/* the spindle line and its two pins */}

{[0, W - 13].map((x) => (

))} {[-13, W - 5].map((x) => (

))}

{/* one lamp per version on the lip of the case */}

{all.map((i) => ( ))}

History

{ver === 0 ? "start" : `edit ${ver} of ${N - 1}`} {edits[ver]}

); } 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/undo-history-split-flap-board-that-rewinds-a-homepage-one-leaf-at-a-time.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]