mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
fix(live): scope scroll lock to session wrapper, let user scroll cancel corrections
Watching document.body caught every mutation on the page — shader animations, Bun HMR indicators, tooltips, anything — and fired a correction on each one, which fought the user when they tried to scroll mid-session. Now the observer only responds to mutations inside the session's wrapper. On user scroll intent (wheel / touchstart / touchmove / arrow & page keys), cancel any pending rAF correction and re-anchor to the element's new position, so momentum scrolls don't get yanked back by a stale correction. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
ad17880af1
commit
b99ab4db2c
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
+188
-3
@@ -719,10 +719,195 @@
|
||||
<div class="consulting-content" data-reveal>
|
||||
|
||||
|
||||
<div class="consulting-text">
|
||||
<h2 class="consulting-title">Work with me</h2>
|
||||
<p class="consulting-desc">Impeccable is built by <a href="https://renaissance-geek.ai" target="_blank" rel="noopener">Renaissance Geek</a>. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.</p>
|
||||
<!-- impeccable-variants-start ec52f1ff -->
|
||||
<div data-impeccable-variants="ec52f1ff" data-impeccable-variant-count="3" style="display: contents">
|
||||
<!-- Original -->
|
||||
<div data-impeccable-variant="original">
|
||||
<div class="consulting-text">
|
||||
<h2 class="consulting-title">Work with me</h2>
|
||||
<p class="consulting-desc">Impeccable is built by <a href="https://renaissance-geek.ai" target="_blank" rel="noopener">Renaissance Geek</a>. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Variants: insert below this line -->
|
||||
<style data-impeccable-css="ec52f1ff">
|
||||
@scope ([data-impeccable-variant="1"]) {
|
||||
.consulting-text {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 24px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--color-mist);
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
}
|
||||
.v1-title {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
color: var(--color-ink);
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v1-sep {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-accent);
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.v1-desc {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-charcoal);
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.v1-desc a {
|
||||
color: var(--color-ink);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@scope ([data-impeccable-variant="2"]) {
|
||||
.consulting-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 62ch;
|
||||
}
|
||||
.v2-title {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: clamp(2.25rem, 4vw, 3rem);
|
||||
line-height: 1.05;
|
||||
color: var(--color-ink);
|
||||
margin: 0;
|
||||
}
|
||||
.v2-deck {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.35;
|
||||
color: var(--color-accent);
|
||||
margin: 0;
|
||||
}
|
||||
.v2-desc {
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-charcoal);
|
||||
margin: 0;
|
||||
}
|
||||
.v2-desc a {
|
||||
color: var(--color-ink);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: var(--color-accent);
|
||||
}
|
||||
.v2-desc a:hover { color: var(--color-accent); }
|
||||
}
|
||||
|
||||
@scope ([data-impeccable-variant="3"]) {
|
||||
.consulting-text {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(auto, 60%) minmax(240px, 36ch);
|
||||
gap: 48px 64px;
|
||||
align-items: end;
|
||||
padding: 40px 0 20px;
|
||||
}
|
||||
.v3-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
.v3-stack-line {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-size: clamp(5rem, 13vw, 10rem);
|
||||
line-height: 0.88;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--color-ink);
|
||||
margin: 0;
|
||||
}
|
||||
.v3-stack-line:nth-child(2) {
|
||||
padding-left: 0.25em;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.v3-stack-line:nth-child(3) {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.v3-rail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-left: 1px solid var(--color-ink);
|
||||
padding-left: 24px;
|
||||
align-self: stretch;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.v3-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.625rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3em;
|
||||
color: var(--color-ash);
|
||||
}
|
||||
.v3-desc {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
color: var(--color-charcoal);
|
||||
margin: 0;
|
||||
}
|
||||
.v3-desc a {
|
||||
color: var(--color-ink);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-color: var(--color-accent);
|
||||
}
|
||||
.v3-desc a:hover { color: var(--color-accent); }
|
||||
}
|
||||
</style>
|
||||
<div data-impeccable-variant="1">
|
||||
<div class="consulting-text">
|
||||
<h2 class="v1-title"><em>Work with me.</em></h2>
|
||||
<span class="v1-sep">///</span>
|
||||
<p class="v1-desc">Built by <a href="https://renaissance-geek.ai" target="_blank" rel="noopener">Renaissance Geek</a> · Rollouts · Integrations · Training · <a href="mailto:paul@renaissance-geek.ai">Say hello</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-impeccable-variant="2" style="display: none">
|
||||
<div class="consulting-text">
|
||||
<h2 class="v2-title">Work with me.</h2>
|
||||
<p class="v2-deck">Rollouts, integrations, and training for teams that take AI-generated design seriously.</p>
|
||||
<p class="v2-desc">Impeccable is built by <a href="https://renaissance-geek.ai" target="_blank" rel="noopener">Renaissance Geek</a>. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div data-impeccable-variant="3" style="display: none">
|
||||
<div class="consulting-text">
|
||||
<div class="v3-stack">
|
||||
<span class="v3-stack-line">Work</span>
|
||||
<span class="v3-stack-line">with</span>
|
||||
<span class="v3-stack-line">me.</span>
|
||||
</div>
|
||||
<div class="v3-rail">
|
||||
<span class="v3-tag">Consulting · Renaissance Geek</span>
|
||||
<p class="v3-desc">Impeccable is built by <a href="https://renaissance-geek.ai" target="_blank" rel="noopener">Renaissance Geek</a>. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- impeccable-variants-end ec52f1ff -->
|
||||
|
||||
|
||||
<div class="consulting-actions">
|
||||
|
||||
@@ -1364,19 +1364,39 @@
|
||||
scrollLockRaf = requestAnimationFrame(correct);
|
||||
};
|
||||
|
||||
scrollLockObserver = new MutationObserver(schedule);
|
||||
// Filter to mutations that touch our session's wrapper. Watching the
|
||||
// whole body means shader animations, HMR indicators, tooltips, and
|
||||
// every other DOM change elsewhere on the page fires corrections —
|
||||
// which fight the user on scroll.
|
||||
scrollLockObserver = new MutationObserver((mutations) => {
|
||||
for (const m of mutations) {
|
||||
if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
for (const n of m.addedNodes) {
|
||||
if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) {
|
||||
schedule();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
scrollLockObserver.observe(document.body, { childList: true, subtree: true });
|
||||
|
||||
// Treat explicit user scroll intent as a re-anchor: update the target
|
||||
// top to wherever the element is now, so we don't fight the user.
|
||||
// Treat explicit user scroll intent as a re-anchor: cancel any pending
|
||||
// correction, then update the target top to the element's new position
|
||||
// so we don't drag them back on the next mutation.
|
||||
scrollLockAbort = new AbortController();
|
||||
const sig = { signal: scrollLockAbort.signal };
|
||||
const reanchor = () => {
|
||||
if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; }
|
||||
const el = resolveScrollLockTarget(sessionId);
|
||||
if (el) scrollLockTargetTop = el.getBoundingClientRect().top;
|
||||
};
|
||||
window.addEventListener('wheel', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchstart', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('touchmove', reanchor, { passive: true, ...sig });
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor();
|
||||
}, sig);
|
||||
|
||||
Reference in New Issue
Block a user