← Home

Effects catalogue

Every effect in @orphnet/canvas-bg, live. Each tile runs a real RAF loop, pauses when scrolled off-screen, and respects prefers-reduced-motion. Click any tile to open it in the playground.

Particles

14 effects

Canvas2D particle systems — low cost, great for ambient backgrounds.

StarfieldTwinkling static star field.
canvas2d
SnowDrifting snowflakes with gentle sway.
canvas2d
RainVertical rain streaks.
canvas2d
SparksShort-lived glowing sparks.
canvas2d
DustAmbient drifting dust motes.
canvas2d
ConfettiBursting confetti cohorts.
canvas2d
FirefliesWandering glowing particles.
canvas2d
LeavesFalling autumn leaves with rotation.
canvas2d
PetalsDrifting cherry-blossom petals.
canvas2d
ButterfliesFlapping butterflies wandering the scene.
canvas2d
String LightsHanging fairy lights with bokeh.
canvas2d
BubblesRising bubbles with wobble and highlights.
canvas2d
EmbersWarm rising glowing embers.
canvas2d
Matrix RainFalling glyph columns with bright leading head.
canvas2d

Weather

7 effects

Atmospheric scenes: snow, rain, fog, clouds, aurora.

SkyVariant-rich gradient sky with optional sun or moon.
canvas2d
AuroraFlowing aurora borealis ribbons.
canvas2d
FogSoft volumetric fog drift.
canvas2d
CloudsSlow drifting cloud puffs.
canvas2d
Snow SceneFalling snow with ground accumulation.
canvas2d
Rain SceneRain with optional lightning flashes.
canvas2d
LightningBranching lightning bolts with sky flash.
canvas2d

Cosmic

8 effects

Three.js-backed depth effects — starfields, galaxies, warp.

Parallax Starfield3D parallax star depth.
three
WarpHyperspace tunnel travel.
three
NebulaColourful gas cloud drift.
three
GalaxySpiral galaxy rotation.
three
BlackholeAccretion disk + event horizon.
three
MeteorsDiagonal meteor streaks over a star field.
canvas2d
Synthwave Grid80s perspective grid receding to a horizon sun.
canvas2d
PlasmaLava-lamp colour blobs blending across the canvas.
canvas2d

Waves

4 effects

Three.js plane-mesh wave and ripple surfaces.

WavesStylised sine wave mesh.
three
Ocean4-wave Gerstner ocean surface.
three
RipplesSpawning ring sources on a plane.
three
CausticsAdditive caustic points pattern.
three

Text

6 effects

Per-character text treatments with selectable DOM text.

canvas-bg
Glitch TextRGB-split digital glitch overlay.
canvas2d
canvas-bg
Shimmer TextMoving highlight shimmer.
canvas2d
canvas-bg
Fire TextFlame distortion above text.
canvas2d
canvas-bg
Liquid TextRippling liquid displacement.
canvas2d
canvas-bg
Neon TextGlowing neon tube outline.
canvas2d
canvas-bg
Typewriter TextLeft-to-right character reveal.
canvas2d