// Cinematic SVG art for Wines of Israel — vineyard, bottle, pour, glass. // Light-mode editorial wine cinematography. All scenes share golden-hour // sun upper-right, deep wine reds, warm ivory/stone, warm dark browns. const { useRef, useEffect, useState, useMemo } = React; /* ============================================================ BOTTLE — slim refined silhouette, deep glass, paper label, curved highlights, condensation, contact darkening. tiltDeg rotates the bottle CW around its bottom-center pivot. ============================================================ */ function Bottle({ tiltDeg = 0, originY = "100%", scale = 1 }) { return (

); } /* ============================================================ BOTTLE SURFACE — warm stone tabletop with contact shadow. Sits BELOW the bottle in the cinema stage. ============================================================ */ function BottleSurface({ opacity = 1 }) { return ( ); } /* ============================================================ POUR STREAM — wine emerges from bottle mouth and falls under gravity. Multiple sub-stream highlights, surface-tension droplets, organic tributary filaments, free-falling droplet. ============================================================ */ function PourStreamSvg({ progress = 0, tiltDeg = 0 }) { const p = Math.max(0, Math.min(1, progress)); if (p < 0.01) { return ; } const tiltRad = (tiltDeg * Math.PI) / 180; const tiltSin = Math.sin(tiltRad); const tiltCos = Math.cos(tiltRad); const maxLen = 360; const len = 40 + p * maxLen; const exitX = tiltSin * 22; const midX = tiltSin * 10; const tipX = tiltSin * 4; const tipY = len; const c1x = exitX; const c1y = len * 0.28; const c2x = midX; const c2y = len * 0.62; const mainPath = `M 0 0 C ${c1x.toFixed(2)} ${c1y.toFixed(2)}, ${c2x.toFixed(2)} ${c2y.toFixed(2)}, ${tipX.toFixed(2)} ${tipY.toFixed(2)}`; const wobble = 0.6 + Math.sin(p * 9) * 0.4; const outerPath = `M 0 0 C ${(c1x + wobble).toFixed(2)} ${(c1y - 4).toFixed(2)}, ${(c2x - wobble * 0.7).toFixed(2)} ${(c2y + 2).toFixed(2)}, ${tipX.toFixed(2)} ${tipY.toFixed(2)}`; const cubic = (t, p0, p1, p2, p3) => Math.pow(1 - t, 3) * p0 + 3 * Math.pow(1 - t, 2) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t * p3; const tribStartT = 0.45, tribEndT = 0.78; const tribStartXY = { x: cubic(tribStartT, 0, c1x, c2x, tipX), y: cubic(tribStartT, 0, c1y, c2y, tipY) }; const tribEndXY = { x: cubic(tribEndT, 0, c1x, c2x, tipX) + 4 + tiltSin * 2, y: cubic(tribEndT, 0, c1y, c2y, tipY) + 6 }; const tributaryPath = `M ${tribStartXY.x.toFixed(2)} ${tribStartXY.y.toFixed(2)} C ${(tribStartXY.x + 2).toFixed(2)} ${(tribStartXY.y + (tribEndXY.y - tribStartXY.y) * 0.4).toFixed(2)}, ${(tribEndXY.x - 1).toFixed(2)} ${(tribEndXY.y - 4).toFixed(2)}, ${tribEndXY.x.toFixed(2)} ${tribEndXY.y.toFixed(2)}`; const trib2StartT = 0.58, trib2EndT = 0.86; const trib2StartXY = { x: cubic(trib2StartT, 0, c1x, c2x, tipX), y: cubic(trib2StartT, 0, c1y, c2y, tipY) }; const trib2EndXY = { x: cubic(trib2EndT, 0, c1x, c2x, tipX) - 3.5 + tiltSin, y: cubic(trib2EndT, 0, c1y, c2y, tipY) + 9 }; const tributary2Path = `M ${trib2StartXY.x.toFixed(2)} ${trib2StartXY.y.toFixed(2)} C ${(trib2StartXY.x - 1.5).toFixed(2)} ${(trib2StartXY.y + 4).toFixed(2)}, ${(trib2EndXY.x + 0.5).toFixed(2)} ${(trib2EndXY.y - 5).toFixed(2)}, ${trib2EndXY.x.toFixed(2)} ${trib2EndXY.y.toFixed(2)}`; const highlightOffset = 1.2; const highlightPath = `M ${highlightOffset.toFixed(2)} 0 C ${(c1x + highlightOffset).toFixed(2)} ${c1y.toFixed(2)}, ${(c2x + highlightOffset * 0.8).toFixed(2)} ${c2y.toFixed(2)}, ${(tipX + highlightOffset * 0.5).toFixed(2)} ${(tipY - 6).toFixed(2)}`; const dropletCount = Math.max(0, Math.round(3 + p * 4)); const droplets = []; for (let i = 0; i < dropletCount; i++) { const t = 0.15 + (i / Math.max(1, dropletCount - 1)) * 0.78; const sx = cubic(t, 0, c1x, c2x, tipX); const sy = cubic(t, 0, c1y, c2y, tipY); const side = i % 2 === 0 ? 1 : -1; const off = side * (1.2 + ((i * 13) % 5) * 0.3); const size = 0.6 + t * 4.2; droplets.push({ cx: sx + off, cy: sy + ((i * 7) % 4), rx: size * 0.7, ry: size, key: `d${i}` }); } const freeFall = p > 0.35; const freeDropDy = 40 + p * 20; const freeDropX = tipX + tiltSin * 1.5; const freeDropY = tipY + freeDropDy; const sideMargin = 28; const vbX = -sideMargin; const vbY = -10; const vbW = sideMargin * 2; const vbH = tipY + (freeFall ? freeDropDy + 18 : 24); const baseWidth = 5.2 + p * 0.6; const innerWidth = baseWidth * 0.55; return ( ); } /* ============================================================ POUR SPLASH — impact burst when wine hits a surface. Concentric ripples, radiating particles, crater, warm rim. ============================================================ */ function PourSplash({ progress = 0 }) { const p = Math.max(0, Math.min(1, progress)); if (p < 0.05) return null; const scale = 0.4 + p * 0.9; const baseRx = 22 * scale; const baseRy = 7 * scale; const vbW = 120, vbH = 60; const vbX = -vbW / 2; const vbY = -20; const particleCount = Math.max(6, Math.round(6 + p * 4)); const particles = []; for (let i = 0; i < particleCount; i++) { const baseAngle = -Math.PI + (i / (particleCount - 1)) * Math.PI; const angle = baseAngle + (((i * 37) % 13) - 6) * 0.04; const dist = (18 + ((i * 19) % 22)) * scale; const px = Math.cos(angle) * dist; const py = Math.sin(angle) * dist * 0.55; const size = 0.8 + ((i * 11) % 7) * 0.35 * scale; const opacity = Math.max(0.15, 1 - dist / (40 * scale)) * p; particles.push({ cx: px, cy: py, rx: size, ry: size * (0.7 + ((i * 5) % 4) * 0.1), opacity, fill: i % 3 === 0 ? "#5a0e1f" : "#a52d3d", key: `pt${i}` }); } const rings = []; for (let i = 0; i < 3; i++) { const phase = (p + i * 0.33) % 1; const rx = baseRx * (1.1 + phase * 1.8); const ry = baseRy * (1.1 + phase * 1.8); const opacity = Math.max(0, (1 - phase) * 0.55 * p); rings.push({ rx, ry, opacity, key: `r${i}` }); } return ( ); } /* ============================================================ VINEYARD PLACEHOLDER — cinematic golden-hour landscape with sky, sun, godrays, layered hills, cypress, vineyard rows, foreground bokeh, dust motes, vignette. Editorial wine film. ============================================================ */ function VineyardPlaceholder() { const vineRows = [ { y: 615, amp: 4, cx: 800, cy: 612, clusters: [220, 360, 500, 640, 780, 920, 1060, 1200, 1340], scale: 1.0, opacity: 0.95 }, { y: 645, amp: 5, cx: 800, cy: 641, clusters: [180, 320, 460, 600, 740, 880, 1020, 1160, 1300, 1420], scale: 1.1, opacity: 0.95 }, { y: 678, amp: 6, cx: 800, cy: 673, clusters: [140, 290, 440, 590, 740, 890, 1040, 1190, 1340, 1470], scale: 1.2, opacity: 0.96 }, { y: 714, amp: 7, cx: 800, cy: 708, clusters: [110, 270, 430, 590, 750, 910, 1070, 1230, 1390, 1520], scale: 1.3, opacity: 0.97 }, { y: 754, amp: 8, cx: 800, cy: 747, clusters: [80, 250, 420, 590, 760, 930, 1100, 1270, 1440, 1560], scale: 1.45, opacity: 0.98 }, { y: 798, amp: 9, cx: 800, cy: 790, clusters: [60, 230, 400, 570, 740, 910, 1080, 1250, 1420, 1580], scale: 1.6, opacity: 0.98 }, { y: 846, amp: 10, cx: 800, cy: 838, clusters: [40, 220, 400, 580, 760, 940, 1120, 1300, 1480, 1580], scale: 1.8, opacity: 0.99 }, ]; const slopeRows = [ { d: "M 250 545 C 400 540, 600 542, 780 548", op: 0.35 }, { d: "M 240 560 C 420 555, 620 558, 800 564", op: 0.4 }, { d: "M 235 575 C 430 570, 640 572, 820 578", op: 0.45 }, { d: "M 230 590 C 440 585, 660 588, 840 594", op: 0.5 }, ]; const cypresses = [ { x: 180, baseY: 600, h: 110, w: 14 }, { x: 320, baseY: 595, h: 130, w: 16 }, { x: 1080, baseY: 590, h: 145, w: 17 }, { x: 1150, baseY: 593, h: 120, w: 14 }, { x: 1280, baseY: 598, h: 100, w: 13 }, { x: 1410, baseY: 602, h: 115, w: 15 }, ]; const moteSeeds = [ [320, 180, 1.2], [480, 110, 0.8], [640, 220, 1.5], [780, 90, 1.0], [920, 250, 0.7], [1080, 140, 1.3], [1180, 310, 1.6], [880, 180, 0.9], [1320, 200, 1.1], [560, 340, 0.8], [720, 280, 1.4], [400, 260, 1.0], [1020, 360, 1.7], [240, 320, 0.6], [1240, 70, 1.2], [600, 150, 0.9], [840, 380, 1.5], [460, 410, 0.7], [1140, 420, 1.1], [380, 90, 1.3], [700, 50, 0.8], [980, 200, 1.0], [1380, 280, 1.4], ]; const motes = moteSeeds.map((m, i) => ({ cx: m[0], cy: m[1], r: m[2], op: 0.35 + (i % 5) * 0.08 })); const cirrus = [ { d: "M 120 200 C 320 192, 540 198, 780 195 S 1240 200, 1480 196", op: 0.25 }, { d: "M 60 245 C 280 240, 500 246, 740 242 S 1180 248, 1420 244", op: 0.18 }, { d: "M 200 165 C 380 160, 580 164, 760 161 S 1140 166, 1360 162", op: 0.22 }, { d: "M 340 280 C 520 276, 720 280, 900 278 S 1260 282, 1480 279", op: 0.14 }, ]; const godrays = [ { d: "M 1240 240 L 380 900 L 480 900 Z", op: 0.14 }, { d: "M 1240 240 L 600 900 L 700 900 Z", op: 0.18 }, { d: "M 1240 240 L 820 900 L 920 900 Z", op: 0.12 }, { d: "M 1240 240 L 1020 900 L 1120 900 Z", op: 0.16 }, { d: "M 1240 240 L 160 900 L 280 900 Z", op: 0.10 }, { d: "M 1240 240 L 1240 900 L 1320 900 Z", op: 0.09 }, ]; return ( ); } /* ============================================================ WINE GLASS — Bordeaux silhouette with curved meniscus, swirl, legs, environmental reflections, caustic ring on table. ============================================================ */ function WineGlass({ fillProgress = 0, scale = 1 }) { const f = Math.max(0, Math.min(1, fillProgress)); const bowlTop = 56; const bowlBottom = 170; const wineY = bowlBottom - (bowlBottom - bowlTop) * f; const bowlHalfWidthAt = (y) => { const t = (y - bowlTop) / (bowlBottom - bowlTop); const bell = Math.sin(Math.PI * Math.min(1, Math.max(0, t * 0.9 + 0.05))); const taper = 1 - Math.pow(t, 2.4) * 0.78; return (42 + bell * 18) * taper; }; const wineHalfW = bowlHalfWidthAt(wineY) - 2.5; const meniscusRy = Math.max(2.4, wineHalfW * 0.18); const cx = 120; const innerPathPoints = []; for (let y = wineY; y <= 168; y += 4) { innerPathPoints.push({ x: cx - (bowlHalfWidthAt(y) - 2.5), y }); } const innerPathPointsRight = []; for (let y = 168; y >= wineY; y -= 4) { innerPathPointsRight.push({ x: cx + (bowlHalfWidthAt(y) - 2.5), y }); } const winePath = (() => { if (f <= 0.001 || innerPathPoints.length === 0 || innerPathPointsRight.length === 0) return ""; let d = `M ${cx - wineHalfW} ${wineY}`; innerPathPoints.forEach((pt, i) => { if (i !== 0) d += ` L ${pt.x.toFixed(2)} ${pt.y}`; }); d += ` Q ${cx} 174 ${innerPathPointsRight[0].x.toFixed(2)} ${innerPathPointsRight[0].y}`; innerPathPointsRight.forEach((pt, i) => { if (i !== 0) d += ` L ${pt.x.toFixed(2)} ${pt.y}`; }); d += ` A ${wineHalfW} ${meniscusRy} 0 0 1 ${cx - wineHalfW} ${wineY}`; d += " Z"; return d; })(); const legs = [ { x: -28, top: 8, len: 38, w: 1.6, op: 0.42 }, { x: -12, top: 14, len: 28, w: 1.2, op: 0.32 }, { x: 14, top: 6, len: 46, w: 1.8, op: 0.48 }, { x: 30, top: 18, len: 26, w: 1.1, op: 0.3 }, ]; const causticOpacity = 0.55 * f; const causticOpacity2 = 0.32 * f; const causticOpacity3 = 0.18 * f; const showRipple = f > 0.1 && f < 0.85; return (

); } /* ============================================================ SCROLL-SCRUBBED VIDEO — drives video.currentTime from a 0..1 `progress` prop. Lerp smoothing in rAF prevents stutter when scroll velocity varies. Designed for a 5–10s cinematic clip re-encoded with frequent keyframes for instant seek. ============================================================ */ function ScrollScrubVideo({ progress = 0, src, poster, smoothing = 0.18, variant = "" }) { const videoRef = useRef(null); const targetRef = useRef(progress); const smoothedRef = useRef(progress); const rafRef = useRef(0); const [ready, setReady] = useState(false); // Track latest progress without re-running the rAF loop. useEffect(() => { targetRef.current = progress; }, [progress]); useEffect(() => { const v = videoRef.current; if (!v) return; const onMeta = () => setReady(true); if (v.readyState >= 1) setReady(true); v.addEventListener('loadedmetadata', onMeta); v.addEventListener('canplay', onMeta); return () => { v.removeEventListener('loadedmetadata', onMeta); v.removeEventListener('canplay', onMeta); }; }, []); // iOS Safari requires a play()/pause() priming so currentTime is honored. useEffect(() => { const v = videoRef.current; if (!v || !ready) return; const prime = () => { const p = v.play(); if (p && p.then) p.then(() => v.pause()).catch(() => {}); else v.pause(); }; prime(); }, [ready]); // rAF loop: lerp smoothed toward target, write currentTime if delta significant. useEffect(() => { const v = videoRef.current; if (!v || !ready) return; let lastWritten = -1; const tick = () => { const dur = v.duration; if (dur && isFinite(dur) && dur > 0) { smoothedRef.current += (targetRef.current - smoothedRef.current) * smoothing; const t = Math.max(0, Math.min(dur - 0.02, smoothedRef.current * dur)); if (Math.abs(t - lastWritten) > 0.016) { try { v.currentTime = t; lastWritten = t; } catch (e) {} } } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [ready, smoothing]); return (