// scenes-intro.jsx — White Cube edition // Cold open with official AK logo, intros, transitions, closing. // ── Cold open: AK logo ────────────────────────────────────────────────────── function ColdOpenScene({ start, end }) { return ( ); } function ColdOpenInner() { const { localTime, duration } = useSprite(); const logoT = clamp((localTime - 0.3) / 0.9, 0, 1); const logoE = Easing.easeOutCubic(logoT); const captionT = clamp((localTime - 1.0) / 0.7, 0, 1); const captionE = Easing.easeOutCubic(captionT); const ruleT = clamp((localTime - 0.8) / 0.5, 0, 1); const globeT = clamp((localTime - 0.6) / 1.0, 0, 1); const globeE = Easing.easeOutCubic(globeT); const float = Math.sin(localTime * 0.5) * 2; return ( <> {/* Soft editorial background */} {/* Soft white scrim for legibility behind logo+caption */}
{/* ─── LEFT: logo + caption + rule ─────────────────────────────── */}
AK Networks
{/* Red rule */}
{/* Caption */}
Identidade · Zero Trust
IA Segura · Resiliência
{/* ─── RIGHT: interactive globe ──────────────────────────────── */}
); } // ── Intro 1: hero title — split layout ───────────────────────────────────── function IntroScene1({ start, end }) { return ( ); } function IntroScene1Inner() { return ( <> {/* Soft editorial background */} {/* Big bold display — single long sentence, mask-revealed word by word */} ); } // ── Intro 2: manifesto — two columns + numerical pillars ─────────────────── function IntroScene2({ start, end }) { return ( ); } function IntroScene2Inner() { return ( <> {/* Soft editorial background */} {/* Big asymmetric headline */} ); } function StatStrip() { const { localTime } = useSprite(); const items = [ { num: '20+', label: 'anos de experiência' }, { num: '10', label: 'parceiros líderes' }, { num: '04', label: 'serviços geridos' }, { num: 'PT', label: 'presença local' }, ]; return (
{items.map((it, i) => { const t = clamp((localTime - i * 0.14) / 0.55, 0, 1); const e = Easing.easeOutCubic(t); return (
{it.num}
{it.label}
); })}
); } // ── Transition scene — single line phrase, centered ───────────────────────── function TransitionScene({ start, end, phrase, color }) { return ( ); } function TransitionInner({ phrase, color }) { const { localTime, duration } = useSprite(); // Line animates from left (0) to right (1) over the FULL scene duration, // ending exactly at the cut for a sense of continuity into the next scene. const lineT = clamp(localTime / Math.max(duration, 0.001), 0, 1); const lineE = Easing.easeInOutCubic(lineT); return ( <> {/* Soft editorial background */} {/* Phrase — left aligned */} {/* Red rule sweeping left → right at the speed of the scene */}
); } // ── 25 de Abril Bridge — vector silhouette background ────────────────────── function Bridge25Abril({ opacity = 1, color }) { const c = color || AK.red; // Iconic suspension bridge: two tall H-shaped towers, sweeping main suspension cables, // vertical hangers, and a deck spanning the harbour. Stylised, single-color. return ( {/* Distant water reflection lines */} {/* Main bridge group */} {/* Roadway / deck — two parallel horizontals (truss feel) */} {/* Truss diagonals on the deck (light hatch) */} {Array.from({length: 36}).map((_, i) => { const x = 80 + i * 50; return ; })} {Array.from({length: 36}).map((_, i) => { const x = 104 + i * 50; return ; })} {/* Left tower — H-shape */} {/* Cross beams */} {/* Tower top finial */} {/* Right tower — H-shape */} {/* Main suspension cables — three sweeping curves between towers */} {/* Backstays — outer cables anchoring beyond towers */} {/* Vertical hangers — between the main cable and the deck */} {Array.from({length: 22}).map((_, i) => { const x = 480 + i * 44; // approximate parabola y = a(x-cx)^2 + miny const cx = 960; const a = (720 - 290) / Math.pow(960 - 470, 2); const y = 720 - a * Math.pow(x - cx, 2); return ; })} {/* Side hangers — left of left tower */} {Array.from({length: 7}).map((_, i) => { const x = 110 + i * 50; // backstay line slope from (60,540) to (470,290) const m = (290 - 540) / (470 - 60); const y = 540 + m * (x - 60); return ; })} {/* Side hangers — right of right tower */} {Array.from({length: 7}).map((_, i) => { const x = 1500 + i * 50; const m = (540 - 290) / (1860 - 1450); const y = 290 + m * (x - 1450); return ; })} {/* Tower bases / piers below the deck */} {/* Soft water reflection of cables under deck */} {/* Water glow */} ); } window.Bridge25Abril = Bridge25Abril; function ClosingScene({ start, end }) { return ( ); } function ClosingInner() { const { localTime, duration } = useSprite(); const bgT = clamp(localTime / 0.8, 0, 1); const bgE = Easing.easeOutCubic(bgT); return ( <> {/* AK Dotted Surface — animated dot wave background */}
{/* Soft paper veil for foreground readability */}
{/* Top-left: AK logo */}
AK Networks
{/* Closing phrase */} {/* Bottom row */}
{/* Globe icon */}
www.aknetworks.pt
{[ { name: 'Brasil', flag: ( )}, { name: 'Portugal', flag: ( )}, { name: 'Estados Unidos', flag: ( {[0,2,4,6,8,10,12].map(i => ( ))} )}, ].map((c, i) => (
{c.name}
{c.flag}
))}
); } Object.assign(window, { ColdOpenScene, IntroScene1, IntroScene2, TransitionScene, ClosingScene, });