@webloved: How I build with Lovable 👇 Academy in bio 🔗 Starfield with comet trails, step by step: 1. Canvas position fixed, inset 0, z-index 0, pointer-events none. Content sits above with position relative, z-index 1. 2. Build 220 stars: random x and y, r between 0.4 and 1.6, and a tw value between 0.5 and 2. Draw each with ctx.arc and fillStyle rgba(255,255,255,a). 3. Twinkle: a = 0.35 + Math.sin(t * star.tw) * 0.3. Never a flat white dot. 4. Trails: do NOT use clearRect. Each frame set ctx.fillStyle = 'rgba(5,5,10,0.14)' and fillRect(0,0,W,H). Old pixels fade and the comets leave a streak. 5. Comets: fix an angle around 0.5 rad, then x += Math.cos(angle) * 6 and y += Math.sin(angle) * 6. Reset off screen after a random delay. 6. Loop with requestAnimationFrame and pass the timestamp into step 3. 7. Retina fix: canvas.width = W * devicePixelRatio, then ctx.scale(dpr, dpr), or it looks blurry. Bottom rail that tracks where you are: 8. Give every section an id, nav links are href="#mission" and so on. 9. new IntersectionObserver with threshold 0.5, add an active class to the matching link. 10. Progress line: scrollY / (document.body.scrollHeight - innerHeight), feed it into transform: scaleX() with transform-origin left. Logo row that never stops: 11. Duplicate the logo list twice in the DOM, animate translateX from 0 to -50%, linear infinite. The seam is invisible. Save this if you want a hero that feels alive ✨ #lovablepartner #buildinpublic #webdesign #motion

weblove

Open In TikTok:

Region: PT

Tuesday 28 July 2026 20:44:46 GMT