);
}
// Top blue pill header (used in screens 1 + 2)
function HeaderPill({ text, width = 720, top = 76, fontSize = 20, padding = '12px 44px' }) {
return (
);
}
// Impact shockwave ring — expands outward from impact point
function ShockwaveRing({ centerX = 500, centerY = 355 }) {
const ringRef = React.useRef(null);
const ring2Ref = React.useRef(null);
React.useEffect(() => {
if (ringRef.current) {
gsap.fromTo(ringRef.current,
{ scale: 0.1, opacity: 1 },
{ scale: 3.5, opacity: 0, duration: 0.6, ease: 'power2.out' }
);
}
if (ring2Ref.current) {
gsap.fromTo(ring2Ref.current,
{ scale: 0.1, opacity: 0.8 },
{ scale: 2.5, opacity: 0, duration: 0.45, ease: 'power2.out', delay: 0.05 }
);
}
}, []);
const ringStyle = {
position: 'absolute',
left: centerX - 60, top: centerY - 60,
width: 120, height: 120,
borderRadius: '50%',
border: '3px solid rgba(255,212,0,0.8)',
pointerEvents: 'none',
transformOrigin: 'center',
};
return (
<>
);
}
// Impact sparks — small bright particles that fly out radially
function ImpactSparks({ centerX = 500, centerY = 355 }) {
const sparks = React.useMemo(() => {
const arr = [];
for (let i = 0; i < 12; i++) {
const ang = (i / 12) * Math.PI * 2 + (Math.random() - 0.5) * 0.4;
arr.push({
ang,
dist: 80 + Math.random() * 160,
size: 3 + Math.random() * 5,
dur: 0.3 + Math.random() * 0.3,
delay: Math.random() * 0.06,
color: Math.random() > 0.5 ? '#FFD400' : '#fff',
});
}
return arr;
}, []);
return (
<>
{sparks.map((s, i) => (
))}
);
}
function WheelScene({
showHammer = false,
phase = 'wheel-intro',
cracked = 0,
shards = false,
onWheelClick,
onStrikeImpact,
fadeOut = 0,
}) {
const hammerRef = React.useRef(null);
const hammerInnerRef = React.useRef(null);
const flashRef = React.useRef(null);
const wheelWrapRef = React.useRef(null);
const idleTweenRef = React.useRef(null);
const shockwaveRef = React.useRef(null);
const [showShockwave, setShowShockwave] = React.useState(false);
const [showSparks, setShowSparks] = React.useState(false);
// ENTRANCE — dramatic scale-up with rotation wobble
React.useEffect(() => {
if (!showHammer || !hammerRef.current) return;
if (phase !== 'wheel-intro') return;
gsap.set(hammerRef.current, {
x: -520, y: -260, rotation: -110, scale: 0.3, transformOrigin: '50% 50%',
});
const tl = gsap.timeline();
// Fly in + scale up with elastic feel
tl.to(hammerRef.current, {
x: -320, y: -170, rotation: -90, scale: 1,
duration: 0.7,
ease: 'back.out(1.4)',
});
// Rotation wobble settle — hammer trembles as it arrives
tl.to(hammerRef.current, {
rotation: -85,
duration: 0.08,
ease: 'power1.inOut',
});
tl.to(hammerRef.current, {
rotation: -92,
duration: 0.07,
ease: 'power1.inOut',
});
tl.to(hammerRef.current, {
rotation: -90,
duration: 0.06,
ease: 'power1.out',
});
return () => tl.kill();
}, [showHammer, phase]);
// AIM — breathing glow pulse on the hammer
React.useEffect(() => {
if (!hammerRef.current) return;
if (phase !== 'aim') return;
// Subtle scale pulse to indicate "ready"
const breathe = gsap.to(hammerRef.current, {
scale: 1.04,
duration: 0.8,
ease: 'sine.inOut',
yoyo: true,
repeat: -1,
});
// Glow pulse on the drop-shadow
const glowEl = hammerRef.current;
const glowTween = gsap.fromTo(glowEl,
{ filter: 'drop-shadow(0 14px 18px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(255,212,0,0))' },
{
filter: 'drop-shadow(0 14px 18px rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(255,212,0,0.5))',
duration: 0.9,
ease: 'sine.inOut',
yoyo: true,
repeat: -1,
}
);
return () => {
breathe.kill();
glowTween.kill();
gsap.set(glowEl, { filter: 'drop-shadow(0 14px 18px rgba(0,0,0,0.4))' });
};
}, [phase]);
// CURSOR-FOLLOW during 'aim'
React.useEffect(() => {
if (!hammerRef.current) return;
if (phase !== 'aim') return;
const stageEl = document.getElementById('scaler') || document.querySelector('deck-stage') || document.body;
const xTo = gsap.quickTo(hammerRef.current, 'x', { duration: 0.25, ease: 'power3.out' });
const yTo = gsap.quickTo(hammerRef.current, 'y', { duration: 0.25, ease: 'power3.out' });
const rTo = gsap.quickTo(hammerRef.current, 'rotation', { duration: 0.3, ease: 'power3.out' });
const onMove = (e) => {
const rect = stageEl.getBoundingClientRect();
const dx = ((e.clientX - rect.left) / rect.width) * 1000;
const dy = ((e.clientY - rect.top) / rect.height) * 600;
const headOff = { x: -50, y: -45 };
let tx = dx - 500 - headOff.x;
let ty = dy - 370 - headOff.y;
tx = Math.max(-420, Math.min(180, tx));
ty = Math.max(-280, Math.min(60, ty));
const rot = -90 + (tx / 420) * 20;
xTo(tx);
yTo(ty);
rTo(rot);
};
const onTouchMove = (e) => {
if (e.touches[0]) onMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
};
window.addEventListener('mousemove', onMove);
window.addEventListener('touchmove', onTouchMove, { passive: true });
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('touchmove', onTouchMove);
};
}, [phase]);
// SMASH — enhanced with anticipation pause, motion blur, scale punch
React.useEffect(() => {
if (!hammerRef.current) return;
if (phase !== 'smash') return;
if (idleTweenRef.current) idleTweenRef.current.kill();
// Kill any aim-phase tweens (breathe/glow)
gsap.killTweensOf(hammerRef.current, 'scale,filter');
gsap.set(hammerRef.current, {
scale: 1,
filter: 'drop-shadow(0 14px 18px rgba(0,0,0,0.4))',
});
const tl = gsap.timeline();
// 1. ANTICIPATION: pull back dramatically
tl.to(hammerRef.current, {
x: -400, y: -260, rotation: -120, scale: 1.08,
duration: 0.25,
ease: 'power2.out',
});
// 2. HOLD at apex — brief dramatic pause to build tension
tl.to(hammerRef.current, {
x: -405, y: -262, rotation: -122,
duration: 0.12,
ease: 'power1.inOut',
});
// 3. STRIKE — explosive swing with motion blur
tl.to(hammerRef.current, {
x: 71, y: -48, rotation: -165, scale: 1.15,
duration: 0.22,
ease: 'power4.in',
onStart: () => {
// Add motion blur during swing
if (hammerRef.current) {
hammerRef.current.style.filter = 'drop-shadow(0 14px 18px rgba(0,0,0,0.4)) blur(2px)';
}
},
onComplete: () => {
// Remove motion blur on impact
if (hammerRef.current) {
hammerRef.current.style.filter = 'drop-shadow(0 14px 18px rgba(0,0,0,0.4))';
}
// Scale punch on impact
gsap.to(hammerRef.current, {
scale: 1.25,
duration: 0.06,
ease: 'power2.out',
onComplete: () => {
gsap.to(hammerRef.current, {
scale: 1,
duration: 0.2,
ease: 'elastic.out(1, 0.5)',
});
},
});
if (onStrikeImpact) onStrikeImpact();
// Show shockwave + sparks
setShowShockwave(true);
setShowSparks(true);
setTimeout(() => { setShowShockwave(false); setShowSparks(false); }, 800);
// Enhanced flash — bigger + brighter
if (flashRef.current) {
gsap.fromTo(flashRef.current,
{ opacity: 0, scale: 0.2 },
{
opacity: 1, scale: 2, duration: 0.08, ease: 'power2.out',
onComplete: () => {
gsap.to(flashRef.current, { opacity: 0, scale: 3, duration: 0.35, ease: 'power2.out' });
},
}
);
}
// Wheel compression on impact
if (wheelWrapRef.current) {
gsap.fromTo(wheelWrapRef.current,
{ scale: 1 },
{ scale: 0.9, duration: 0.05, yoyo: true, repeat: 1, ease: 'power2.inOut' }
);
}
},
});
// 4. Bounce/rebound — hammer kicks back
tl.to(hammerRef.current, {
x: 50, y: -75, rotation: -150,
duration: 0.1,
ease: 'power2.out',
});
// 5. Settle planted with slight wobble
tl.to(hammerRef.current, {
x: 71, y: -48, rotation: -165,
duration: 0.12,
ease: 'power2.in',
});
tl.to(hammerRef.current, {
rotation: -162,
duration: 0.06,
ease: 'power1.inOut',
});
tl.to(hammerRef.current, {
rotation: -165,
duration: 0.05,
ease: 'power1.out',
});
return () => tl.kill();
}, [phase, onStrikeImpact]);
return (