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:T6093,import { useEffect, useRef, useState } from "react"; // The page behind the ribbon. An invented florist. const site = { name: "Thistle Lane Flowers", address: "thistlelaneflowers.example", links: ["Bunches", "Weddings", "Visit"], headline: "Flowers cut this morning.", copy: "Hand-tied bunches and weekly vases, made to order in the studio.", cta: "Order a bunch", photo: "https://images.pexels.com/photos/6641386/pexels-photo-6641386.jpeg?auto=compress&cs=tinysrgb&w=900", }; const BLUE = "#4F98FB"; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const W = 760, H = 600; // the stage everything is laid out in const POST_L = 124, POST_R = 636; // the two brass posts const RY = 262; // height the ribbon is tied at const FLOOR = 548; const N = 26; // links in each half of the ribbon const TIE = 13; // the ribbon leaves each knot on its inner side const HALF = (POST_R - POST_L) / 2 - TIE; const SEG = (HALF - 0.6) / N; // cut a touch short: its own weight stretches it into a shallow swag const RIBBON = 46; // width of the satin const PIVOT_Y = 322; // the screw of the scissors const AWAY = 120; // how far the scissors are lowered as they are taken away const FIRST_CUT = 5200, HOLD = 7600, TIED = 4200; // the demo type Pt = { x: number; y: number; px: number; py: number }; type Api = { set: (live: boolean) => void }; type Rgb = [number, number, number]; const mix = (a: Rgb, b: Rgb, t: number): Rgb => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; const css = (c: Rgb) => `rgb(${c[0] | 0},${c[1] | 0},${c[2] | 0})`; const INK: Rgb = [9, 24, 66], WHITE: Rgb = [255, 255, 255]; const FACE_LO: Rgb = [45, 112, 226], FACE_HI: Rgb = [104, 170, 255]; const BACK_LO: Rgb = [30, 78, 170], BACK_HI: Rgb = [58, 122, 220]; // One half of the scissors, drawn pointing up with its screw at 0,0. function Half({ id, front }: { id: string; front: boolean }) { return ( ); } function Post({ x }: { x: number }) { const brass = "linear-gradient(90deg,#4f370a 0%,#a67a22 16%,#f1d587 34%,#fff4c8 42%,#d2a846 56%,#8c661a 80%,#402c07 100%)"; return (

