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:T5b2e,import { useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** The sentence that goes in and the page that comes out. `rows` are the bottom edges of the five bands the light paints. */ const site = { sentence: "A florist in Porto that delivers bouquets on Sundays.", brand: "Ramo Flores", links: ["Bouquets", "Weddings", "Visit"], headline: ["Sundays,", "in bloom."], photo: { src: "https://images.pexels.com/photos/31074939/pexels-photo-31074939.jpeg?auto=compress&cs=tinysrgb&w=700", alt: "White tulips wrapped in brown paper in a shaft of sunlight" }, chips: ["Tied by hand", "Seasonal stems", "Porto and Gaia"], cta: "Send a bouquet", note: "Order by Friday noon", }; const BLUE = "#4F98FB"; const INK = "#0B0D12"; // Design pixels; the scene is scaled to fit. const SCENE_W = 900; const SCENE_H = 520; const BEAM_Y = 262; const LENS_X = 232; const PAGE_X = 604; const PAGE_Y = 96; const PAGE_W = 274; const PAGE_H = 334; const ROWS = [0, 42, 138, 238, 286, PAGE_H]; // band edges down the page const TINTS = ["234,243,255", "190,217,254", "140,188,252", "79,152,251", "52,116,224"]; const CX = 372; const CY = 285; const SIDE = 204; const DIM = 0.055; // how much of the page you can make out with the light off const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const ease = (t: number) => 1 - Math.pow(1 - clamp(t, 0, 1), 3); type P = { x: number; y: number }; function cross(p: P, d: P, a: P, b: P): P { const ex = b.x - a.x; const ey = b.y - a.y; const den = d.x * ey - d.y * ex; const t = ((a.x - p.x) * ey - (a.y - p.y) * ex) / (den || 1e-6); return { x: p.x + d.x * t, y: p.y + d.y * t }; } export default function PrismHomepage() { const reduce = useReducedMotion(); const wrapRef = useRef(null); const sceneRef = useRef(null); const canvasRef = useRef(null); const pageRef = useRef(null); const [lit, setLit] = useState(true); const sim = useRef({ on: true, since: -900, level: 0.6, rot: 0, trot: 0, next: 0, held: false, user: false, mask: "", redraw: () => {} }); useEffect(() => { const wrap = wrapRef.current; const scene = sceneRef.current; const canvas = canvasRef.current; const page = pageRef.current; if (!wrap || !scene || !canvas || !page) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const s = sim.current; const DPR = 2; canvas.width = SCENE_W * DPR; canvas.height = SCENE_H * DPR; let raf = 0; let visible = true; let last = performance.now(); s.since = last - 900; s.next = last + 6400; const h = SIDE * 0.866; const motes = Array.from({ length: 44 }, (_, i) => ({ u: (i * 0.618) % 1, v: (i * 0.377 + 0.13) % 1, sp: 0.012 + ((i * 7) % 10) * 0.0022, ph: i * 1.7 })); const measure = () => { const sc = clamp((wrap.clientWidth - 20) / SCENE_W, 0.36, 1.24); 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 geo = (rot: number) => { const th = (rot * Math.PI) / 180; const rotp = (x: number, y: number): P => ({ x: CX + x * Math.cos(th) - y * Math.sin(th), y: CY + x * Math.sin(th) + y * Math.cos(th) }); const A = rotp(0, (-h * 2) / 3); const B = rotp(-SIDE / 2, h / 3); const C = rotp(SIDE / 2, h / 3); const E = cross({ x: LENS_X, y: BEAM_Y }, { x: 1, y: 0 }, A, B); const inside = (6 + rot * 0.7) * (Math.PI / 180); const X = cross(E, { x: Math.cos(inside), y: Math.sin(inside) }, A, C); return { A, B, C, E, X }; }; const X0 = geo(0).X; const draw = (now: number) => { const L = s.level; const { A, B, C, E, X } = geo(s.rot); // where each edge of the fan lands on the page, and how bright each band is const lean = s.rot * 2.3 * (Math.PI / 180); const hits = ROWS.map((r) => { const a = Math.atan2(PAGE_Y + r - X0.y, PAGE_X - X0.x) + lean; return X.y + Math.tan(a) * (PAGE_X - X.x); }); const t = now - s.since; const alpha = TINTS.map((_, i) => (reduce ? (s.on ? 1 : 0) : s.on ? ease((t - 260 - i * 150) / 620) : 1 - ease(t / 320))); // the page is only as visible as the light falling on it const at = (k: number, d: number) => `${(hits[k] - PAGE_Y + d).toFixed(1)}px`; const lv = alpha.map((a) => (DIM + (1 - DIM) * a).toFixed(3)); const stops: string[] = [`rgba(0,0,0,${DIM}) 0px`, `rgba(0,0,0,${DIM}) ${at(0, -14)}`, `rgba(0,0,0,${lv[0]}) ${at(0, -3)}`]; for (let i = 1; i < 5; i++) stops.push(`rgba(0,0,0,${lv[i - 1]}) ${at(i, -5)}`, `rgba(0,0,0,${lv[i]}) ${at(i, 5)}`); stops.push(`rgba(0,0,0,${lv[4]}) ${at(5, 3)}`, `rgba(0,0,0,${DIM}) ${at(5, 14)}`); const mask = `linear-gradient(180deg, ${stops.join(", ")})`; if (mask !== s.mask) { s.mask = mask; page.style.setProperty("-webkit-mask-image", mask); page.style.setProperty("mask-image", mask); } scene.style.setProperty("--L", L.toFixed(3)); ctx.setTransform(DPR, 0, 0, DPR, 0, 0); ctx.clearRect(0, 0, SCENE_W, SCENE_H); ctx.lineCap = "round"; // the beam from the torch to the glass ctx.globalCompositeOperation = "lighter"; const flick = reduce ? 1 : 0.94 + 0.06 * Math.sin(now / 90); for (const [w, a] of [[26, 0.05], [10, 0.14], [3, 0.98]] as const) { ctx.strokeStyle = `rgba(226,238,255,${(a * L * flick).toFixed(3)})`; ctx.lineWidth = w; ctx.beginPath(); ctx.moveTo(LENS_X, BEAM_Y); ctx.lineTo(E.x, E.y); ctx.stroke(); } // a faint reflection thrown off the first face const refl = ctx.createLinearGradient(E.x, E.y, E.x - 70, E.y - 150); refl.addColorStop(0, `rgba(200,222,255,${(0.22 * L).toFixed(3)})`); refl.addColorStop(1, "rgba(200,222,255,0)"); ctx.strokeStyle = refl; ctx.lineWidth = 1.4; ctx.beginPath(); ctx.moveTo(E.x, E.y); ctx.lineTo(E.x - 70, E.y - 150); ctx.stroke(); // the fan for (let i = 0; i < 5; i++) { if (alpha[i] <= 0.004) continue; const g = ctx.createLinearGradient(X.x, 0, PAGE_X, 0); g.addColorStop(0, `rgba(${TINTS[i]},${(0.9 * alpha[i]).toFixed(3)})`); g.addColorStop(0.3, `rgba(${TINTS[i]},${(0.5 * alpha[i]).toFixed(3)})`); g.addColorStop(1, `rgba(${TINTS[i]},${(0.3 * alpha[i]).toFixed(3)})`); ctx.fillStyle = g; ctx.shadowColor = `rgba(${TINTS[i]},${(0.55 * alpha[i]).toFixed(3)})`; ctx.shadowBlur = 36; ctx.beginPath(); ctx.moveTo(X.x, X.y); ctx.lineTo(PAGE_X, hits[i]); ctx.lineTo(PAGE_X, hits[i + 1]); ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0; ctx.strokeStyle = `rgba(${TINTS[i]},${(0.5 * alpha[i]).toFixed(3)})`; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(X.x, X.y); ctx.lineTo(PAGE_X, hits[i]); ctx.stroke(); // the bright edge where this band meets the sheet ctx.strokeStyle = `rgba(${TINTS[i]},${(0.9 * alpha[i]).toFixed(3)})`; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(PAGE_X, hits[i] + 1); ctx.lineTo(PAGE_X, hits[i + 1] - 1); ctx.stroke(); } // dust in the light for (const m of motes) { const u = reduce ? m.u : (m.u + (now / 1000) * m.sp) % 1; const x = X.x + 14 + (PAGE_X - X.x - 18) * u; const k = (x - X.x) / (PAGE_X - X.x); const top = X.y + (hits[0] - X.y) * k; const bot = X.y + (hits[5] - X.y) * k; const v = clamp(m.v + (reduce ? 0 : 0.03 * Math.sin(now / 1700 + m.ph)), 0.02, 0.98); const band = Math.min(4, Math.floor(v * 5)); const tw = reduce ? 0.6 : 0.45 + 0.55 * Math.sin(now / 420 + m.ph) ** 2; ctx.fillStyle = `rgba(240,246,255,${(0.75 * alpha[band] * tw).toFixed(3)})`; ctx.beginPath(); ctx.arc(x, top + (bot - top) * v, 0.9 + (m.ph % 1) * 0.7, 0, 6.3); ctx.fill(); } // the prism: a block of glass with a little depth ctx.globalCompositeOperation = "source-over"; const off = { x: 24, y: -15 }; const back = [A, B, C].map((p) => ({ x: p.x + off.x, y: p.y + off.y })); const path = (pts: P[]) => { ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x, pts[i].y); ctx.closePath(); }; path(back); ctx.fillStyle = "rgba(130,165,235,0.09)"; ctx.fill(); ctx.strokeStyle = "rgba(190,214,255,0.22)"; ctx.lineWidth = 1; ctx.stroke(); // right-hand side face, where the light leaves path([A, C, back[2], back[0]]); const side = ctx.createLinearGradient(A.x, A.y, C.x, C.y); side.addColorStop(0, "rgba(225,238,255,0.42)"); side.addColorStop(0.6, `rgba(120,170,250,${(0.10 + 0.16 * L).toFixed(3)})`); side.addColorStop(1, "rgba(90,130,210,0.06)"); ctx.fillStyle = side; ctx.fill(); // front face path([A, B, C]); const face = ctx.createLinearGradient(B.x, B.y, (A.x + C.x) / 2 + 30, (A.y + C.y) / 2); face.addColorStop(0, "rgba(222,235,255,0.34)"); face.addColorStop(0.42, "rgba(110,140,205,0.10)"); face.addColorStop(0.7, "rgba(60,84,140,0.10)"); face.addColorStop(1, "rgba(170,204,255,0.26)"); ctx.fillStyle = face; ctx.fill(); // facets seen through the glass: the far edges, bent const mid = (p: P, q: P, k: number): P => ({ x: p.x + (q.x - p.x) * k, y: p.y + (q.y - p.y) * k }); path([mid(A, B, 0.34), mid(B, C, 0.3), mid(B, C, 0.52), mid(A, C, 0.2)]); ctx.fillStyle = "rgba(255,255,255,0.055)"; ctx.fill(); path([mid(A, C, 0.62), mid(B, C, 0.78), C]); ctx.fillStyle = "rgba(8,10,18,0.28)"; ctx.fill(); path([B, mid(B, A, 0.2), mid(B, C, 0.16)]); ctx.fillStyle = "rgba(8,10,18,0.22)"; ctx.fill(); ctx.save(); path([A, B, C]); ctx.clip(); ctx.globalCompositeOperation = "lighter"; // light spreading on its way through const thru = ctx.createLinearGradient(E.x, E.y, X.x, X.y); thru.addColorStop(0, `rgba(240,246,255,${(0.9 * L).toFixed(3)})`); thru.addColorStop(1, `rgba(120,176,252,${(0.55 * L).toFixed(3)})`); ctx.fillStyle = thru; const nx = -(X.y - E.y); const ny = X.x - E.x; const nl = Math.hypot(nx, ny) || 1; ctx.beginPath(); ctx.moveTo(E.x, E.y - 1.4); ctx.lineTo(X.x + (nx / nl) * 7, X.y + (ny / nl) * 7); ctx.lineTo(X.x - (nx / nl) * 7, X.y - (ny / nl) * 7); ctx.lineTo(E.x, E.y + 1.4); ctx.closePath(); ctx.fill(); for (const [p, r, a] of [[E, 58, 0.5], [X, 74, 0.6]] as const) { const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r); g.addColorStop(0, `rgba(190,216,255,${(a * L).toFixed(3)})`); g.addColorStop(1, "rgba(190,216,255,0)"); ctx.fillStyle = g; ctx.fillRect(p.x - r, p.y - r, r * 2, r * 2); } // a soft streak of room light lying along the left face const sA = { x: A.x + (B.x - A.x) * 0.12 + 13, y: A.y + (B.y - A.y) * 0.12 + 6 }; const sB = { x: A.x + (B.x - A.x) * 0.8 + 13, y: A.y + (B.y - A.y) * 0.8 + 6 }; ctx.strokeStyle = "rgba(255,255,255,0.10)"; ctx.lineWidth = 9; ctx.beginPath(); ctx.moveTo(sA.x, sA.y); ctx.lineTo(sB.x, sB.y); ctx.stroke(); ctx.restore(); ctx.globalCompositeOperation = "source-over"; // chamfer line just inside the front face const gx = (A.x + B.x + C.x) / 3; const gy = (A.y + B.y + C.y) / 3; path([A, B, C].map((p) => ({ x: gx + (p.x - gx) * 0.84, y: gy + (p.y - gy) * 0.84 }))); ctx.strokeStyle = "rgba(255,255,255,0.16)"; ctx.lineWidth = 1; ctx.stroke(); for (const [p, q] of [[A, back[0]], [C, back[2]], [B, back[1]]] as const) { ctx.strokeStyle = "rgba(200,220,255,0.3)"; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke(); } const edge = (p: P, q: P, c0: string, c1: string, w: number) => { const g = ctx.createLinearGradient(p.x, p.y, q.x, q.y); g.addColorStop(0, c0); g.addColorStop(1, c1); ctx.strokeStyle = g; ctx.lineWidth = w; ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke(); }; edge(A, B, "rgba(255,255,255,1)", "rgba(190,214,255,0.55)", 2.2); edge(A, C, "rgba(255,255,255,0.8)", `rgba(120,176,252,${(0.4 + 0.5 * L).toFixed(3)})`, 1.8); edge(B, C, "rgba(170,198,245,0.35)", "rgba(220,234,255,0.8)", 2); ctx.globalCompositeOperation = "lighter"; for (const [p, r, a] of [[A, 16, 0.5], [E, 12, 0.9 * L], [X, 16, 0.9 * L]] as const) { const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r); g.addColorStop(0, `rgba(255,255,255,${a.toFixed(3)})`); g.addColorStop(1, "rgba(255,255,255,0)"); ctx.fillStyle = g; ctx.fillRect(p.x - r, p.y - r, r * 2, r * 2); } ctx.globalCompositeOperation = "source-over"; }; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; if (reduce) { s.level = s.on ? 1 : 0; s.rot = 0; } else { s.level += ((s.on ? 1 : 0) - s.level) * Math.min(1, dt * 9); const idle = Math.sin(now / 2300) * 0.6; s.rot += (s.trot + idle - s.rot) * Math.min(1, dt * 6); if (!s.user && !s.held && now > s.next) { s.on = !s.on; s.since = now; s.next = now + (s.on ? 7200 : 1100); setLit(s.on); } } draw(now); if (visible && !reduce) raf = requestAnimationFrame(tick); }; s.redraw = () => tick(performance.now()); const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(wrap); raf = requestAnimationFrame(tick); const move = (e: PointerEvent) => { const r = wrap.getBoundingClientRect(); s.trot = clamp(((e.clientY - r.top) / r.height - 0.5) * 2, -1, 1) * 6; }; const leave = () => { s.trot = 0; }; wrap.addEventListener("pointermove", move); wrap.addEventListener("pointerdown", move); wrap.addEventListener("pointerleave", leave); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); wrap.removeEventListener("pointermove", move); wrap.removeEventListener("pointerdown", move); wrap.removeEventListener("pointerleave", leave); }; }, [reduce]); const toggle = () => { const s = sim.current; s.on = !s.on; s.since = performance.now(); s.user = !s.on; s.next = s.since + 9000; setLit(s.on); if (reduce) s.redraw(); }; const hold = (v: boolean) => () => { sim.current.held = v; if (!v) sim.current.next = performance.now() + 3000; }; const sans = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const row = (i: number) => ({ top: ROWS[i], height: ROWS[i + 1] - ROWS[i] }); return (

{/* light bouncing off the sheet into the room */}

{/* the torch that carries the sentence */}

{site.sentence}

{/* the sheet the light falls on */}

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

{site.headline.map((l) => ( {l} ))}

{site.cta} {site.note}

{/* the light thins out as it crosses the sheet */}

One sentence in {site.sentence}

); } 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/glass-prism-that-splits-a-beam-carrying-one-sentence-into-a-homepage-made-of-light.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]