60: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"] 61: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"] 62:T5c2a,import { useEffect, useRef } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent } from "react"; import { useReducedMotion } from "framer-motion"; // The words on the page and on the bottle. The headline is set twice round the ring so half of it always faces you. const hero = { maker: "Halden Grove", note: "Early harvest, 500 ml", headline: "Worth the wait", line: "One grove, picked green in the first week of November and pressed the same night.", button: "Reserve a bottle", label: { top: "EARLY HARVEST", name: "Halden", sub: "GROVE", foot: "EXTRA VIRGIN OLIVE OIL", lot: "Lot 14 · 500 ml" }, back: ["Pressed within six hours", "of picking. Unfiltered.", "Keep cool and out of", "the light. Shake gently."], }; /** How far the camera looks down on the bottle. It bends the label edges, the base and the ring of type together. */ const TILT = 0.15; /** Seconds for one unaided turn of the bottle, and of the ring of type going the other way. */ const BOTTLE_TURN = 26; const RING_TURN = 46; /** Bottle height in units of its own body radius. */ const TALL = 7.2; const LABEL_TOP = 4.25; const LABEL_TALL = 2.3; const TEX_W = 1536; const TEX_H = Math.round((TEX_W * LABEL_TALL) / (Math.PI * 2)); const step = (a: number, b: number, v: number) => { const t = Math.min(1, Math.max(0, (v - a) / (b - a))); return t * t * (3 - 2 * t); }; /** Radius of the bottle at a height measured down from the top of the cap, both in body radii. */ function profile(y: number) { if (y < 0 || y > TALL) return 0; if (y < 0.82) return 0.375 - 0.05 * Math.pow(Math.max(0, 1 - y / 0.07), 2); if (y < 0.98) return 0.405; if (y < 1.9) return 0.315 + 0.03 * ((y - 0.98) / 0.92); if (y < 3.0) { const t = (y - 1.9) / 1.1; return 0.345 + 0.655 * Math.sqrt(1 - (1 - t) * (1 - t)); } if (y < 7.0) return 1; const t = (y - 7.0) / 0.2; return 0.9 + 0.1 * Math.sqrt(Math.max(0, 1 - t * t)); } /** What the glass mirrors: a tall window on the left with a glazing bar, a dim card on the right, a pale ceiling. */ function studio(rx: number, ry: number, rz: number) { const az = (Math.atan2(rx, rz) * 180) / Math.PI; const el = (Math.asin(Math.max(-1, Math.min(1, -ry))) * 180) / Math.PI; let light = 0.5 + 0.35 * step(-40, 60, el); const tall = step(-34, -22, el) * (1 - step(62, 80, el)); const win = step(-74, -69, az) * (1 - step(-33, -29, az)) * tall; const bar = 1 - 0.85 * step(-56, -54.5, az) * (1 - step(-51.5, -50, az)); light += 15 * win * bar; light += 2.4 * step(36, 44, az) * (1 - step(70, 82, az)) * tall; light += 5 * step(96, 104, az) * (1 - step(118, 126, az)) * tall; light += 1.6 * step(58, 78, el); return light; } /** Paints the bottle once, without its paper: black capsule, dark green glass, reflections and its shadow on the floor. */ function paintBottle(cv: HTMLCanvasElement, R: number, cx: number, top: number) { const ctx = cv.getContext("2d"); if (!ctx) return; const W = cv.width; const H = cv.height; ctx.clearRect(0, 0, W, H); // Shadow first: a tight dark pool under the base and a long soft one thrown to the right, away from the window. const floor = top + (TALL + TILT * 0.45) * R; const pool = (dx: number, sx: number, sy: number, a: number) => { ctx.save(); ctx.translate(cx + dx * R, floor); ctx.scale(sx, sy); const g = ctx.createRadialGradient(0, 0, 0, 0, 0, R); g.addColorStop(0, `rgba(58,44,8,${a})`); g.addColorStop(0.55, `rgba(58,44,8,${a * 0.45})`); g.addColorStop(1, "rgba(58,44,8,0)"); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }; pool(1.5, 2.9, 0.2, 0.3); pool(0.5, 1.7, 0.2, 0.42); pool(0.05, 1.12, 0.17, 0.85); // Light that has come through the oil lands as a green smear inside the long shadow. ctx.save(); ctx.translate(cx + 1.25 * R, floor + 0.02 * R); ctx.scale(1.3, 0.1); const through = ctx.createRadialGradient(0, 0, 0, 0, 0, R); through.addColorStop(0, "rgba(150,160,30,0.5)"); through.addColorStop(1, "rgba(150,160,30,0)"); ctx.fillStyle = through; ctx.beginPath(); ctx.arc(0, 0, R, 0, Math.PI * 2); ctx.fill(); ctx.restore(); const x0 = Math.max(0, Math.floor(cx - R - 2)); const x1 = Math.min(W, Math.ceil(cx + R + 2)); const y0 = Math.max(0, Math.floor(top - TILT * R - 2)); const y1 = Math.min(H, Math.ceil(top + (TALL + TILT) * R + 2)); const img = ctx.getImageData(x0, y0, x1 - x0, y1 - y0); const d = img.data; const capR = profile(0.1); for (let py = y0; py < y1; py++) { for (let px = x0; px < x1; px++) { const xs = (px + 0.5 - cx) / R; const ys = (py + 0.5 - top) / R; // Each ring of the bottle is seen as a shallow ellipse, so find the height whose front edge passes through this pixel. let y = ys; for (let k = 0; k < 4; k++) { const r = profile(y); y = ys - TILT * Math.sqrt(Math.max(0, r * r - xs * xs)); } const r = profile(y); let cr = 0; let cg = 0; let cb = 0; let cover = 0; if (y >= 0 && y <= TALL && Math.abs(xs) < r) { cover = Math.min(1, (r - Math.abs(xs)) * R); const slope = (profile(y + 0.012) - profile(y - 0.012)) / 0.024; const side = xs / r; const facing = Math.sqrt(Math.max(0, 1 - side * side)); const len = Math.sqrt(1 + slope * slope); const nx = side / len; const ny = -slope / len; const nz = facing / len; // Mirror the view direction in the surface to see which part of the studio this point shows. const env = studio(2 * nz * nx, 2 * nz * ny, 2 * nz * nz - 1); const fres = 0.045 + 0.955 * Math.pow(1 - nz, 5); if (y < 0.98) { // Matte black capsule with fine vertical ribs and one soft sheen. const rib = 0.86 + 0.14 * Math.sin(Math.asin(side) * 46); const lit = 0.3 + 0.9 * Math.max(0, nx * -0.5 + ny * -0.42 + nz * 0.76); const sheen = Math.pow(Math.max(0, nx * -0.36 + ny * -0.3 + nz * 0.88), 26) * 70; const v = 24 * lit * rib + sheen + env * fres * 3; cr = v; cg = v; cb = v * 1.02; if (y > 0.82 && y < 0.86) { cr *= 0.5; cg *= 0.5; cb *= 0.5; } } else { // Dark green glass: nearly black face on, the room mirrored on top, and oil glowing where light gets through. const glow = step(0.1, 0.98, side) * 0.55 + step(6.55, 7.1, y) * (0.35 + 0.65 * step(-0.6, 0.9, side)) * 0.9; const thin = y < 3 ? 0.55 : 1; cr = 9 + 96 * glow * thin + env * fres * 236; cg = 17 + 112 * glow * thin + env * fres * 232; cb = 12 + 12 * glow * thin + env * fres * 214; // The thick base ring shows as a darker line just above the foot. const foot = step(6.93, 6.97, y) * (1 - step(7.0, 7.04, y)); cr *= 1 - 0.45 * foot; cg *= 1 - 0.4 * foot; cb *= 1 - 0.45 * foot; } } else if (ys < TILT * capR) { // The flat top of the capsule, seen as a thin ellipse. const ex = xs / capR; const ey = ys / (TILT * capR); const q = ex * ex + ey * ey; if (q < 1) { cover = Math.min(1, (1 - Math.sqrt(q)) * capR * R); const v = 58 - 16 * ex; cr = v; cg = v; cb = v + 1; } } if (cover > 0) { const i = ((py - y0) * (x1 - x0) + (px - x0)) * 4; const under = d[i + 3] / 255; const keep = (1 - cover) * under; const a = cover + keep; d[i] = (Math.min(255, cr) * cover + d[i] * keep) / a; d[i + 1] = (Math.min(255, cg) * cover + d[i + 1] * keep) / a; d[i + 2] = (Math.min(255, cb) * cover + d[i + 2] * keep) / a; d[i + 3] = a * 255; } } } ctx.putImageData(img, x0, y0); } /** The light and shade that lies over the paper wherever it happens to be: darker toward the edges, a faint window sheen. */ function paintPaperLight(cv: HTMLCanvasElement, R: number) { const ctx = cv.getContext("2d"); if (!ctx) return; const img = ctx.createImageData(cv.width, cv.height); const d = img.data; for (let px = 0; px < cv.width; px++) { const side = Math.max(-0.999, Math.min(0.999, (px + 0.5 - R) / R)); const nz = Math.sqrt(1 - side * side); const lit = (0.56 + 0.62 * Math.max(0, side * -0.42 + nz * 0.84)) * (0.6 + 0.4 * Math.pow(nz, 0.7)); const az = (Math.asin(side) * 360) / Math.PI; const sheen = 0.045 * step(-84, -58, az) * (1 - step(-44, -18, az)); for (let py = 0; py < cv.height; py++) { const i = (py * cv.width + px) * 4; if (lit < 1) { d[i] = 34; d[i + 1] = 30; d[i + 2] = 8; d[i + 3] = (1 - lit) * 255 * (1 - sheen * 3); } else { d[i] = d[i + 1] = d[i + 2] = 255; d[i + 3] = Math.min(1, (lit - 1) * 0.8 + sheen) * 255; } } } ctx.putImageData(img, 0, 0); } /** Prints the front and back labels flat, as one strip that wraps the whole way round the bottle (twice, so it can be read past the seam). */ function printLabels(): HTMLCanvasElement { const cv = document.createElement("canvas"); cv.width = TEX_W * 2; cv.height = TEX_H; const c = cv.getContext("2d"); if (!c) return cv; const ink = "#1f3a29"; const serif = 'Georgia, "Times New Roman", serif'; const paper = (x: number, y: number, w: number, h: number) => { c.fillStyle = "#f2ead6"; c.fillRect(x, y, w, h); // Laid paper: faint darker fibres. for (let k = 0; k < 900; k++) { c.fillStyle = `rgba(120,100,60,${0.03 + Math.random() * 0.05})`; const long = 1 + Math.random() * 14; c.fillRect(x + Math.random() * (w - long), y + Math.random() * (h - 1), long, 1); } }; for (let copy = 0; copy < 2; copy++) { const o = copy * TEX_W; // Front label, centred on the start of the strip, so it is drawn in two halves across the seam. const fw = TEX_W * 0.4; for (const fx of [o - fw / 2, o + TEX_W - fw / 2]) { const mid = fx + fw / 2; paper(fx, 0, fw, TEX_H); c.fillStyle = "#c8452b"; c.fillRect(fx, 0, fw, TEX_H * 0.045); c.strokeStyle = ink; c.lineWidth = 3; c.strokeRect(fx + 24, TEX_H * 0.045 + 22, fw - 48, TEX_H * 0.955 - 46); c.fillStyle = ink; c.textAlign = "center"; c.textBaseline = "middle"; const spaced = (text: string, y: number, size: number, gap: number, weight = "600") => { c.font = `${weight} ${size}px ${serif}`; const widths = [...text].map((ch) => c.measureText(ch).width + gap); let x = mid - widths.reduce((a, b) => a + b, 0) / 2; [...text].forEach((ch, i) => { c.fillText(ch, x + widths[i] / 2, y); x += widths[i]; }); }; spaced(hero.label.top, TEX_H * 0.17, 23, 9); // An olive sprig: a bowed stem, leaves in pairs, two fruit. c.save(); c.translate(mid, TEX_H * 0.33); c.strokeStyle = ink; c.lineWidth = 3; c.beginPath(); c.moveTo(-120, 16); c.quadraticCurveTo(0, -22, 120, 10); c.stroke(); for (let k = 0; k < 7; k++) { const t = k / 6; const lx = -112 + t * 224; const ly = 16 - 26 * Math.sin(t * Math.PI) * 0.9 + (t > 0.5 ? (t - 0.5) * -8 : 0); for (const up of [-1, 1]) { c.save(); c.translate(lx, ly); c.rotate(up * (0.75 - t * 0.25) - 0.1); c.beginPath(); c.ellipse(21, 0, 23, 6.5, 0, 0, Math.PI * 2); c.fillStyle = up < 0 ? ink : "#55713a"; c.fill(); c.restore(); } } c.fillStyle = "#c8452b"; for (const [ox, oy] of [[-34, 34], [46, 30]]) { c.beginPath(); c.ellipse(ox, oy, 10, 13, 0.2, 0, Math.PI * 2); c.fill(); } c.restore(); c.fillStyle = ink; c.font = `italic 400 ${Math.round(TEX_H * 0.27)}px ${serif}`; c.fillText(hero.label.name, mid, TEX_H * 0.575); spaced(hero.label.sub, TEX_H * 0.735, 34, 22, "400"); c.fillRect(mid - 26, TEX_H * 0.805, 52, 2); spaced(hero.label.foot, TEX_H * 0.865, 17, 5); spaced(hero.label.lot, TEX_H * 0.925, 16, 3, "400"); } // Back label: smaller, lower, plain. const bw = TEX_W * 0.2; const bx = o + TEX_W * 0.5 - bw / 2; const by = TEX_H * 0.24; const bh = TEX_H * 0.6; paper(bx, by, bw, bh); c.fillStyle = ink; c.textAlign = "left"; c.font = `italic 400 30px ${serif}`; c.fillText(hero.label.name, bx + 26, by + 44); c.fillRect(bx + 26, by + 70, bw - 52, 1.5); c.font = `400 17px ${serif}`; hero.back.forEach((text, i) => c.fillText(text, bx + 26, by + 104 + i * 27)); c.fillRect(bx + 26, by + bh - 74, bw - 52, 1.5); c.font = `600 15px ${serif}`; c.fillText(hero.label.lot, bx + 26, by + bh - 42); } return cv; } export default function OliveOilBottleHeroTurningOnASeamlessBackdropWithTheHeadlineOrbitingRoundTheGlass() { const reduce = useReducedMotion(); const stage = useRef(null); const canvas = useRef(null); const ring = useRef(null); /** Bottle angle in turns, its spin in turns per second, and the drag in progress if there is one. */ const spin = useRef({ angle: 0, speed: 0, ringAngle: 0, dragX: null as number | null, dragAt: 0, radius: 70 }); const once = [...hero.headline, " ", "•", " "]; const letters = [...once, ...once]; useEffect(() => { const el = stage.current; const cv = canvas.current; const band = ring.current; if (!el || !cv || !band) return; const ctx = cv.getContext("2d"); if (!ctx) return; const glyphs = Array.from(band.children) as HTMLElement[]; const texture = printLabels(); const body = document.createElement("canvas"); const paper = document.createElement("canvas"); const light = document.createElement("canvas"); const idle = reduce ? 0 : 1 / BOTTLE_TURN; const s = spin.current; // Start a little before the label faces front, so it is square on a couple of seconds in. s.angle = reduce ? -0.02 : -0.02 - idle * 2.6; s.speed = idle; s.ringAngle = reduce ? 0 : 2.6 / RING_TURN; let R = 70; let cx = 0; let top = 0; let ringR = 300; let ringY = 0; let offsets: number[] = []; let widths: number[] = []; let glyphH = 0; let visible = true; let raf = 0; let last = 0; let drawn = NaN; const layout = () => { const w = el.clientWidth; const h = el.clientHeight; const ratio = Math.min(window.devicePixelRatio || 1, 2); const r = Math.min(h * 0.122, w * 0.15, 82); R = Math.round(r * ratio); s.radius = r; cv.width = Math.round(w * ratio); cv.height = Math.round(h * ratio); cx = Math.round(cv.width / 2); top = Math.round(h * 0.035 * ratio + TILT * R); body.width = cv.width; body.height = cv.height; paintBottle(body, R, cx, top); paper.width = light.width = R * 2; paper.height = light.height = Math.ceil((LABEL_TALL + TILT) * R) + 2; paintPaperLight(light, R); // Set the type so that the whole string exactly closes the ring. ringR = Math.min(w * 0.4, 430); ringY = top / ratio + 2.95 * r; band.style.fontSize = "100px"; glyphs.forEach((g) => (g.style.transform = "none")); const raw = glyphs.map((g) => g.getBoundingClientRect().width); const total = raw.reduce((a, b) => a + b, 0) || 1; const size = (100 * Math.PI * 2 * ringR) / total; band.style.fontSize = `${size}px`; widths = raw.map((v) => (v * size) / 100); glyphH = glyphs[0] ? glyphs[0].offsetHeight : size; let run = 0; offsets = widths.map((v) => { const mid = run + v / 2; run += v; return mid / ((total * size) / 100); }); drawn = NaN; }; const draw = () => { const turn = s.angle - Math.floor(s.angle); ctx.clearRect(0, 0, cv.width, cv.height); ctx.drawImage(body, 0, 0); // The paper: one thin slice of the flat print per column, squeezed toward the edges as the glass curves away. const pc = paper.getContext("2d"); if (pc) { pc.globalCompositeOperation = "source-over"; pc.clearRect(0, 0, paper.width, paper.height); const tall = LABEL_TALL * R; for (let px = 0; px < R * 2; px++) { const a = Math.max(-1, Math.min(1, (px - R) / R)); const b = Math.max(-1, Math.min(1, (px + 1 - R) / R)); const ua = Math.asin(a) / (Math.PI * 2); const ub = Math.asin(b) / (Math.PI * 2); const from = (((ua - turn) % 1) + 1) % 1; const facing = Math.sqrt(1 - ((a + b) / 2) * ((a + b) / 2)); pc.drawImage(texture, from * TEX_W, 0, Math.max(0.5, (ub - ua) * TEX_W), TEX_H, px, Math.round(TILT * R * facing), 1, Math.round(tall)); } pc.globalCompositeOperation = "source-atop"; pc.drawImage(light, 0, 0); ctx.drawImage(paper, cx - R, top + LABEL_TOP * R); } // The headline: each letter rides a tilted circle, shrinks and mirrors as it goes round the back, and drops behind the glass. const cssX = el.clientWidth / 2; for (let i = 0; i < glyphs.length; i++) { const th = (offsets[i] - 0.22 + s.ringAngle) * Math.PI * 2; const z = Math.cos(th); const depth = 1 + 0.13 * z; const x = cssX + ringR * Math.sin(th) - widths[i] / 2; const y = ringY + TILT * ringR * z - glyphH / 2; const g = glyphs[i]; g.style.transform = `matrix(${(depth * z).toFixed(4)},${(-depth * TILT * Math.sin(th)).toFixed(4)},0,${depth.toFixed(4)},${x.toFixed(2)},${y.toFixed(2)})`; // Edge on, a letter is a sliver, so it fades out for the moment it turns over. g.style.opacity = ((0.34 + 0.66 * step(-0.3, 0.2, z)) * step(0.04, 0.22, Math.abs(z))).toFixed(3); g.style.zIndex = z > 0 ? "30" : "10"; } }; const loop = (stamp: number) => { const dt = Math.min(last ? (stamp - last) / 1000 : 0.016, 0.05); last = stamp; if (s.dragX === null) { // Let go, the bottle coasts and settles back to its slow unaided turn. s.speed += (idle - s.speed) * Math.min(1, dt * 1.1); s.angle += s.speed * dt; } if (!reduce) s.ringAngle += (-1 / RING_TURN - (s.speed - idle) * 0.22) * dt; else s.ringAngle -= s.speed * 0.22 * dt; const key = s.angle * 7 + s.ringAngle; if (key !== drawn) { draw(); drawn = key; } raf = visible && !document.hidden ? requestAnimationFrame(loop) : 0; }; const wake = () => { if (!raf && visible && !document.hidden) { last = 0; raf = requestAnimationFrame(loop); } }; layout(); draw(); const ro = new ResizeObserver(() => { layout(); draw(); }); ro.observe(el); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; wake(); }); io.observe(el); document.addEventListener("visibilitychange", wake); wake(); return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", wake); }; }, [reduce]); function grab(e: ReactPointerEvent) { e.currentTarget.setPointerCapture(e.pointerId); spin.current.dragX = e.clientX; spin.current.dragAt = performance.now(); spin.current.speed = 0; } function drag(e: ReactPointerEvent) { const s = spin.current; if (s.dragX === null) return; const now = performance.now(); // Moving the hand one bottle radius turns the surface by the same distance. const turned = (e.clientX - s.dragX) / (s.radius * Math.PI * 2); const dt = Math.max(0.008, (now - s.dragAt) / 1000); s.angle += turned; s.speed = s.speed * 0.6 + (turned / dt) * 0.4; s.dragX = e.clientX; s.dragAt = now; } function release() { const s = spin.current; s.dragX = null; s.speed = Math.max(-1.6, Math.min(1.6, s.speed)); } function onKey(e: ReactKeyboardEvent) { if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return; e.preventDefault(); spin.current.speed = e.key === "ArrowRight" ? 0.5 : -0.5; if (reduce) spin.current.angle += e.key === "ArrowRight" ? 0.06 : -0.06; } return (

{/* The paper sweep: wall above, floor below, with no visible join. */}

); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/we-inc/olive-oil-bottle-hero-turning-on-a-seamless-backdrop-with-the-headline-orbiting-round-the-glass.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]