@webloved: How I build with GPT-6 Astra 👇 Academy in bio 🔗 The topographic line field, that rippling contour background: 1. Canvas, not images. Draw 60 to 80 horizontal polylines, one every 12px down the screen 2. Each point is y = baseY + Math.sin(x * 0.008 + time) * amplitude. That alone gives you flat waves 3. The bulge is the whole trick: scale amplitude by distance from a focal point. amp = 60 / (1 + dist / 180). Lines near the center swell, lines far away flatten out 4. Style it thin: ctx.lineWidth = 1, strokeStyle rgba(255,255,255,.35) on a deep background. Thin and many beats thick and few 5. Animate with requestAnimationFrame, time += 0.01, and wrap it in a prefers-reduced-motion check 6. Put your 3D object above it with z-index. The field reads as a force field around the object Same field works for audio brands, energy, anything that needs to feel like a signal. Save this if you want backgrounds that move 🌊 #astra6 #buildinpublic #webdesign #motion #fyp

weblove

Open In TikTok:

Region: PT

Saturday 12 September 2026 15:10:54 GMT