{/* shadow on the floor, foot, pole, collar and ball */}

); } export default function SatinOpeningRibbon() { const stage = useRef(null); const canvas = useRef(null); const tools = useRef<(HTMLDivElement | null)[]>([]); const blades = useRef<(HTMLDivElement | null)[]>([]); const api = useRef(null); const [zoom, setZoom] = useState(1); const [live, setLive] = useState(false); useEffect(() => { const st = stage.current, cv = canvas.current; const ctx = cv?.getContext("2d"); if (!st || !cv || !ctx) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const dpr = Math.min(2, window.devicePixelRatio || 1); cv.width = W * dpr; cv.height = H * dpr; const fit = () => setZoom(Math.max(0.44, Math.min(1.1, (st.clientWidth - 12) / W))); fit(); const ro = new ResizeObserver(fit); ro.observe(st); const rope = (from: number, dir: number): Pt[] => Array.from({ length: N + 1 }, (_, i) => { const u = i / N, x = from + dir * HALF * u, y = RY + 14 * (1 - (1 - u) * (1 - u)); return { x, y, px: x, py: y }; }); const L = rope(POST_L + TIE, 1), R = rope(POST_R - TIE, -1); const s = { joined: true, tying: false, phiL: 0, vL: 0, phiR: 0, vR: 0, open: 1, sy: 0, seq: "idle" as "idle" | "cut" | "tie", t0: 0, live: false, touched: -1e9, clock: 0 }; const step = (dt: number) => { s.clock += dt; for (const [r, dir] of [[L, 1], [R, -1]] as [Pt[], number][]) { for (let i = 1; i <= N; i++) { const p = r[i], vx = (p.x - p.px) * 0.986, vy = (p.y - p.py) * 0.986; p.px = p.x; p.py = p.y; // weight, and a draught that keeps the satin moving p.x += vx + dir * 26 * Math.sin(s.clock * 1.7 + i * 0.5 + dir) * dt * dt; p.y += vy + 1900 * dt * dt; } } const mid = (L[N].x + R[N].x) / 2, midY = (L[N].y + R[N].y) / 2; if (s.tying) for (const r of [L, R]) { r[N].x += ((W / 2) - r[N].x) * 0.07; r[N].y += (RY + 12 - r[N].y) * 0.07; } for (let k = 0; k < 12; k++) { for (const r of [L, R]) { for (let i = 0; i < N; i++) { const a = r[i], b = r[i + 1], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1, f = (d - SEG) / d; if (i === 0) { b.x -= dx * f; b.y -= dy * f; } else { a.x += dx * f * 0.5; a.y += dy * f * 0.5; b.x -= dx * f * 0.5; b.y -= dy * f * 0.5; } } // satin does not kink: every other link resists folding for (let i = 0; i < N - 1; i++) { const a = r[i], b = r[i + 2], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1, f = ((d - SEG * 2) / d) * 0.06; if (d < SEG * 2) { if (i > 0) { a.x += dx * f; a.y += dy * f; } b.x -= dx * f; b.y -= dy * f; } } } if (s.joined) { const x = (L[N].x + R[N].x) / 2, y = (L[N].y + R[N].y) / 2; L[N].x = R[N].x = x; L[N].y = R[N].y = y; } } if (s.tying && Math.abs(mid - W / 2) < 3 && Math.hypot(L[N].x - R[N].x, L[N].y - R[N].y) < 16 && midY < RY + 40) { s.tying = false; s.joined = true; } // each loose half turns over as it falls and comes to rest part twisted const tl = s.joined || s.tying ? 0 : 2.2, tr = s.joined || s.tying ? 0 : -3.5; s.vL += (22 * (tl - s.phiL) - 4.2 * s.vL) * dt; s.phiL += s.vL * dt; s.vR += (22 * (tr - s.phiR) - 4.2 * s.vR) * dt; s.phiR += s.vR * dt; }; const strip = (r: Pt[], phi: number, loose: boolean, other: Pt[]) => { const lx: number[] = [], ly: number[] = [], rx: number[] = [], ry: number[] = [], tw: number[] = []; for (let i = 0; i <= N; i++) { const a = r[Math.max(0, i - 1)], b = i < N ? r[i + 1] : loose ? r[N] : other[N - 1]; let tx = b.x - a.x, ty = b.y - a.y; const d = Math.hypot(tx, ty) || 1; tx /= d; ty /= d; const c = Math.cos(phi * Math.pow(i / N, 1.25)); tw.push(c); const h = (RIBBON / 2) * Math.max(0.09, Math.abs(c)), cutSkew = i === N && loose ? 9 : 0; lx.push(r[i].x - ty * h + tx * cutSkew); ly.push(r[i].y + tx * h + ty * cutSkew); rx.push(r[i].x + ty * h - tx * cutSkew); ry.push(r[i].y - tx * h - ty * cutSkew); } for (let i = 0; i < N; i++) { const c = (tw[i] + tw[i + 1]) / 2, face = c >= 0; const ang = Math.atan2(r[i + 1].y - r[i].y, r[i + 1].x - r[i].x); const sheen = Math.max(0, Math.min(1, 0.5 + 0.34 * Math.cos(2 * ang + 0.7) + 0.16 * Math.sin((N - i) * 0.3 - s.clock * 0.7))); const lit = 0.55 + 0.45 * Math.abs(c); const base = mix(INK, face ? mix(FACE_LO, FACE_HI, sheen) : mix(BACK_LO, BACK_HI, sheen), lit); const g = ctx.createLinearGradient((lx[i] + lx[i + 1]) / 2, (ly[i] + ly[i + 1]) / 2, (rx[i] + rx[i + 1]) / 2, (ry[i] + ry[i + 1]) / 2); g.addColorStop(0, css(mix(base, INK, 0.5))); g.addColorStop(0.07, css(mix(base, INK, 0.12))); g.addColorStop(0.26, css(mix(base, WHITE, face ? 0.16 + 0.5 * sheen : 0.1))); g.addColorStop(0.5, css(base)); g.addColorStop(0.9, css(mix(base, INK, 0.2))); g.addColorStop(1, css(mix(base, INK, 0.55))); ctx.fillStyle = g; ctx.strokeStyle = g; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(lx[i], ly[i]); ctx.lineTo(lx[i + 1], ly[i + 1]); ctx.lineTo(rx[i + 1], ry[i + 1]); ctx.lineTo(rx[i], ry[i]); ctx.closePath(); ctx.fill(); ctx.stroke(); } // woven selvedge down both edges ctx.lineWidth = 1; ctx.strokeStyle = "rgba(226,240,255,0.42)"; for (const [ax, ay, bx, by] of [[lx, ly, rx, ry], [rx, ry, lx, ly]] as number[][][]) { ctx.beginPath(); for (let i = 0; i <= N; i++) { const x = ax[i] + (bx[i] - ax[i]) * 0.085, y = ay[i] + (by[i] - ay[i]) * 0.085; if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y); } ctx.stroke(); } }; const draw = () => { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, W, H); // the shadow the ribbon throws on the wall and the page behind it ctx.save(); ctx.shadowColor = "rgba(34,26,10,0.3)"; ctx.shadowBlur = 16 * dpr; ctx.shadowOffsetX = (4000 + 7) * dpr; ctx.shadowOffsetY = 17 * dpr; ctx.lineWidth = RIBBON * 0.72; ctx.lineCap = "butt"; ctx.lineJoin = "round"; ctx.strokeStyle = "#000"; for (const r of [L, R]) { ctx.beginPath(); r.forEach((p, i) => (i ? ctx.lineTo(p.x - 4000, p.y) : ctx.moveTo(p.x - 4000, p.y))); ctx.stroke(); } ctx.restore(); strip(L, s.phiL, !s.joined, R); strip(R, s.phiR, !s.joined, L); }; const pose = () => { const deg = s.open * 15; tools.current.forEach((el) => { if (el) { el.style.transform = `translateY(${s.sy.toFixed(1)}px)`; el.style.opacity = Math.max(0, 1 - (s.sy / AWAY) * 1.25).toFixed(3); } }); blades.current.forEach((el, i) => { if (el) el.style.transform = `rotate(${(i ? deg : -deg).toFixed(2)}deg)`; }); }; const tell = (now: boolean) => { if (now !== s.live) { s.live = now; setLive(now); } }; const snip = () => { if (!s.joined) return; s.joined = false; s.tying = false; L[N].px += 1.6; L[N].py -= 2.2; R[N].px -= 1.6; R[N].py -= 2.2; s.vL += 5; s.vR -= 6; }; let raf = 0, last = 0, seen = true, timer = 0, begin = () => {}; const ease = (t: number) => { const u = Math.max(0, Math.min(1, t)); return u * u * (3 - 2 * u); }; const frame = (now: number) => { raf = 0; const dt = Math.min(0.034, (now - last) / 1000 || 0.016); last = now; const e = now - s.t0; if (s.seq === "cut") { // open a touch wider, bite, then carry the scissors down and away s.open = e < 150 ? 1 + 0.32 * ease(e / 150) : e < 235 ? 1.32 * (1 - ((e - 150) / 85) ** 2) : 0.04 + 0.3 * ease((e - 420) / 400); if (e >= 235) snip(); s.sy = AWAY * ease((e - 520) / 520); if (e > 1200) s.seq = "idle"; } else if (s.seq === "tie") { s.sy = AWAY * (1 - ease((e - 620) / 520)); s.open = 0.34 + 0.66 * ease((e - 760) / 420); if (e > 1500 && !s.joined) { s.tying = false; s.joined = true; } if (e > 1300 && s.joined) s.seq = "idle"; } else if (s.joined) s.open = 1 + 0.035 * Math.sin(now / 620); const n = Math.max(1, Math.round(dt * 120)); for (let i = 0; i < n; i++) step(1 / 120); draw(); pose(); if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const go = (toLive: boolean) => { if (toLive === s.live) return; tell(toLive); if (reduce) { s.joined = !toLive; s.tying = false; s.sy = toLive ? AWAY : 0; s.open = toLive ? 0.3 : 1; if (!toLive) { const a = rope(POST_L + TIE, 1), b = rope(POST_R - TIE, -1); L.forEach((p, i) => Object.assign(p, a[i])); R.forEach((p, i) => Object.assign(p, b[i])); s.phiL = s.phiR = s.vL = s.vR = 0; } else for (let i = 0; i < 900; i++) step(1 / 120); draw(); pose(); return; } s.seq = toLive ? "cut" : "tie"; s.t0 = performance.now(); if (!toLive) s.tying = true; wake(); }; api.current = { set: (v) => { s.touched = performance.now(); go(v); } }; draw(); pose(); if (!reduce) { wake(); // The demo: cut, hold, tie a new one, wait. It stands down while someone is using it. const loop = (wait: number, cut: boolean) => { timer = window.setTimeout(() => { if (seen && !document.hidden && performance.now() - s.touched > 9000) go(cut); loop(cut ? HOLD : TIED, !cut); }, wait); }; begin = () => loop(FIRST_CUT, true); if (document.readyState === "complete") begin(); else window.addEventListener("load", begin, { once: true }); } const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen && !reduce) wake(); }); io.observe(st); const vis = () => { if (!document.hidden && !reduce) wake(); }; document.addEventListener("visibilitychange", vis); return () => { cancelAnimationFrame(raf); window.clearTimeout(timer); window.removeEventListener("load", begin); api.current = null; ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", vis); }; }, []); const satin = "linear-gradient(90deg,#16357f 0%,#3f84ec 14%,#a6ccff 34%,#4F98FB 52%,#2f6fd6 80%,#122c6e 100%)"; return (

{/* where the wall meets the floor */}

{/* the page, mounted on board and hung on the wall */}

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

{site.headline}

{site.copy}

{site.cta}

{/* back blade, then the ribbon, then the front blade: the satin really is between them */}