// scenes.jsx — Al Rawdatain brand intro scenes
// Reads CSS variables from :root for themeable colors (tweakable).
const W = 1080;
const H = 1920;
const useVar = (name, fallback) => {
if (typeof window === 'undefined') return fallback;
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return v || fallback;
};
// ─── Fine-grained hooks ────────────────────────────────────────────────────
const useFrame = () => {
const [, force] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
let id;
const tick = () => { force(); id = requestAnimationFrame(tick); };
id = requestAnimationFrame(tick);
return () => cancelAnimationFrame(id);
}, []);
};
// ─── Shared atoms ──────────────────────────────────────────────────────────
function CornerHUD({ time, duration, sceneName, sceneIdx, total }) {
const mono = 'JetBrains Mono, ui-monospace, monospace';
const ink = 'var(--ink)';
const dim = 'var(--dim)';
const fmt = (t) => {
const s = Math.floor(t % 60);
const ms = Math.floor((t * 100) % 100);
return `00:${String(s).padStart(2, '0')}.${String(ms).padStart(2, '0')}`;
};
return (
<>
{/* Top-left: timecode */}
REC
{fmt(time)}
/ {fmt(duration)}
{/* Top-right: scene label */}
{String(sceneIdx).padStart(2,'0')}
/
{String(total).padStart(2,'0')}
{sceneName}
{/* Bottom-left: brand mark */}
AL RAWDATAIN · الروضتين · EST. 1981
{/* Bottom-right: coords */}
29.8°N 48.1°E
N. KUWAIT · AL‑RAWDATAIN FIELD
);
}
// Animated counter
function Counter({ from = 0, to, progress, suffix = '', decimals = 0, style = {} }) {
const v = from + (to - from) * Easing.easeOutQuart(clamp(progress, 0, 1));
const display = decimals > 0 ? v.toFixed(decimals) : Math.floor(v).toLocaleString();
return (
{display}{suffix}
);
}
// Striped placeholder
function Placeholder({ label, style = {} }) {
return (
{label}
);
}
// Animated progress line
function Ticker({ progress, style = {} }) {
return (
);
}
// Real Kuwait map — uses SVG of Kuwait (1134 × 979 viewBox).
// Landmass bbox measured: x [74, 962], y [53, 911]. Bubiyan island extends to ~x=1020.
// We crop with margin to include the whole country + surrounding Gulf context.
const SRC_W = 1134.2744;
const SRC_H = 979.20728;
const KW_MIN_X = 30;
const KW_MIN_Y = 20;
const KW_W = 1000; // includes Bubiyan + Gulf east
const KW_H = 920; // full north-to-south
// Al-Raudhatain aquifer in source SVG coords.
// Computed from geography: 29.85°N, 47.73°E, mapped onto bbox [74..962] × [53..911].
const RAUDHATAIN_SRC_X = 620;
const RAUDHATAIN_SRC_Y = 187;
// Translate to fractional (0..1) within the cropped view
const RAUD_FRAC_X = (RAUDHATAIN_SRC_X - KW_MIN_X) / KW_W;
const RAUD_FRAC_Y = (RAUDHATAIN_SRC_Y - KW_MIN_Y) / KW_H;
function KuwaitMap({ progress, revealProgress }) {
// Scale factor: how much to enlarge the 1134x979 SVG so KW_W maps to 100% width
const scaleX = SRC_W / KW_W;
const scaleY = SRC_H / KW_H;
const imgWidthPct = scaleX * 100;
const imgHeightPct = scaleY * 100;
const leftPct = -(KW_MIN_X / KW_W) * 100;
const topPct = -(KW_MIN_Y / KW_H) * 100;
return (
{/* Real map image, scaled+positioned to show Kuwait */}
{/* Accent overlay tinting Kuwait landmass */}
{/* Region labels */}
IRAQ
SAUDI ARABIA
ARABIAN GULF
KUWAIT
{/* Compass */}
{/* Grid overlay */}
{/* Kuwait map block */}
{/* Ripples emanating from Al-Raudhatain */}
{[...Array(ringCount)].map((_, i) => {
const delay = i * 0.25;
const p = clamp((localTime - 1.8 - delay) / 2.5, 0, 1);
const size = 50 + p * 380;
const op = (1 - p) * 0.55;
return (
);
})}
{/* Pin */}
{/* Pin callout — line goes up-right to label (toward upper right corner) */}
AL-RAUDHATAIN
AQUIFER · N. KUWAIT
{/* Coordinate readouts — above the map */}
{/* Depth meter — between coords and map */}
{/* Bilingual title */}
From the depths
of Kuwait's desert.
من أعماق صحراء الكويت
{/* Header */}
—— 45 years of heritage
A history
poured daily.
تاريخ يُسكب يوميًا
{/* Vertical timeline */}
{/* Milestones */}
{milestones.map((m, i) => {
const appear = clamp((localTime - m.t) / 0.5, 0, 1);
const yBase = 760 + i * 180;
return (
{/* Dot on line */}
{/* Year */}
);
})}
{/* Header */}
—— by the numbers
Light. Balanced.
Pure.
خفيفة. متوازنة. نقية.
{/* Stats grid */}
{stats.map((s, i) => {
const prog = clamp((localTime - s.t) / 1.0, 0, 1);
const appear = clamp((localTime - s.t) / 0.4, 0, 1);
return (
{s.suffix}
{s.label}
{s.ar}
);
})}
{/* Live ticker */}
NSF · KQM · FDA · IAS · CPG
↗ LIVE
{/* Header */}
—— the range
One source.
Many expressions.
منبع واحد. تعبيرات عديدة.
{/* Segment progress chips */}
{products.map((p, i) => {
const active = i === idx;
const passed = i < idx;
const segStart = 0.2 + i * SEG;
const fillProg = clamp((localTime - segStart) / SEG, 0, 1);
return (
);
})}
{/* Hero product stage — single product, cross-fades between segments */}
{products.map((p, i) => {
const segStart = 0.2 + i * SEG;
const inProg = clamp((localTime - segStart) / 0.4, 0, 1);
const outProg = clamp((localTime - segStart - SEG + 0.25) / 0.25, 0, 1);
const visible = inProg * (1 - outProg);
if (visible <= 0) return null;
return (
{/* Big index numeral watermark */}
{p.code}
{/* Product image */}
);
})}
{/* Footer: current product meta */}
{products.map((p, i) => {
const segStart = 0.2 + i * SEG;
const inProg = clamp((localTime - segStart) / 0.35, 0, 1);
const outProg = clamp((localTime - segStart - SEG + 0.2) / 0.2, 0, 1);
const visible = inProg * (1 - outProg);
if (visible <= 0) return null;
return (
{p.code} / {String(products.length).padStart(2, '0')}
{p.name}
{p.ar}
{p.size}
);
})}
—— verified
Purity, audited
at every step.
نقاء مُدقق في كل خطوة
{/* Cert stack */}
{certs.map((c, i) => {
const appear = clamp((localTime - c.t) / 0.4, 0, 1);
return (
{/* check box */}
{c.name}
{c.full}
✓ ACTIVE
);
})}
);
}
// ───────────────────────────────────────────────────────────────────────────
// SCENE 06 — Logo / outro (28 – 33s)
// ───────────────────────────────────────────────────────────────────────────
function Scene06() {
const { localTime } = useSprite();
const ink = 'var(--ink)';
const accent = 'var(--accent)';
const display = 'var(--display-font)';
const mono = 'JetBrains Mono, monospace';
const arabic = 'var(--arabic-font)';
const wordmarkProg = clamp(localTime / 1.2, 0, 1);
const tagProg = clamp((localTime - 1.4) / 0.6, 0, 1);
const ctaProg = clamp((localTime - 2.4) / 0.5, 0, 1);
// Floating water droplet SVG (simple circle is allowed per rules)
return (
{/* Radial accent glow */}
{/* Official logo (contains both English wordmark + Arabic) */}
{/* Tagline */}
Heritage, bottled daily.
تراث يُعبأ يوميًا
{/* CTA line */}
alrawdatain.com
+965 1881234
{/* Bottom small text override */}
Sharq · Kuwait · Since 1981
