feat: binary glow effects, refined drawings and calls to action
Dark surfaces now carry light: frames glow along their edge and shed binary digits (BitAura), dark sections open with a lit seam (BitSeam), the career path is a line of light and "My work" became a dark stage. Buttons carry a travelling light and a spot that follows the pointer (BitGlow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -91,6 +91,8 @@ export const BitHeadline: React.FC<{
|
||||
const reducedMotion = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
// Touch screens have no pointer to light the digits up, so a spot wanders on its own.
|
||||
const noHover = window.matchMedia("(hover: none)").matches;
|
||||
|
||||
let measured: Measured[] = [];
|
||||
let width = 0;
|
||||
@@ -306,6 +308,13 @@ export const BitHeadline: React.FC<{
|
||||
if (disposed) return;
|
||||
if (now - lastFrame >= FRAME_MS) {
|
||||
lastFrame = now;
|
||||
if (noHover) {
|
||||
const seconds = now / 1000;
|
||||
pointer = {
|
||||
x: width * (0.5 + 0.46 * Math.sin(seconds * 0.55)),
|
||||
y: height * (0.5 + 0.4 * Math.sin(seconds * 0.9 + 1)),
|
||||
};
|
||||
}
|
||||
paint(now);
|
||||
}
|
||||
raf = requestAnimationFrame(loop);
|
||||
@@ -339,7 +348,7 @@ export const BitHeadline: React.FC<{
|
||||
restart();
|
||||
setPainted(true);
|
||||
resizeObserver.observe(wrap);
|
||||
if (!reducedMotion) {
|
||||
if (!reducedMotion && !noHover) {
|
||||
window.addEventListener("pointermove", onPointerMove);
|
||||
document.addEventListener("pointerleave", onPointerLeave);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user