// SMASH — Visual FX layer // Inspired by tiltable hero decoration / marquee ribbons / floating sprites. // // Exports: // horizontal scrolling word ribbon // a fixed-position SVG sprite that drifts with scroll // drops a curated set of FloatingDecors into a section // Sprite icons: Ball, Racquet, RacquetFlat, Arrow, CourtMini, RegMark // useParallax() hook — wires up the scroll-driven parallax sprites const { useEffect, useRef, useState } = React; // ────────────────────────────────────────────────────────────────────────── // Sprite library — single-color, currentColor-aware SVGs // ────────────────────────────────────────────────────────────────────────── const Sprite = { ball: (s = 60) => ( ), racquet: (s = 100) => ( ), // A racquet rendered at an angle, used as a giant hero decoration racquetFlat: (s = 200) => ( ), arrow: (s = 80) => ( ), arrowDown: (s = 40) => ( ), // Stylized mini court — top-down view courtMini: (s = 200) => ( ), regMark: (s = 32) => ( ), scribble: (s = 60) => ( ), }; // ────────────────────────────────────────────────────────────────────────── // MARQUEE — horizontal scrolling band of text or sprites. // // Brand-on rendition: huge Bebas SMASH (with the yellow dot still attached), // separated by ® registration marks. Same vibe as Padel Chest's wordmark // strip but using our type system. // // Props: // items — array of strings | nodes // speed — seconds per full loop (lower = faster). Default 60. // reverse — bool, scroll right-to-left if false (default), left-to-right // size — fontSize for text items (e.g. '92px') // gap — px between items // tone — 'dark'|'light'|'yellow' surface // ────────────────────────────────────────────────────────────────────────── function Marquee({ items, speed = 50, reverse = false, size = '88px', gap = 56, tone = 'dark', italics = false }) { // Repeat enough times to comfortably fill 200vw before the seam. const repeated = [...items, ...items, ...items, ...items, ...items, ...items]; return (

{repeated.map((item, i) => ( {item} ))}

); } // SMASH wordmark for use inside a marquee — Bebas + yellow dot. function MarqueeSmash({ dotColor = 'var(--ball-yellow)' }) { return ( SMASH ); } // ────────────────────────────────────────────────────────────────────────── // FLOATING DECOR — a single SVG sprite that drifts with scroll. // // Placement: absolutely positioned within the parent (which must be // `position: relative`). Uses scroll-driven translateY for parallax. // // Props: // top, left, right, bottom — CSS anchor (any combination) // speed — parallax multiplier (positive = moves up on scroll, negative = down) // rotate — initial rotation in deg // spin — rotation deg per page scrolled // float — gentle CSS float animation on top of parallax // children — the SVG sprite // color — currentColor for the sprite // ────────────────────────────────────────────────────────────────────────── function FloatingDecor({ top, left, right, bottom, speed = 0.2, rotate = 0, spin = 0, float: floatAnim = true, opacity = 1, color, zIndex = 1, children, }) { const ref = useRef(null); const innerRef = useRef(null); useEffect(() => { if (speed === 0 && spin === 0) return; const el = ref.current; const inner = innerRef.current; if (!el || !inner) return; let raf; let curY = 0, curSpin = 0; // smoothed (rendered) values let tgtY = 0, tgtSpin = 0; // scroll-derived targets let running = true; const measure = () => { const r = el.getBoundingClientRect(); const dy = (window.innerHeight / 2) - (r.top + r.height / 2); tgtY = dy * speed; tgtSpin = (window.scrollY * spin) / 1000; }; const loop = () => { if (!running) return; // Critically-damped lerp — smooth follow, no overshoot, no jitter. curY += (tgtY - curY) * 0.12; curSpin += (tgtSpin - curSpin) * 0.12; // Snap when extremely close to avoid sub-pixel churn. if (Math.abs(tgtY - curY) < 0.05) curY = tgtY; if (Math.abs(tgtSpin - curSpin) < 0.01) curSpin = tgtSpin; inner.style.transform = `translate3d(0, ${curY.toFixed(2)}px, 0) rotate(${curSpin.toFixed(2)}deg)`; raf = requestAnimationFrame(loop); }; measure(); curY = tgtY; curSpin = tgtSpin; // start settled, no opening lurch const onScroll = () => measure(); const onResize = () => measure(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize, { passive: true }); raf = requestAnimationFrame(loop); return () => { running = false; if (raf) cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); }; }, [speed, spin]); const style = { top, left, right, bottom, color, opacity, zIndex, transform: `rotate(${rotate}deg)`, }; return ( ); } // ────────────────────────────────────────────────────────────────────────── // REVEAL ON SCROLL — wrap any node to fade + slide it in // Reuses the .reveal class already in site.css plus a stagger index. // ────────────────────────────────────────────────────────────────────────── function Reveal({ delay = 0, children, as: As = 'div', className = '', ...rest }) { const cls = `reveal${delay ? ` d${Math.min(delay, 4)}` : ''} ${className}`; return {children}; } // ────────────────────────────────────────────────────────────────────────── // SCRAMBLE TEXT — single-word "draw-in" effect. Renders each character as a // span so we can stagger them. // ────────────────────────────────────────────────────────────────────────── function StaggerText({ text, className = '', style }) { const chars = [...text]; return ( {chars.map((c, i) => ( {c === ' ' ? '\u00A0' : c} ))} ); } Object.assign(window, { Sprite, Marquee, MarqueeSmash, FloatingDecor, Reveal, StaggerText, }); // ────────────────────────────────────────────────────────────────────────── // Pre-configured marquee variants used by the landing // ────────────────────────────────────────────────────────────────────────── function BrandMarquee() { // Repeated SMASH wordmark + ® mark, alternating with the running tagline. const dot = (color) => ; const items = [ dot('var(--ball-yellow)'), ®, сыграй больше, ®, dot('var(--ball-yellow)'), ®, теннис, ®, dot('var(--ball-yellow)'), ®, москва · 2026 , ®, ]; return ; } function SecondaryMarquee() { const items = [ NTRP 2.0, ●, NTRP 3.0, ●, NTRP 4.0, ●, NTRP 5.0, ●, NTRP 6.0+, ●, хамовники · лужники · крылатское, ●, ]; return ; } // ────────────────────────────────────────────────────────────────────────── // SectionDecor — drops a section-specific set of floating sprites. // Curated: keep only the largest atmospheric pieces (racquet silhouettes) // and a single accent ball per section, max. No scribbles, no courts. // ────────────────────────────────────────────────────────────────────────── function SectionDecor({ variant = 'hero' }) { if (variant === 'hero') { return ( <> {Sprite.racquetFlat(680)} ); } if (variant === 'problem') { return ( <> {Sprite.ball(28)} ); } if (variant === 'how') { return ( <> {Sprite.racquetFlat(520)} ); } if (variant === 'why') { return ( <> {Sprite.racquetFlat(620)} ); } if (variant === 'product') { // Intentionally minimal — let the phone mockups carry this section. return null; } if (variant === 'cta') { return ( <> {Sprite.racquetFlat(320)} {Sprite.racquetFlat(240)} ); } return null; } window.BrandMarquee = BrandMarquee; window.SecondaryMarquee = SecondaryMarquee; window.SectionDecor = SectionDecor;