@orphnet/canvas-bg

Canvas effects that don't reinvent the RAF loop.

38 production-grade visual effects for Vue 3 and Nuxt 4 — particles, weather, cosmic scenes, waves and text treatments. SSR-safe, lazy three.js, and eight performance guardrails baked in.

Browse 38 effects → Open playground

↑ that's not a video. it's the library.

Five categories. One pluggable engine.

Every effect plugs into the same Scene/Layer primitives, so you can stack them — a Sky beneath an Aurora beneath a Starfield, all sharing one RAF loop.

ParticlesCanvas2D particle systems — low cost, great for ambient backgrounds.WeatherAtmospheric scenes: snow, rain, fog, clouds, aurora.CosmicThree.js-backed depth effects — starfields, galaxies, warp.WavesThree.js plane-mesh wave and ripple surfaces.TextPer-character text treatments with selectable DOM text.

Why use this over hand-rolling a canvas?

SSR-safe by default

Server renders a sized <div> only — never a stray canvas. Engine boots inside onMounted, swaps the poster image for the live canvas, and tears down cleanly on unmount.

Eight guardrails on by default

Pause when off-screen, pause when tab hidden, respect prefers-reduced-motion, FPS cap, DPR cap, IntersectionObserver, ResizeObserver debounce, mobile-tier downgrade.

Lazy three.js & pixi.js

Particle and weather effects ship pure canvas2d. Three and Pixi only load when an effect that needs them mounts — so a project using only <Snow /> never pulls a single byte of WebGL bundle.

Configurable via preset, prop, or object

Each effect ships variant presets, individual convenience props, and a raw config escape hatch. Composition uses the standard Scene/Layer/Effect primitives — stack as deep as you like.

Five-minute setup.

Install

# Bun
bun add @orphnet/canvas-bg

# Or with npm / pnpm / yarn
npm i @orphnet/canvas-bg

Use it

<script setup lang="ts">
// Nuxt 4: add '@orphnet/canvas-bg/nuxt' to modules
// and components auto-register.
</script>

<template>
  <CanvasScene class="absolute inset-0">
    <Aurora preset="northernLights" />
    <Starfield :count="200" />
  </CanvasScene>
</template>