// NAJDA NFC Activation — six cinematic scenes
// Each scene is a self-contained component sized to fit a mobile viewport.
// All animations are CSS / SVG; transitions handled by Framer Motion in the host.
const { motion, AnimatePresence } = window.FramerMotion || {};
const { useEffect, useState, useRef, useMemo } = React;
// ────────────────────────────────────────────────────────────────────────────
// Shared atoms
// ────────────────────────────────────────────────────────────────────────────
const COLORS = {
navy: '#0A1628',
navyDeep: '#060F1C',
white: '#F4F7FB',
amber: '#E9A23B',
teal: '#00B4D8',
muted: '#6E7E96',
sos: '#FF3B5C',
};
// Stable seeded star/ripple positions per session
function useSeeded(n, seed = 1) {
return useMemo(() => {
let s = seed;
const rnd = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
return Array.from({ length: n }, (_, i) => ({ i, x: rnd(), y: rnd(), r: rnd(), d: rnd() }));
}, [n, seed]);
}
// Eyebrow / chapter label
function Chapter({ idx, total, label }) {
return (
{String(idx).padStart(2, '0')}
{label}
{String(idx).padStart(2, '0')} / {String(total).padStart(2, '0')}
);
}
// Animated horizon waves — used across multiple scenes
function HorizonWaves({ amplitude = 8, opacity = 0.18, speed = 18, color = COLORS.teal, lines = 3 }) {
return (
);
}
// Star / particle field
function StarField({ count = 40, seed = 7 }) {
const stars = useSeeded(count, seed);
return (
);
}
// Status bar — minimal
function StatusBar({ tint = COLORS.white, opacity = 0.9 }) {
return (
);
}
// Logo wordmark (pure typography mark)
function Wordmark({ size = 14, color = COLORS.white }) {
return (
);
}
// Bottom advance hint
function AdvanceHint({ label = 'Tap card to continue', onTap }) {
return (
);
}
// ────────────────────────────────────────────────────────────────────────────
// Scene 1 — Opening: dark ocean silence
// ────────────────────────────────────────────────────────────────────────────
window.SceneOpening = function SceneOpening({ onAdvance }) {
return (
{/* deep gradient & subtle vignette */}
{/* moonlight */}
{/* Brand mark */}
{/* Hero copy */}
Card Activated
Somewhere out
on the water,
silence falls.
{/* Bottom: tiny coordinates whisper */}
);
};
// ────────────────────────────────────────────────────────────────────────────
// Scene 2 — Lost at sea: isolation
// ────────────────────────────────────────────────────────────────────────────
window.SceneLost = function SceneLost({ onAdvance }) {
return (
{/* heavy sea gradient */}
{/* far ocean haze */}
{/* Tiny lone figure — abstract dot with reflection */}
{/* reflection */}
{/* widening ripples */}
{[0, 1, 2].map(i => (
))}
{/* Top chapter */}
{/* Distance / signal cluster */}
Distance from shore
47.3km
Signal
{[1, 2, 3, 4].map(i => (
))}
Weak
{/* Hero copy lower */}
One fisherman.
Forty-seven kilometers
from anyone.
No radio. No bars. No way to call for help. The sea keeps its secrets.
);
};
Object.assign(window, {
Chapter, HorizonWaves, StarField, StatusBar, Wordmark, AdvanceHint, COLORS,
});