/* SeeYouYou homepage — section components
---------------------------------------- */
const { useState, useEffect, useRef, useMemo } = React;
// External CTA target — Internal Testing track on Google Play.
// Update here when production listing goes live.
window.TESTING_URL = 'https://play.google.com/apps/internaltest/4701568051855899356';
/* ---------- ScrollFloat hero headline ----------
Wrap each word in a non-breaking span so words stay intact;
line wraps only happen between words. Within a word, each char
is still individually animated. */
function ScrollFloatHeadline({ text, scrollProgress }) {
const words = useMemo(() => text.split(/(\s+)/), [text]);
const t = Math.min(1, Math.max(0, scrollProgress / 0.10));
let charIdx = 0;
const total = text.replace(/\s+/g, '').length;
return (
{words.map((w, wi) => {
if (/^\s+$/.test(w)) return {'\u00A0'};
return (
{w.split('').map((c, ci) => {
const i = charIdx++;
const stagger = i / total;
const local = Math.min(1, Math.max(0, (t - stagger * 0.4) / 0.6));
const opacity = 1 - local;
const ty = local * 60;
return (
{c}
);
})}
);
})}
);
}
/* ---------- SlidePanel ----------
Slides from y:80px to y:0 + fade as the slot scrolls into view.
The inner card tilts on mousemove (3D perspective + rotateX/Y).
IMPORTANT: 3D rendering contexts (perspective + preserve-3d) cause
real-browser hit-testing problems on interactive descendants — clicks
can get routed to the perspective wrapper instead of the button inside.
That's why this component has a `footer` prop: interactive CTAs (Play
badge, link-arrow) should be placed in `footer` so they render OUTSIDE
the 3D context, below the tilting card. Slide animation still applies
to the footer via a separate (2D-only) translateY. */
function SlidePanel({ children, footer, className = '', frame = '0/100', tilt = true }) {
const wrapRef = useRef(null);
const innerRef = useRef(null);
const [progress, setProgress] = useState(0); // 0..1
const [tiltState, setTiltState] = useState({ rx: 0, ry: 0, tx: 0, ty: 0 });
useEffect(() => {
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { setProgress(1); return; }
let raf = null;
function update() {
raf = null;
const el = wrapRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
const p = 1 - Math.min(1, Math.max(0, rect.top / vh));
setProgress(p);
}
function onScroll() {
if (raf == null) raf = requestAnimationFrame(update);
}
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, []);
function onMouseMove(e) {
if (!tilt) return;
const rect = innerRef.current.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = (e.clientX - cx) / rect.width;
const dy = (e.clientY - cy) / rect.height;
setTiltState({
rx: -dy * 4,
ry: dx * 4,
tx: dx * 6,
ty: dy * 6,
});
}
function onMouseLeave() {
setTiltState({ rx: 0, ry: 0, tx: 0, ty: 0 });
}
// Slide-up + decelerate easing
const eased = 1 - Math.pow(1 - progress, 3);
const slideY = (1 - eased) * 80; // px
const opacity = eased;
return (
);
}
/* Google Play badge — text-only, original; no real Google logo */
function PlayBadge() {
return (
GET IT ONGoogle Play
);
}
Object.assign(window, { ScrollFloatHeadline, SlidePanel, PillNav, Logo, Hero, PlayBadge });