Backgrounds & Colors
Animated backgrounds, mesh gradients, chromatic colors and noise textures.
Pool Caustics
The shifting light on a swimming-pool floor — an aqua vein network from dual thresholded feTurbulence (tent function + gamma), continuous SVG offset drift and pointer ripples (glow + expanding rings). Zero canvas, zero libs.
💡 Ideal for: pool residence heroes, spa & wellness landings, 5-star hotels, aquatic cosmetics.
Topographic Drift
An fBm noise field discretised into slowly drifting contour lines — the cursor raises a « hill » of concentric rings that follows it (rAF + lerp). 3 palettes (Slate · Teal · Sand), canvas 2D, zero libs.
💡 Ideal for: dev-tools SaaS heroes, analytics dashboards, infra/cloud landings, status pages.
Rain on Glass
Rain on glass in 2D canvas: refracting drops (night-city bokeh flipped and zoomed inside each drop), stick-slip physics, coalescence, and evaporating micro-droplet trails. ≤ 80 drops, DPR handled, zero dependencies.
💡 Ideal for: real-estate or autumn editorial heroes, weather landings, night-time login pages.
Ink Bloom
Watercolour blooms open with organic fractal edges (feTurbulence + dual feDisplacementMap) and layer into mixed pigments (multiply on cream paper, screen on dark). Edges keep breathing after the bloom; click blooms at the clicked point.
💡 Ideal for: gallery or portfolio heroes, creative landings, editorial covers, luxury sections.
Storm Veil
Procedural 2D canvas storm: branching lightning via midpoint displacement (3-pass halo→body→core render), parallax clouds, optional fine rain, soft capped flash (a11y, never a strobe). Every strike is unique; click strikes where you click.
💡 Ideal for: dramatic launch heroes, game landing pages, high-stakes teasers.
Mesh Gradient
Multiple radial gradients that slowly shift positions.
Floating Particles
Particles that continuously float upward.
Gradient Wave
Diagonal gradient animated in a smooth loop.
Aurora Borealis
Northern lights effect with dancing lights.
Grid Pattern
Technical grid with center vignette.
Noise Texture
Grain texture for a cinematic look.
Light Rays
Light rays in continuous rotation.
Animated Blobs
Floating organic shapes with blur.
Geometric Shapes
Animated floating geometric shapes.
Starry Night
Twinkling starry sky with shooting stars.
Aurora Effect
Northern lights effect with animated colorful gradients.
Noise/Grain Texture
Grainy SVG texture for a cinematic effect.
Animated Mesh Gradient
Animated mesh gradient with smooth transitions.
Star Field
Star field in continuous motion.
Gradient Animation Loop
Multicolor gradient in an infinite loop.
Network Lines
Geometric connected network lines.
Holographic Effect
Holographic effect with rainbow colors.
Dot Grid Pattern
Elegant and minimalist dot grid.
Floating Shapes
Colorful floating shapes with blur effect.
Spotlight Follow
Spotlight that follows the mouse cursor.
Aurora Mesh
Aurora borealis mesh with green, cyan and purple gradients that blend and slowly ripple.
Sunset Mesh
Warm-toned sunset mesh gradient — orange, pink, red and purple in motion.
Neon Mesh
Vibrant neon mesh with pulsating spots of electric blue, hot pink and lime green.
Pastel Mesh
Soft mesh gradient with lavender, mint and peach tones floating in harmony.
Monochrome Mesh
Elegant monochrome mesh in shades of blue and indigo, subtle and deep.
Interactive Mesh
Interactive mesh gradient whose color spots follow the mouse cursor.
Gradient Morph
The mesh morphs between two completely different color palettes every few seconds.
Noise Mesh
Mesh gradient overlaid with a subtle SVG noise texture for an organic, textured look.
Glass Mesh Card
Card with colorful mesh background and glassmorphism overlay with blur and transparency.
Animated Border Mesh
Animated border made of a multicolor mesh gradient rotating around the element.
Color Breathing Gradient
Breathing gradient animating angle and hues via @property in OKLCH color space.
Duotone Image Filter
Transforms content to duotone on hover using mix-blend-mode and grayscale.
Halftone Effect
SVG filter with feComponentTransfer and feMorphology for an animated halftone pattern on hover.
Chromatic Aberration Text
RGB channel separation on hover creating a prismatic effect with pseudo-elements.
Color Mix Crossfade
Two colors blended via color-mix() showing oklch vs srgb blending paths.
Neon Glow Pulse
Elements with pulsing neon glow via multiple animated box-shadow layers.
Gradient Spotlight
Radial gradient follows the cursor revealing vibrant colors under a muted surface.
Thermal Vision
Heat map with hot/cold zones that react to hover interaction.
Color Space Morph
Gradient transitioning between sRGB vs OKLCH color spaces showing midpoint differences.
Relative Color Palette
Entire palette derived from a single base color via OKLCH and computed custom properties.