This Website Feature Demands It Of You
Why Stack Overflow recommends it
Stack Overflow users link it as the source of the cursor-following blob and blur effect they are copying and then asking how to adapt or fix.
Recommended by 1 people across 1 different months, 2023 to 2024.
What it is
A short Hyperplexed tutorial showing how to recreate the glowing, mouse-following blob effect from the poppr.be website using HTML, CSS and JavaScript. It animates a blurred gradient blob that trails the cursor, with a CodePen provided.
What people said
Recommends soupbin · 2024-10 · Stack Overflow · on “Is there a way to have a dark background and "reveal" color using my mouse?”
I'm trying to code my own website for the first time and I'm running into some trouble. I'm following this tutorial [this video] in order to have a spotlight follow my mouse. Here's the code [LINK] . But I'd like to have a rainbow gradient across my entire homepage and have my spotlight show color as it's moving across the page while keeping the other parts of the screen dark, more similar to how the original website [LINK] , that the youtube tutorial is replicating, has shifting colors for the mouse as it moves across the screen. My idea was to have different layers: the dark background, the "blob", the gradient, then a blur like the tutorial. The gradient wouldn't show up against the dark backg
Cites zsoltp2 · 2023-03 · Stack Overflow · on “Effect stuck on first section”
So I've used this [this video] idea for my portfolio webpage, but i cant make it to be on the whole page. It's stuck on the first section, after I've added some content in its div to avoid that. I want it to behave the same when someone is scrolling on my page, and by that i mean that the "blob" and the "blur" effect remains on the page even at the bottom not only and the top. Does anyone know why it isnt? const blob = document.getElementById("blob"); const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" window.onpointermove = event => { const { clientX, clientY } = event; blob.animate({ left: `${clientX}px`, top: `${clientY}px` }, { duration: 3000, fill: "forwards" }); }; let interval = null; document.qu
Cites HXcoder · 2023-06 · Stack Overflow · on “why is the blur not affecting this part”
problem [LINK] I made a mouse trailer by watching this video - [this video] when i made a div to make the text and other stuff to add the area with the div just doesn't show the blur i tried using z-index but didn't work... i am kind of new so idk what else to try. I need this for my portfolio . CSS body { background-color: black; height: 100vh; margin: 0rem; overflow: hidden; } .text{ color:aquamarine; z-index : 99; } @keyframes rotate { from { rotate: 0deg; } 50% { scale: 1 1.5; } to { rotate: 360deg; } } #blob { background-color: white; height: 34vmax; aspect-ratio: 1; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: linear-gradient(to right, aquam