Backgrounds — WebGL Mesh
01 / 13 · GLSL · Stripe-styleGLSL · Stripe-style
WebGL Mesh
GLSL shader with double sin/cos noise + HSL palette. Colors morph continuously. Stripe.com hero vibe.
premium CSS · 7 blobs
Mesh Gradient
7 large radial-blur blobs drift asynchronously (8-13 s cycle), multiply blend + SVG noise overlay.
drei · Stars
3D Star Field
6000 stars via drei.Stars, slow group rotation. Lazy-mount when scrolled into viewport.
R3F · square points · palette-flex
Confetti / Paper Bits
4000 square particles via R3F <points> without circle-sprite. 4-color palette peach/mint/pink/yellow. Alternative to StarField for playful/kids/celebratory sites.
drei · MeshDistortMaterial
Distort Blob
Gold metalness sphere with MeshDistortMaterial (distort 0.45, speed 1.2). Rotates + breathes.
R3F · transmission
3D Bubbles
30 transmission spheres rise with varying speeds. Each is a physical material with IOR 1.4.
premium CSS
Aurora Curtains
Three color «curtains» via linear-gradient + screen blend + 60 px blur. 60 twinkling stars.
canvas 2D · 600
Particle Vortex
600 points on a logarithmic spiral, motion-blur trail (alpha 0.15). Color in the HSL gold range.
canvas 2D · 80 + lines
Particle Network
80 points wander chaotically, lines drawn between points closer than 150 px. Line opacity = distance.
canvas · noise field
Flow Field
250 particles driven by a vector field (sin/cos of position and time). Trail via alpha-clear.
SVG · animated paths
Wavy SVG
Three SVG sine curves with linear-gradient stroke. Animated stroke-dashoffset.
CSS · 4 fast blobs
Liquid Morph
4 large color blobs (pink/cyan/yellow/purple) morph with mix-blend-mode: color. 5-8 s cycle.
CSS perspective
Synthwave Grid
Perspective grid via CSS rotateX(60deg). Lines run toward you. Retro sun with horizontal bands.