Frontend · Canvas · Interaction Design

Five Touchable Background Effects That Replace CSS Gradients

By 牧艺 · Aug 31, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Landing pages and login screens routinely settle for static CSS gradients or heavy Three.js demos. These five components offer a middle tier: installable, parameter-tunable, interactive backgrounds that degrade gracefully and pause when the tab is hidden, making them practical for production without the overhead of a full 3D engine.

Summary

The release adds SoapBubbles (thin-film iridescence with merge state machines), DandelionField (a full plant lifecycle from sprout to seed dispersal with pointer wind interaction), LavaBubble (CPU field simulation rendered via WebGL fragment shaders), InkBloom (density and velocity fields with permanent mass-conserving stain), and AuroraVeil (row-by-row EdgeProfile ribbons with offscreen glow compositing). All five share the same engineering conventions: `fill` to cover the parent, `bindVisibilityPause` to stop rAF on tab switch, `prefers-reduced-motion` static-frame fallback, and independent `@cos-design/*` sub-packages installable without pulling the entire library.

Each component solves a specific visual problem that CSS gradients and simple particle demos fail to address—real bubble merging, ecosystem closed loops, lava blister event chains, cumulative ink staining, and bendable aurora ribbons. The library now totals 91 components, building out what the author calls a "media dimension" of background effects spanning thin film, life, heat/crust, fluid, and light.

Takeaways

— SoapBubbles uses thin-film interference color interpolation across 8 stops, not simple transparency, and a merge state machine that conserves volume via ∛(r₁³+r₂³) with metaball rendering.

— DandelionField is a plant state machine (sprout → flower → puffing → mature → wither) with irregular seed release and a germination closed loop; pointer velocity drives a wind field that accelerates dispersal.

— LavaBubble runs a 192×192 CPU field simulation for height, heat, and cavity, packing them into an RGB texture that a WebGL fragment shader reads for normal calculation and six-segment heat coloring.

— InkBloom maintains three fields—density, velocity, and permanent stain—with vorticity confinement to produce wispy filaments; dissolved ink mass transfers to stain, darkening the entire water background cumulatively.

— AuroraVeil describes light bands as row-by-row EdgeProfile samples (center x, half-width) rather than textures, with pointer magnetic bending, half-width narrowing, and click-triggered full-screen ripple pulses.

— All five components ship as independent `@cos-design/*` packages, support `bindVisibilityPause` to stop requestAnimationFrame on tab switch, and degrade to static frames under `prefers-reduced-motion`.

— Next.js App Router integration requires dynamic import with `ssr: false` since Canvas and WebGL are client-only.

— The library recommends placing only one strong full-screen animated background per page to avoid visual and GPU contention.

Conclusions

The five components are deliberately modeled as distinct physical media—thin film, life, heat/crust, fluid, and light—rather than as visual themes, which makes the library composable across different brand tones without stylistic overlap.

Splitting LavaBubble into CPU simulation and GPU shading is a pragmatic architecture choice: lifecycle logic and randomness stay on the CPU where branching is natural, while pixel-scale lighting is offloaded to a shader reading a modest 192² texture.

InkBloom's permanent stain field is the key differentiator from typical blur-circle ink effects; mass conservation means the background irreversibly darkens with each interaction, creating a cumulative feedback loop that blur stacking cannot replicate.

AuroraVeil's row-by-row EdgeProfile approach avoids both the wallpaper flatness of CSS gradients and the parameter-tuning barrier of WebGL noise shaders, hitting a sweet spot for designers who want interactive auroras without graphics programming.

The `bindVisibilityPause` and `prefers-reduced-motion` conventions baked into every component address the real production concern that animated backgrounds burn battery and CPU when the tab is backgrounded or the user has motion sensitivity enabled.

Concepts & terms

Thin-film interference

The optical effect where light reflecting off the front and back surfaces of a thin film (like a soap bubble) produces color patterns based on film thickness. SoapBubbles interpolates across 8 interference color stops to simulate this.

Metaball rendering

A technique for drawing merging organic shapes where two objects' contours blend smoothly when they come close, rather than overlapping as distinct circles. Used in SoapBubbles for bubble merging and in BubbleField for underwater bubble clusters.

Vorticity confinement

A fluid simulation technique that amplifies existing curl (rotation) in a velocity field to preserve fine vortex details that numerical diffusion would otherwise smooth out. InkBloom uses it to pull wispy ink filaments instead of perfect circular diffusion.

EdgeProfile

A row-by-row representation of a light band as a sequence of center-x and half-width values per y-coordinate, cached in Float32Arrays. AuroraVeil uses this instead of textures to enable real-time pointer bending and pulse perturbations.

Field simulation (CPU-side)

Maintaining and updating scalar grids (height, heat, cavity) on the CPU with branching logic for events like blister bursting, then uploading the result as a texture for GPU rendering. LavaBubble uses this split to keep simulation logic in JavaScript while the shader handles pixel lighting.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