// Payment AI — wide hero animation (2400x900, 28s loop) // Style: flat, smooth ease-in-out, no bouncy physics. Single accent: brand green. const HA = { bg: '#07090f', bgSoft: '#0c1220', ink: '#f4f6fb', inkMute: 'rgba(244,246,251,0.62)', inkDim: 'rgba(244,246,251,0.36)', rule: 'rgba(244,246,251,0.10)', accent: '#1ab877', accentSoft:'rgba(26,184,119,0.14)', accentDeep:'#0e6b46', font: "'Inter', system-ui, -apple-system, sans-serif", mono: "'JetBrains Mono', ui-monospace, monospace", }; const HERO_W = 2400; const HERO_H = 900; const CX = HERO_W / 2; const CY = HERO_H / 2; // Soft easing — no overshoot const eOut = Easing.easeOutCubic; const eInOut = Easing.easeInOutCubic; // Flat brand mark — no gradient, just solid green tile function HeroLogo({ size = 64, radius = 14 }) { return (
P
); } // ── Flat SVG icons (clean line/fill) ─────────────────────────────────────── const Icons = { bolt: (color) => ( ), lock: (color) => ( ), wallet: (color) => ( ), chat: (color) => ( ), }; // ── Decorative wide background (very subtle, slow drift) ─────────────────── function HeroBackdrop() { const t = useTime(); // Slow horizontal drift on a faint dot grid + a soft accent glow const drift = t * 18; return ( <> {/* dot grid */}
{/* hairline rules */}
); } // ── Scene 1 — Logo + hook (0..3.5s) ──────────────────────────────────────── function HeroIntro() { const { localTime, duration } = useSprite(); const eLogo = eOut(clamp(localTime / 0.55, 0, 1)); const eName = eOut(clamp((localTime - 0.18) / 0.55, 0, 1)); const eHook = eOut(clamp((localTime - 0.7) / 0.6, 0, 1)); const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1); const exitOp = 1 - eInOut(exitT); return (
Payment ai
Все цифровые товары в одном месте
); } // ── Reusable benefit panel ───────────────────────────────────────────────── function Benefit({ icon, label, headline, description, footnote }) { const { localTime, duration } = useSprite(); // 200ms slide-up + fade-in for label, icon pops 150ms earlier const eIcon = eOut(clamp((localTime - 0.05) / 0.45, 0, 1)); const eLabel = eOut(clamp((localTime - 0.20) / 0.40, 0, 1)); const eHead = eOut(clamp((localTime - 0.45) / 0.55, 0, 1)); const eDesc = eOut(clamp((localTime - 0.75) / 0.55, 0, 1)); const eFoot = eOut(clamp((localTime - 1.05) / 0.55, 0, 1)); const exitT = clamp((localTime - (duration - 0.45)) / 0.45, 0, 1); const exitOp = 1 - eInOut(exitT); const exitDx = -exitT * 30; return (
{/* Icon panel */}
{icon(HA.accent)}
{/* Text */}
{label}
{headline}
{description}
{footnote && (
{footnote}
)}
); } // ── Scene 5 — summary + CTA (20..27.5s) ──────────────────────────────────── function SummaryScene() { const { localTime, duration } = useSprite(); const eHead = eOut(clamp(localTime / 0.6, 0, 1)); const benefits = [ { icon: Icons.bolt, label: 'Быстро', desc: 'Подключение за 2 минуты' }, { icon: Icons.lock, label: 'Безопасно', desc: 'Прозрачные условия' }, { icon: Icons.wallet, label: 'Выгодно', desc: 'Единая оплата, лучшие цены' }, { icon: Icons.chat, label: 'Поддержка', desc: '24/7 в Telegram' }, ]; const eCta = eOut(clamp((localTime - 1.7) / 0.55, 0, 1)); // CTA pulse — 1.5s loop, soft sine const pulseT = (localTime % 1.5) / 1.5; const pulse = 0.5 + 0.5 * Math.sin(pulseT * Math.PI * 2); const exitT = clamp((localTime - (duration - 0.6)) / 0.6, 0, 1); const exitOp = 1 - eInOut(exitT); return (
{/* Headline */}
Payment ai
{/* Benefit row */}
{benefits.map((b, i) => { const e = eOut(clamp((localTime - 0.45 - i * 0.18) / 0.55, 0, 1)); return (
{b.icon(HA.accent)}
{b.label}
{b.desc}
); })}
{/* CTA */}
{/* Glow halo */}
Открыть каталог →
); } // ── Loop bridge — 27.5..28s — fades to brand color before restart ────────── function LoopBridge() { const { localTime, duration } = useSprite(); const e = eInOut(clamp(localTime / duration, 0, 1)); return (
); } // ── Section indicator (top hairline progress) ────────────────────────────── function SectionRail() { const t = useTime(); // Show during benefits + summary (2.8..27) const visible = t > 2.8 && t < 26.8; const e = eOut(clamp((t - 2.8) / 0.5, 0, 1)) * (1 - eOut(clamp((t - 26.3) / 0.5, 0, 1))); // 4 segments mapped to scene timing const segments = [ { label: 'Быстро', s: 3.5, e: 8.0 }, { label: 'Безопасно', s: 8.0, e: 13.0 }, { label: 'Выгодно', s: 13.0, e: 18.0 }, { label: 'Итого', s: 18.0, e: 27.0 }, ]; if (!visible) return null; return (
{segments.map((seg, i) => { const active = t >= seg.s && t <= seg.e; const done = t > seg.e; const w = 110; const fill = active ? clamp((t - seg.s) / (seg.e - seg.s), 0, 1) : (done ? 1 : 0); return (
{seg.label}
); })}
); } // ── Bottom corner mark ───────────────────────────────────────────────────── function CornerStamp() { const t = useTime(); const e = eOut(clamp((t - 0.6) / 0.6, 0, 1)); // hide during the very last fade const fadeOut = 1 - eInOut(clamp((t - 27.4) / 0.5, 0, 1)); return (
payment.ai
); } // ── Root ─────────────────────────────────────────────────────────────────── function HeroVideo() { const t = useTime(); React.useEffect(() => { const root = document.querySelector('[data-screen-label]'); if (root) { const sec = Math.floor(t); const nxt = `t=${sec}s`; if (root.getAttribute('data-screen-label') !== nxt) { root.setAttribute('data-screen-label', nxt); } } }, [Math.floor(t)]); return (
{/* Scene 1 — 0..3.5s — logo + hook */} {/* Benefits */} {/* Summary + CTA */} {/* Final fade for clean loop */} {/* Persistent UI */}
); } Object.assign(window, { HA, HeroLogo, Icons, HeroBackdrop, HeroIntro, Benefit, SummaryScene, LoopBridge, SectionRail, CornerStamp, HeroVideo, HERO_W, HERO_H, });