so the face particles look great on my machine but the second i opened the site on a cheaper laptop my heart sank. it was chugging. like slideshow chugging. and this whole project has one rule i promised myself: silky on high-end, but still actually usable on low-end. so a section that only runs well on my own gpu is basically a broken section.
i tried everything to save it. dropped the particle count way down, then dropped it again. wired up the frameloop so the canvas only renders when it’s actually on screen and pauses when you scroll away or tab out. all of that helped a bit but not enough — it was still the heaviest thing on the page by a mile and the low-end numbers barely moved. at some point you have to admit the effect just wants more gpu than i’m allowed to spend.
so i’m parking the face for now (code’s still there, i’ll come back to it) and building out the tech stack section instead, something that leans on scroll and layout instead of the gpu.
the idea: your logos stream across the screen as you scroll while a big “Techstack” headline sits locked in the center. but they don’t just slide past in a straight line — each card arcs above or below the center line and curves around the headline, like the text has gravity and the logos are in orbit around it. cards on even positions bend one way, odd ones bend the other, so it reads as this constant weave flowing past the title.
the fun part is the math is all cpu, basically free. the row scrolls horizontally on a pinned scrolltrigger, and every frame i just measure where each card is relative to the headline. the closer a card gets to the title, the more it lifts off the center line to clear it (so nothing ever overlaps the text), and it eases back down as it leaves — that’s the orbit curve. i also give cards a little scale bump right as they cross the middle of the screen so there’s a soft focal point in the center. no shaders, no particles, no webgpu. runs smooth everywhere, which is the whole point.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.