/* global React, ICONS */
const { useEffect, useRef, useState } = React;
/* ============================================================
NAV — fixed glass pill
============================================================ */
function Nav() {
const Arrow = ICONS.ArrowRight;
return (
);
}
/* ============================================================
HERO — video background + centered content
============================================================ */
function Hero() {
const vRefA = useRef(null);
const vRefB = useRef(null);
const rafRef = useRef(null);
// Two videos crossfading on a half-period offset = seamless infinite loop
useEffect(() => {
const a = vRefA.current;
const b = vRefB.current;
if (!a || !b) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
a.style.opacity = 1;
b.style.opacity = 0;
a.pause();b.pause();
return;
}
const SPEED = 0.5;
let started = false;
const start = () => {
if (started) return;
if (!a.duration || !b.duration) return;
started = true;
const d = a.duration;
a.loop = true;b.loop = true;
a.playbackRate = SPEED;b.playbackRate = SPEED;
a.muted = true;b.muted = true;
a.currentTime = 0;
b.currentTime = d / 2;
Promise.all([a.play().catch(() => {}), b.play().catch(() => {})]);
// Crossfade window (in seconds of video time, scaled by SPEED already since currentTime is in video seconds)
const FADE = 0.8;
const tick = () => {
const da = a.duration;
if (da > 0) {
// distance from each video's loop boundary (start or end)
const ta = a.currentTime;
const tb = b.currentTime;
// Compute opacity by triangular function based on time-to-loop
// A is "fresh" right after looping (ta near 0), getting "stale" near da
// Crossfade: opacityA = 1 in middle of A's cycle, drops to 0 near boundaries (where B is at its middle)
const cycleA = ta / da; // 0..1
const cycleB = tb / da; // 0..1
// Use sin curve for smoothness: A bright when cycleA in [0.0, 0.5] region away from B's bright zone
// Simpler: A opacity = smooth(distance from B's bright midpoint vs A's)
// Define: opacityA peaks at cycleA=0.25, opacityB peaks at cycleB=0.25 (b is half-offset, so its 0.25 = a's 0.75)
// Use cos based fade: opA = (1 - cos(2πcycleA))/2 with smoothing
// Easier model: each video fades out in last FADE seconds before loop point.
const distA = Math.min(ta, da - ta); // distance to nearest boundary (0 or da)
const distB = Math.min(tb, da - tb);
const fadeAmtA = Math.min(1, distA / FADE);
const fadeAmtB = Math.min(1, distB / FADE);
// Normalize so they sum to ~1 to avoid double-dim
const total = fadeAmtA + fadeAmtB || 1;
a.style.opacity = fadeAmtA / total;
b.style.opacity = fadeAmtB / total;
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
};
const tryStart = () => start();
a.addEventListener('loadedmetadata', tryStart);
b.addEventListener('loadedmetadata', tryStart);
a.addEventListener('canplay', tryStart);
b.addEventListener('canplay', tryStart);
if (a.readyState >= 1 && b.readyState >= 1) tryStart();
return () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
a.removeEventListener('loadedmetadata', tryStart);
b.removeEventListener('loadedmetadata', tryStart);
a.removeEventListener('canplay', tryStart);
b.removeEventListener('canplay', tryStart);
};
}, []);
const Arrow = ICONS.ArrowRight;
const ref = useReveal(0.05);
return (
Imprimimos lo que imaginas.
);
}
/* ============================================================
MARQUEE
============================================================ */
function Marquee() {
const items = [
'Llaveros', 'Figuras coleccionables', 'Prototipos', 'Regalos personalizados',
'Merch corporativo', 'Decoración', 'Repuestos', 'Maquetas arquitectónicas',
'Joyería', 'Souvenirs', 'Piezas técnicas', 'Cosplay'];
const renderRow = (k) =>
{items.map((it, i) =>
{it}
)}
;
return (
— Esto es lo que puedes imprimir con nosotros
{renderRow('a')}
{renderRow('b')}
);
}
Object.assign(window, { Nav, Hero, Marquee });