Backgrounds

Calm, full-bleed aurora wash of drifting colour fields for hero and section backdrops. Pure CSS, no canvas or JS, fixed low opacity so body text keeps AA contrast on top.

Astro

A static technical drafting-table grid with fine minor rules, bolder major rules every few cells, and a faint crosshair origin marker — a precise, no-motion backdrop for engineering, CAD and dev-tool pages.

Astro

Soft, out-of-focus circles in varied sizes and blur drifting gently behind your content, like camera bokeh behind a subject. Warm and photographic rather than geometric — a gentle backdrop for testimonials, pricing, and about pages.

Astro

PCB-style wiring paths with travelling light pulses, giving technical and infrastructure pages a systems-and-signal backdrop without any canvas or extra dependency.

React

Slow drifting field of points that link into triangles when close, like a star map redrawing itself. A calm 'data / network / intelligence' backdrop for dashboard, pricing, and AI-product heroes.

React

A soft radial glow that tracks the pointer across a section. One passive pointermove listener writes two CSS variables — no animation loop, no canvas — and it is never attached at all on touch devices or under reduced motion, which get a fixed centred glow in pure CSS.

Astro

A slow, restrained drift of diagonal bands behind a section — reads as quiet motion rather than decoration, so body copy, forms and pricing tables stay fully legible on top.

Astro

Three depth layers of a dot matrix that drift at different rates with the pointer, giving a flat section real depth. The structured counterpart to free-floating particle backgrounds — sits behind pricing tables, feature grids, and app screenshots.

React

Stripe-style ribbon of thin lines that twists in pseudo-3D — additive blending lights up a glowing fold where the lines bunch. Pure canvas, zero dependencies.

React

Drifting colour blobs that visibly merge and separate through an SVG goo filter, rather than only blending transparently. Pure CSS and one static filter — no canvas, no JS, nothing to tear down.

Astro

An animated glowing gradient frame that traces the edge of a card or section to single it out — a rotating ring plus soft halo, never a fill, so the content inside stays untouched.

Astro

Film-grain texture layer that kills gradient banding and flat-colour plasticky sections. Zero JS, zero canvas — an SVG noise filter with a gentle four-step flicker.

Astro

A print-style halftone screen whose dots genuinely shrink across the section, like a Ben-Day tone fading to paper. Gives editorial, comic, or print-brand sections real texture instead of a flat gradient, with zero client-side JS.

Astro

A wireframe lattice of isometric cubes that drifts sideways at a pace too slow to notice as motion, only as alive. Sits quietly behind pricing tables, dashboards, and dev-tool marketing pages without competing with copy on top.

React

An analogue-film light leak hugging one corner, warm colour streaks drifting slowly like mis-loaded stock. Adds instant warmth and texture to photography, film, and brand-story sections without a stock-photo overlay.

Astro

Generative maze that grows outward from a seed cell, drawing itself as a living background. Canvas-based, self-contained, pauses when off screen and stops entirely under prefers-reduced-motion.

Astro

Four soft, oversized colour blobs with morphing organic edges that glide slowly behind content, like a modern gradient-mesh backdrop. Pure CSS, no canvas or JS, fixed low opacity so body text keeps AA contrast on top.

Astro

A fine fibre-grain surface for editorial sections and long-form reading panels — calmer and more static than a film-grain overlay, like uncoated paper stock instead of a scanned photo.

Astro

A tilted grid receding to a glowing horizon, drifting slowly forward — the retro-tech synthwave floor, played tasteful rather than loud, for hero sections behind a product shot or a developer-tool landing page.

Astro

A static grid of nodes where a build-time-seeded subset lights and fades on independent randomised timers, like status LEDs on a server rack. The nodes never move — only brightness breathes.

Astro

Two depth layers of thin falling rain streaks for a nocturnal backdrop. Pure CSS repeating-gradient loop, no JS, no canvas.

Astro

Slow concentric rings expanding from an off-centre point, like a stone dropped in still water. Pure CSS, built for dark hero sections that want quiet, premium motion without the weight of a canvas loop.

Astro

Retro-CRT scanline texture with a slow diagonal light sweep, for terminal, dev-tool, and dark dashboard heroes that need hardware texture instead of flat black. Pure CSS, zero JS.

Astro

Diagonal line field whose drift and tilt are driven by actual scroll position, not a timed loop — native scroll-timeline CSS where supported, rAF fallback elsewhere. Reverses on scroll-up, freezes the instant scrolling stops.

React

A calm field of drifting motes, each sized and faded differently, rising slowly behind content for quiet ambient depth without the sparkle or clutter of a festive particle effect.

Astro

A single soft beam of light passing over a dark section with a quiet top-down vignette, like a stage spotlight crossing the back wall. One deliberate moment of motion for dark hero panels and feature reveals, not a busy texture. Pure CSS, no canvas or JS.

Astro

A quiet, layered field of drifting stars that gives any dark section real depth — near points move faster and glow brighter, far points barely shift. Reads as premium and spacious, not busy, and never distracts from content laid over the top.

React

A quiet hexagon or triangle grid with one soft highlight travelling across it, like light catching a cut-glass surface. The grid is drawn to canvas once (on mount and resize, never per frame); only a single masked CSS transform animates, so it costs nothing while idle. Built for pricing tables, technical docs, and enterprise-leaning sections.

React

Stacked elevation-map contour lines that breathe in and out like a slow survey map. Gives fintech, mapping, and B2B-data sections a technical backdrop without another gradient blob. SSR-deterministic SVG, zero JS.

Astro

A soft breathing edge-darkening that pulls focus back to centred content — built for hero statements and single-CTA sections that want quiet emphasis, not a hard spotlight.

Astro

Three stacked translucent wave bands travelling along a section’s bottom edge like a calm shoreline, built from a seamlessly looping SVG path.

Astro