),
plus any element opted in with [data-reveal]; skips sticky/fixed chrome and
absolutely-positioned decoration. Re-scans on screen swaps via a MutationObserver,
so no per-screen wiring is needed. Driven entirely by inline styles (highest
specificity, untouched by React's style reconciliation, so it survives re-renders);
reveal is scroll/position based for maximum reliability. Honours prefers-reduced-motion.
Debug: window.__loncinRevealDebug() logs armed/shown/hidden counts for the live screen. */
(function setupLoncinReveal() {
if (window.__loncinRevealReady) return;
window.__loncinRevealReady = true;
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const EASE = 'cubic-bezier(0.22, 0.61, 0.27, 1)';
const DUR = 950; // ms — a touch slower
const STAGGER = 110; // ms between siblings within a section
const MAX_STAGGER = 660;// ms cap so long sections don't drag
const LIFT = '24px';
const THRESH = 0.84; // reveal a little later: top must clear into the bottom ~16% of the viewport
const INTRO_BASE = 240; // ms — initial intro waits a beat before it begins
const SCROLL_BASE = 60; // ms — small lead on subsequent scroll reveals
let firstBatch = true;
const pending = [];
let editing = false; // when the host editor is active, never keep anything hidden
// The host editor (Edit / Comment / Design modes) stamps nodes with these attrs.
// While editing, the page can be frozen mid-animation — which would leave armed
// elements stuck at opacity:0 (a black screen). Detect it and reveal everything.
function editActive() {
try {
return !!document.querySelector('[data-cc-id],[data-dm-ref]') ||
document.documentElement.hasAttribute('data-dm-active') ||
document.body.hasAttribute('data-editing');
} catch (err) { return false; }
}
function isAnimatable(el) {
if (!el || el.nodeType !== 1) return false;
const t = el.tagName;
if (t === 'SCRIPT' || t === 'STYLE' || t === 'TEMPLATE' || t === 'BR') return false;
let pos = '';
try { pos = getComputedStyle(el).position; } catch (err) { /* noop */ }
if (pos === 'absolute' || pos === 'fixed' || pos === 'sticky') return false; // leave overlays/backdrops/chrome alone
return true;
}
function targetsForContainer(root, owner) {
let container = root;
// Unwrap single wrappers so we stagger the real content, not an outer shell.
for (let i = 0; i < 6; i++) {
const kids = [...container.children].filter(isAnimatable);
if (kids.length === 1 && kids[0].tagName === 'DIV') container = kids[0];
else break;
}
let targets = [...container.children].filter(isAnimatable);
if (targets.length === 0) targets = [root];
targets.forEach((el) => { el.__rvSection = owner; });
return targets;
}
function collectTargets() {
const main = document.querySelector('main');
const out = [];
if (main) {
main.querySelectorAll('section').forEach((sec) => {
let pos = '';
try { pos = getComputedStyle(sec).position; } catch (err) { /* noop */ }
if (pos === 'sticky' || pos === 'fixed') return;
targetsForContainer(sec, sec).forEach((el) => out.push(el));
});
main.querySelectorAll('[data-reveal]').forEach((el) => { el.__rvSection = el; out.push(el); });
}
document.querySelectorAll('footer').forEach((ft) => {
targetsForContainer(ft, ft).forEach((el) => out.push(el));
});
return out;
}
function arm(el) {
if (el.__rvArmed) return;
el.__rvArmed = true;
if (reduce || editing) { el.__rvShown = true; return; }
// Marker so the CSS failsafe (in index.html head) can force this element
// visible the instant the editor activates — even if JS/timers are frozen.
el.setAttribute('data-rv', '');
el.style.transition = `opacity ${DUR}ms ${EASE}, transform ${DUR}ms ${EASE}`;
el.style.willChange = 'opacity, transform';
el.style.opacity = '0';
el.style.transform = `translateY(${LIFT})`;
}
function show(el, delayMs) {
if (el.__rvShown) return;
el.__rvShown = true;
if (reduce) return;
el.style.transitionDelay = (delayMs || 0) + 'ms';
el.style.opacity = '1';
el.style.transform = 'none';
}
// Instantly un-hide every element (no transition) and stop hiding new ones.
// Used when the editor activates or as a failsafe so content is never stuck dark.
function revealAll() {
editing = true;
collectTargets().forEach((el) => {
el.__rvArmed = true; el.__rvShown = true;
el.style.transition = 'none';
el.style.opacity = '1';
el.style.transform = 'none';
el.style.willChange = 'auto';
});
document.querySelectorAll('.ev-reveal:not(.is-in)').forEach((el) => el.classList.add('is-in'));
pending.length = 0;
}
function scan() {
collectTargets().forEach((el) => {
if (el.__rvArmed) return;
arm(el);
if (!el.__rvShown) pending.push(el);
});
}
function check() {
if (reduce) { pending.length = 0; return; }
const vh = window.innerHeight || 800;
// When the page can't scroll any further, the last items may sit in the bottom
// ~16% and never cross the normal threshold — so reveal anything visible at the end.
const docH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
const atBottom = (window.innerHeight + window.scrollY) >= (docH - 2);
const perSec = new Map();
const base = firstBatch ? INTRO_BASE : SCROLL_BASE;
const still = [];
let revealedAny = false;
for (const el of pending) { // pending is in document order → top-to-bottom cascade
if (el.__rvShown) continue;
const top = el.getBoundingClientRect().top;
if (top <= -vh) {
show(el, 0); // scrolled well past (e.g. a jump) — reveal instantly, no stall
} else if (top < vh * THRESH || (atBottom && top < vh)) {
const sec = el.__rvSection || el;
const n = perSec.get(sec) || 0;
perSec.set(sec, n + 1);
show(el, base + Math.min(n * STAGGER, MAX_STAGGER));
revealedAny = true;
} else {
still.push(el);
}
}
pending.length = 0;
Array.prototype.push.apply(pending, still);
if (revealedAny) firstBatch = false;
// Safety net for EventsScreen's IntersectionObserver-driven portfolio (.ev-reveal):
// reveal any that have entered view, so the gallery never stays hidden if IO is flaky.
const evs = document.querySelectorAll('.ev-reveal:not(.is-in)');
if (evs.length) evs.forEach((el) => { if (el.getBoundingClientRect().top < vh) el.classList.add('is-in'); });
}
function tick() {
scan();
// Let the hidden state paint first, then reveal in-view blocks so the intro animates.
requestAnimationFrame(() => requestAnimationFrame(check));
}
function start() {
if (editActive()) editing = true; // editor already open — render everything visible
tick();
const root = document.getElementById('root');
if (root && 'MutationObserver' in window) {
new MutationObserver(() => { if (editActive()) revealAll(); else tick(); }).observe(root, { childList: true, subtree: true });
}
// Watch for the editor stamping its attributes anywhere, and un-hide instantly.
if ('MutationObserver' in window) {
new MutationObserver(() => { if (editActive()) revealAll(); }).observe(document.documentElement, {
attributes: true, subtree: true, attributeFilter: ['data-cc-id', 'data-dm-ref', 'data-dm-active', 'data-editing'],
});
}
window.addEventListener('scroll', check, { passive: true });
window.addEventListener('resize', check);
window.addEventListener('load', tick);
setTimeout(check, 300);
setTimeout(check, 800);
// Ultimate failsafe: if anything in the first viewport is still hidden after a
// moment (e.g. the page was frozen by tooling), reveal everything so it's never black.
setTimeout(() => {
if (editing) return;
const vh = window.innerHeight || 800;
const stuck = collectTargets().some((el) => el.__rvArmed && !el.__rvShown && el.getBoundingClientRect().top < vh * 0.5);
if (stuck) revealAll();
}, 2000);
}
// Debug helper — call window.__loncinRevealDebug() in the console.
window.__loncinRevealDebug = function () {
const all = collectTargets();
const armed = all.filter((e) => e.__rvArmed).length;
const shown = all.filter((e) => e.__rvShown).length;
const hiddenStuck = all.filter((e) => e.__rvArmed && !e.__rvShown && e.getBoundingClientRect().top < (window.innerHeight || 800));
const info = { targets: all.length, armed, shown, pending: pending.length, inViewButHidden: hiddenStuck.length };
/* eslint-disable no-console */
if (window.console) console.log('[Loncin reveal]', info, hiddenStuck.slice(0, 8));
return info;
};
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
else start();
})();
})
)}
{src && (
)}
{label}