// EYEQ — Chrome (nav, letterbox, HUD, grain, marquee, iris)
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ── Letterbox bars that respond to scroll ────────────────────────
function Letterbox() {
useEffect(() => {
const onScroll = () => {
const y = window.scrollY;
const vh = window.innerHeight;
// 0 in hero, grows to 56px as you pass hero, stays through gallery,
// tapers off after gallery section
const heroEnd = vh * 0.9;
const galleryStart = vh * 1.4;
const galleryEnd = vh * 5.2;
let lb = 0;
if (y > heroEnd && y < galleryStart) {
lb = Math.min(56, ((y - heroEnd) / (galleryStart - heroEnd)) * 56);
} else if (y >= galleryStart && y < galleryEnd) {
lb = 56;
} else if (y >= galleryEnd) {
lb = Math.max(0, 56 - ((y - galleryEnd) / vh) * 56);
}
// mobile: cap letterbox smaller so it doesn't eat the viewport
if (window.innerWidth < 720) lb = Math.min(lb, 28);
document.documentElement.style.setProperty('--letterbox', `${lb}px`);
};
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll, { passive: true });
onScroll();
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, []);
return (
<>
);
}
// ── Camera zoom-in: scroll-linked scale on flagged elements ───────
function CameraZoom() {
useEffect(() => {
const items = Array.from(document.querySelectorAll('[data-camera-zoom]'));
if (!items.length) return;
const update = () => {
const vh = window.innerHeight;
for (const el of items) {
const r = el.getBoundingClientRect();
// 0 when section is far below viewport; 1 when section is near top.
const start = vh; // section bottom touches viewport bottom
const end = -r.height * 0.4; // section is well-scrolled-past
let p = (start - r.top) / (start - end);
p = Math.max(0, Math.min(1, p));
const scale = 1.0 + p * 0.18; // zoom 0 → 18%
const translate = -p * 4; // slight upward drift
const blur = p < 0.05 ? (0.05 - p) * 24 : 0; // brief motion blur at start
el.style.transform = `scale(${scale.toFixed(3)}) translateY(${translate.toFixed(1)}%)`;
el.style.filter = blur > 0 ? `blur(${blur.toFixed(1)}px)` : '';
}
};
let raf;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => { update(); raf = null; });
};
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll, { passive: true });
update();
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, []);
return null;
}
// ── Film grain ────────────────────────────────────────────────────
function Grain() {
return ;
}
// ── HUD: REC indicator + frame-counter timecode ──────────────────
function HUD() {
const [tc, setTc] = useState({ h: 0, m: 42, s: 18, f: 12 });
useEffect(() => {
const id = setInterval(() => {
setTc(prev => {
let { h, m, s, f } = prev;
f += 1;
if (f >= 24) { f = 0; s += 1; }
if (s >= 60) { s = 0; m += 1; }
if (m >= 60) { m = 0; h += 1; }
return { h, m, s, f };
});
}, 1000 / 24);
return () => clearInterval(id);
}, []);
const pad = (n) => String(n).padStart(2, '0');
return (
<>
REC
·
24.000 FPS
·
ARRI ALEXA 35
TC
{pad(tc.h)}:{pad(tc.m)}:{pad(tc.s)}:{pad(tc.f)}
·
EYEQ / 026
);
}
// ── Top nav ──────────────────────────────────────────────────────
function Nav({ onStartProject }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 60);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
const links = [
{ href: '#work', label: 'Work', idx: '01' },
{ href: '#services', label: 'Services', idx: '02' },
{ href: '#process', label: 'Process', idx: '03' },
{ href: '#studio', label: 'Studio', idx: '04' },
{ href: '#press', label: 'Press', idx: '05' },
{ href: '#contact', label: 'Contact', idx: '06' },
];
return (
<>
EYEQ · MENU
{String(links.length).padStart(2, '0')} SECTIONS
Mumbai · Delhi · LA
hello@eyeq.studio
);
}
// ── Scrolling marquee credits ────────────────────────────────────
function Marquee({ items, italic = [] }) {
// duplicate items for seamless loop
const all = [...items, ...items];
return (
{all.map((it, i) => (
{italic.includes(i % items.length)
? {it}
: it}
))}
);
}
// ── Aperture / iris between sections ─────────────────────────────
function IrisDivider({ label = 'CUT TO —', meta = 'F/1.4 · OPEN · 24FPS' }) {
return (
—
{meta}
—
{/* corner brackets */}
{label}
);
}
Object.assign(window, { Letterbox, Grain, HUD, Nav, Marquee, IrisDivider, CameraZoom });