// parallax-hero.jsx — Hero épico con paisaje parallax + Steve animado // Steve walks when scrolling, idles when still. Multiple parallax layers. const { useState: useState_ph, useEffect: useEffect_ph, useRef: useRef_ph } = React; /* ════════════════════════════════════════════════════════════ STEVE — pixel character (CSS-only, all colored boxes) - props: walking (bool), facing ('right'/'left') ════════════════════════════════════════════════════════════ */ function Steve({ walking, facing = 'right', size = 1 }) { const s = (n) => `${n * size}px`; return (
{/* Body group bobs */}
{/* Head */}
{/* hair */}
{/* eyes */}
{/* nose */}
{/* mouth */}
{/* beard pixel */}
{/* Torso */}
{/* shirt detail stripe */}
{/* Arms */}
{/* Legs */}
{/* Held sword */}
); } /* ════════════════════════════════════════════════════════════ Mini particle layer — sparkles around the player ════════════════════════════════════════════════════════════ */ function SparkleLayer() { const sparkles = Array.from({ length: 12 }, (_, i) => i); return (
{sparkles.map((i) => { const left = (i * 8.3 + 7) % 100; const delay = (i * 0.6) % 4.5; const size = 4 + (i % 3) * 2; const colors = ['#f4c430', '#7af0e8', '#fff', '#54e6c0']; return (
); })}
); } /* ════════════════════════════════════════════════════════════ PARALLAX HERO — multiple z-layers, scroll-driven offsets ════════════════════════════════════════════════════════════ */ function HeroParallax({ players, peak, showCounter }) { const [scrollY, setScrollY] = useState_ph(0); const [walking, setWalking] = useState_ph(false); const lastScroll = useRef_ph(0); const stopTimer = useRef_ph(null); useEffect_ph(() => { const onScroll = () => { const y = window.scrollY; setScrollY(y); const delta = Math.abs(y - lastScroll.current); lastScroll.current = y; if (delta > 0.5) { setWalking(true); if (stopTimer.current) clearTimeout(stopTimer.current); stopTimer.current = setTimeout(() => setWalking(false), 180); } }; window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (stopTimer.current) clearTimeout(stopTimer.current); }; }, []); // Parallax offsets — each layer translates at a different rate const layer = (rate) => `translateY(${scrollY * rate}px)`; const layerX = (rate) => `translateX(${scrollY * rate}px)`; const HERO_H = 760; // Steve "walk" facing — based on last scroll direction const facing = scrollY > lastScroll.current ? 'right' : 'right'; return (
{/* ── Layer 0: sky gradient + sun ───────────────────── */}
{/* ── Layer 1: distant clouds (slow) ────────────────── */}
{/* ── Layer 2: far mountains ────────────────────────── */}
{/* ── Layer 3: mid mountains + biome ridge ──────────── */}
{/* ── Layer 4: trees / shrubs ───────────────────────── */}
{/* ── Layer 5: ground (grass + dirt strata) ─────────── */}
{/* grass tufts */} {[10, 24, 38, 52, 66, 80, 92].map((p, i) => (
))} {/* pebbles */} {[20, 45, 70, 88].map((p, i) => (
))}
{/* ── Layer 6: STEVE (foreground actor) ─────────────── */}
{/* Steve's shadow */}
{/* ── Layer 7: Floating ornament blocks ─────────────── */}
{/* ── Foreground: hero copy + IP card ───────────────── */}
★ TEMPORADA 4 — ABIERTA

EL SERVIDOR
HONDUREÑO
MÁS ÉPICO DE LATAM

Survival, Skyblock, BedWars, Factions, Lifesteal y más — todo en un mismo mundo. Java 1.21.x + Bedrock unificados.

{showCounter && }
{/* ── Scroll hint ─────────────────────────────────────── */}
80 ? 0 : 1, transition: 'opacity 0.3s', textAlign: 'center', }}>
SCROLL
); } /* ── Cloud ─────────────────────────────────────────────────── */ function Cloud({ x, big }) { return (
); } /* ── Far mountains ─────────────────────────────────────────── */ function FarMountains() { return (
{[ { left: '-2%', w: 240, h: 220, c: '#7d8a9a' }, { left: '14%', w: 320, h: 260, c: '#6e7c8a' }, { left: '40%', w: 280, h: 230, c: '#7d8a9a' }, { left: '64%', w: 360, h: 280, c: '#6e7c8a' }, { left: '88%', w: 240, h: 220, c: '#7d8a9a' }, ].map((m, i) => (
{/* snow cap */}
))}
); } /* ── Mid mountains (more detailed, larger) ──────────────────── */ function MidMountains() { return (
{[ { left: '-6%', w: 380, h: 280, c: '#3b3f49' }, { left: '24%', w: 480, h: 340, c: '#2b2e36' }, { left: '58%', w: 420, h: 300, c: '#3b3f49' }, { left: '85%', w: 320, h: 260, c: '#2b2e36' }, ].map((m, i) => (
))}
); } /* ── Pixel tree ─────────────────────────────────────────────── */ function PixelTree({ variant = 'large' }) { const isSmall = variant === 'small'; const lh = isSmall ? 56 : 80; const lw = isSmall ? 56 : 80; const tw = isSmall ? 14 : 20; const th = isSmall ? 32 : 50; return (
{/* leaves */}
{/* leaf detail squares */}
{/* trunk */}
); } Object.assign(window, { HeroParallax, Steve, Cloud, FarMountains, MidMountains, PixelTree });