// Components for idėAs Productions
const { useState, useEffect, useRef } = React;
// ---------- Hooks ----------
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal, .split-line');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
}
// ---------- Nav ----------
function Nav({ lang, setLang, t }) {
const [visible, setVisible] = useState(false);
useEffect(() => {
const onScroll = () => {
setVisible(window.scrollY > window.innerHeight * 0.85);
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
idėA s · productions
{['es' /*, 'en', 'fr' */].map((l, i) => (
{i > 0 && / }
setLang(l)}>{l}
))}
);
}
// ---------- Hero ----------
function Hero({ t, videoSrc }) {
const videoRef = useRef(null);
useEffect(() => {
const v = videoRef.current;
if (v) v.play().catch(() => {});
}, [videoSrc]);
return (
{t.hero.meta_tl}
{t.hero.meta_tr}
{t.hero.meta_br}
{t.hero.headline_a} {t.hero.headline_b} {t.hero.headline_c}
);
}
// ---------- Marquee ----------
function Marquee({ items }) {
const repeated = [...items, ...items, ...items];
return (
{repeated.map((it, i) => {it} )}
);
}
// ---------- Manifesto ----------
function Manifesto({ t }) {
return (
{t.manifesto.body_pre} {t.manifesto.body_em} {t.manifesto.body_post} {t.manifesto.body_quiet}
);
}
// ---------- Works ----------
function Works({ t }) {
function enterGallery() {
if (window.__ideAsGallery) {
window.__ideAsGallery.open(document.body, null);
}
}
return (
);
}
// ---------- City Map (Leaflet) ----------
function CityMap({ mapId, lat, lng }) {
const instanceRef = useRef(null);
useEffect(() => {
if (instanceRef.current || !window.L) return;
const map = L.map(mapId, {
center: [lat, lng],
zoom: 10,
zoomControl: false,
attributionControl: false,
dragging: false,
scrollWheelZoom: false,
doubleClickZoom: false,
touchZoom: false,
keyboard: false,
});
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
maxZoom: 19,
}).addTo(map);
const pulseIcon = L.divIcon({
className: '',
html: '',
iconSize: [80, 20],
iconAnchor: [40, 10],
});
L.marker([lat, lng], { icon: pulseIcon }).addTo(map);
instanceRef.current = map;
return () => {
map.remove();
instanceRef.current = null;
};
}, []);
return
;
}
// ---------- Locations ----------
function Locations({ t }) {
return (
{/* Temporarily disabled Montreal Section
{t.places.mtl_name}{t.places.mtl_country}
{t.places.mtl_coord.split('\n').map((l,i)=>(
{l}
))}
{t.places.mtl_p}
{t.places.mtl_role}
*/}
{t.places.sv_name}{t.places.sv_country}
{t.places.sv_coord.split('\n').map((l,i)=>(
{l}
))}
{t.places.sv_p}
{t.places.sv_role}
);
}
// ---------- Contact ----------
function Contact({ t }) {
return (
);
}
// ---------- Footer ----------
function Foot({ t }) {
return (
idėAs x DiALOGA · {t.footer.left}{t.footer.right}
);
}
Object.assign(window, {
Nav, Hero, Marquee, Manifesto, Works, Locations, Contact, Foot, useReveal
});
![{t.works.list[1].title}](assets/works/005.jpg)
![{t.works.list[3].title}](assets/works/006.jpg)