// scenes-hero.jsx — the opening: huge "Ari" letterforms, dawn sky, sun ascending,
// type that breathes + reacts magnetically to cursor.
//
// Cursor influence: each letter tilts subtly toward the pointer (a "magnetic" feel)
// without ever leaving its baseline. As you scroll, the letters lift apart and
// the sun (above 'A') sets, becoming a moon — but that's handled by celestial.js.
const { useRef, useEffect, useState, useMemo } = React;
function useMouse() {
const m = useRef({ x: 0, y: 0, nx: 0, ny: 0 });
useEffect(() => {
function move(e) {
m.current.x = e.clientX;
m.current.y = e.clientY;
m.current.nx = (e.clientX / window.innerWidth - 0.5) * 2;
m.current.ny = (e.clientY / window.innerHeight - 0.5) * 2;
}
window.addEventListener('pointermove', move, { passive: true });
return () => window.removeEventListener('pointermove', move);
}, []);
return m;
}
// A single letter that responds magnetically to the cursor.
function MagneticLetter({ children, strength = 18, breath = 0, style }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
let rafId;
let tx = 0, ty = 0, rz = 0, cx = 0, cy = 0, cr = 0;
function tick() {
rafId = requestAnimationFrame(tick);
const rect = el.getBoundingClientRect();
const lx = rect.left + rect.width / 2;
const ly = rect.top + rect.height / 2;
const mx = window.__ariMouse?.x ?? lx;
const my = window.__ariMouse?.y ?? ly;
const dx = mx - lx, dy = my - ly;
const d = Math.hypot(dx, dy);
const reach = 460;
const k = Math.max(0, 1 - d / reach);
const targetX = (dx / Math.max(1, d)) * k * strength;
const targetY = (dy / Math.max(1, d)) * k * strength;
const targetR = (dx / Math.max(1, d)) * k * 4; // slight rotation
cx += (targetX - cx) * 0.12;
cy += (targetY - cy) * 0.12;
cr += (targetR - cr) * 0.12;
const breatheY = Math.sin(performance.now() / 1800 + breath) * 4;
el.style.transform = `translate(${cx.toFixed(2)}px, ${(cy + breatheY).toFixed(2)}px) rotate(${cr.toFixed(2)}deg)`;
}
tick();
return () => cancelAnimationFrame(rafId);
}, [strength, breath]);
return {children};
}
// Global mouse tracker for magnetic letters (avoid one listener per letter).
(function () {
if (window.__ariMouseInit) return;
window.__ariMouseInit = true;
window.__ariMouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
window.addEventListener('pointermove', (e) => {
window.__ariMouse.x = e.clientX;
window.__ariMouse.y = e.clientY;
}, { passive: true });
})();
function Hero() {
const wrapRef = useRef(null);
const [progress, setProgress] = useState(0); // local progress within hero
useEffect(() => {
if (!window.AriScroll) return;
return window.AriScroll.subscribe((p) => {
// hero spans 0..0.12
const local = Math.max(0, Math.min(1, p / 0.12));
setProgress(local);
const el = wrapRef.current;
if (el) {
// parallax — letters drift up & fade as you scroll
el.style.setProperty('--hero-p', local.toFixed(4));
}
});
}, []);
const fade = 1 - Math.pow(progress, 1.4);
const lift = -progress * 120;
return (
{/* Distant horizon — a soft silhouette of mountains */}
{/* The eyebrow — small caps mono with hairline lines */}
A field guide to a quieter day
{/* The wordmark — huge "Ari" with magnetic letters */}
A
r
i
{/* "LABS" — small caps mono next to the wordmark */}
Labs
{/* Subtitle — the lede */}
Four small things for one life.
Quiet software, made on a shelf in Manchester.
{/* Bottom: scroll cue (subtle vertical line) */}
);
}
window.Hero = Hero;
window.MagneticLetter = MagneticLetter;