<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1> <title></title> <style> body,html margin:0;padding:0;overflow-x:hidden;background:black; font-family:'Comic Sans MS', cursive, sans-serif; color:#d0f5e9; / that nauseating mint / touch-action:pan-y; cursor:none; #cursor position:fixed;z-index:100;pointer-events:none; width:30px;height:30px;border:1px solid rgba(208,245,233,0.2); border-radius:50%;transform:translate(-50%,-50%); transition:transform .3s, opacity .8s; #cursor.fadeopacity:0; #paintings position:relative;height:300vh;transition:opacity 2s; .painting position:absolute;width:70vw;height:auto;max-height:70vh; top:10vh;opacity:0;transition:all .6s cubic-bezier(.17,.67,.83,.67); transform:translateY(30vh) scale(.9);filter:blur(4px); .painting.active z-index:5;opacity:1;transform:scale(1) translateY(5vh);filter:blur(0); .painting.blurredfilter:blur(6px); #contact position:fixed;left:3vw;bottom:3vh;font-size:1.2rem; writing-mode:tb-rl;opacity:.2;transition:opacity .5s; #contact:hoveropacity:.7; #musicopacity:0;height:0; audiodisplay:none; </style> </head> <body> <div id=cursor></div> <a id=contact href=mailto:you@example.com?subject=shadows>matthew</a> <div id=paintings></div> <audio id=music loop> <source src=https://tinyurl.com/cracked-lullaby type=audio/mpeg> </audio> <script> let pics = [ https://drive.google.com/uc?id=YOURFIRSTFILEID, // ... replace each link with real ones // or if they're in same folder, just img1.jpg,img2.jpg etc. ]; let audio = document.getElementById(music); let paintings = document.getElementById(paintings); let cursor = document.getElementById(cursor); let contact = document.getElementById(contact); // preload window.onload = () => pics.forEach((src,idx)=> let p = document.createElement(img); p.className=painting; p.src=src; p.style.left = (30+Math.random() 20)+vw; paintings.append(p); ); setTimeout(()=> audio.play().catch(()=>), 1200); ; // cursor document.addEventListener(mousemove,e=> cursor.style.left = e.clientX + px; cursor.style.top = e.clientY + px; ); // parallax + focus let ticking = false; window.addEventListener(scroll,()=> if(ticking) return; ticking=true;requestAnimationFrame(()=> let y = window.scrollY; document.querySelectorAll(.painting).forEach((p,i)=> let t = 1.4 y - i 300; if(t>0) p.classList.add(active); p.classList.remove(blurred); else if(t<-200) p.classList.remove(active); p.classList.add(blurred); ); ticking=false; ); ); </script> </body> </html>