august
/
augustkline.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved jitter on lower-res displays

This commit is contained in:
august kline 2024-08-27 13:38:08 -04:00
parent 93985054f7
commit 3bae312ec4
3 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="text"> <div class="info">
<h1>hi! i'm august. or kline. </h1> <h1>hi! i'm august. or kline. </h1>
<p>i like to build systems. lately i've been working on <p>i like to build systems. lately i've been working on
<a href="https://git.augustkline.com/august/george" target="_blank" rel="noreferer">george</a>. <a href="https://git.augustkline.com/august/george" target="_blank" rel="noreferer">george</a>.

42
src/main.ts
View File

@ -25,7 +25,7 @@ const prefersReducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)", "(prefers-reduced-motion: reduce)",
).matches; ).matches;
let setImages = () => { const setImages = () => {
let images: string[] = []; let images: string[] = [];
let alts: string[] = []; let alts: string[] = [];
if (prefersReducedMotion) { if (prefersReducedMotion) {
@ -165,7 +165,22 @@ let setImages = () => {
} }
}; };
const moveImages = (t: number) => { const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches;
if (!mobile) {
const root = document.documentElement;
const onMove = (ev: MouseEvent) => {
const rotateY = `${-(ev.clientX - window.innerWidth / 2) * 0.003}deg`;
const rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.003}deg`;
root.style.setProperty("--rotate-x", rotateX);
root.style.setProperty("--rotate-y", rotateY);
};
document.addEventListener("mousemove", onMove);
}
window.addEventListener("load", () => {
background.setAttribute("loaded", "");
const noise = (t: number) => { const noise = (t: number) => {
return Math.sin(2 * t) + Math.sin(Math.PI * t); return Math.sin(2 * t) + Math.sin(Math.PI * t);
}; };
@ -174,6 +189,8 @@ const moveImages = (t: number) => {
return Math.round(v * 1e4) / 1e4; return Math.round(v * 1e4) / 1e4;
}; };
const dpi = window.devicePixelRatio;
const moveImages = (t: number) => {
const images = document.body.getElementsByTagName("img"); const images = document.body.getElementsByTagName("img");
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
const img = images[i]; const img = images[i];
@ -183,33 +200,18 @@ const moveImages = (t: number) => {
let left = toDomPrecision( let left = toDomPrecision(
Number(img.style.left.slice(0, img.style.left.length - 2)), Number(img.style.left.slice(0, img.style.left.length - 2)),
); );
top += noise(Number(img.getAttribute("seedY")) + t) * 0.1; top += (noise(Number(img.getAttribute("seedY")) + t) * 0.4) / dpi; // move faster on lower-res displays to improve jitter
left += noise(Number(img.getAttribute("seedX")) + t) * 0.1; left += (noise(Number(img.getAttribute("seedX")) + t) * 0.4) / dpi;
img.style.setProperty("top", `${top}px`); img.style.setProperty("top", `${top}px`);
img.style.setProperty("left", `${left}px`); img.style.setProperty("left", `${left}px`);
} }
t += 0.001; t += 0.0005;
window.requestAnimationFrame(moveImages.bind(this, t)); window.requestAnimationFrame(moveImages.bind(this, t));
}; };
window.addEventListener("load", () => {
background.setAttribute("loaded", "");
if (!prefersReducedMotion) { if (!prefersReducedMotion) {
moveImages(0); moveImages(0);
} }
}); });
const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches;
if (!mobile) {
const root = document.documentElement;
const onMove = (ev: MouseEvent) => {
const rotateY = `${-(ev.clientX - window.innerWidth / 2) * 0.005}deg`;
const rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.005}deg`;
root.style.setProperty("--rotate-x", rotateX);
root.style.setProperty("--rotate-y", rotateY);
};
document.addEventListener("mousemove", onMove);
}
setImages(); setImages();

31
style.css
View File

@ -63,7 +63,6 @@ a {
a:hover { a:hover {
text-shadow: 0rem 0.2rem 1rem var(--link-shadow-color); text-shadow: 0rem 0.2rem 1rem var(--link-shadow-color);
/* transform: rotate(-3deg); */
transform: translateY(-7%) scale(1.01); transform: translateY(-7%) scale(1.01);
} }
@ -95,21 +94,7 @@ img {
} }
} }
@media (prefers-reduced-motion: reduce) { .info {
#background {
transform: none;
}
a {
transition: none;
}
a:hover {
transform: none;
}
}
.text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -127,3 +112,17 @@ img {
-0.05rem 0.05rem 0px var(--text-border-shadow-color), -0.05rem 0.05rem 0px var(--text-border-shadow-color),
0rem 0rem 2rem var(--text-shadow-color); 0rem 0rem 2rem var(--text-shadow-color);
} }
@media (prefers-reduced-motion: reduce) {
#background {
transform: none;
}
a {
transition: none;
}
a:hover {
transform: none;
}
}