← Home

Scene compositions

Drop-in composed scenes. Each layers multiple effects under a single <CanvasScene> so they share one engine and tick together. Swap the picker values to see variant combinations live. Toggle Show characters on seasonal scenes to layer docs-site showcase pieces — these live in the docs repo, not the library, and demonstrate how consumers add bespoke overlays.

Seasonal

Winter, spring, summer, autumn.

Loading preview…
Winter WonderlandWinter

Winter-night sky with a constellation starfield, layered snow-scene, and a string of christmas lights. Swap the snow variant for a gentler light_snow or a full blizzard. Brand colours override the lights palette.

skystarfieldsnow-scenestring-lights
Time of day
Intensity
Snow
Lights
Brand palette
Loading preview…
Spring AwakeningSpring

Dawn sky with drifting cherry-blossom petals, occasional spring rain, and a small swarm of monarch butterflies. Gentle, hopeful — the default "peak bloom" setting leans into the seasonal showcase feeling.

skyrain-scenepetalsbutterflies
Time of day
Intensity
Bloom
Weather
Petals
Loading preview…
Summer ParadiseSummer

Tropical sky (day, sunset, or night) over a lagoon-calm ocean. Butterflies by day, fireflies at dusk and after. Cycle through the time-of-day picker to see the entire day roll through.

skyoceanbutterfliesfireflies
Time of day
Intensity
Ocean
Butterflies
Loading preview…
Autumn HarvestAutumn

Harvest-evening sky over drifting fall leaves and an optional valley fog. Swap the leaves variant for peak foliage saturated reds or a late-fall brown palette.

skyleavesfog
Time of day
Intensity
Leaves
Mist

Showcase

Thematic compositions outside the seasonal cycle.

Loading preview…
Northern LightsArctic

Winter-night sky with a distant halo starfield and aurora ribbons overhead. Optional light snow rounds out the arctic feel. The aurora prop cycles through all six ribbon variants.

skyparallax-starfieldaurorasnow
Intensity
Aurora
Snow
Loading preview…
Deep SpaceCosmic

The three.js cosmic stack playing together: a parallax starfield behind, a nebula in the middle distance, and an optional blackhole in the foreground. The nebula variant changes palette and structure — planetary nebula is a tight shell; supernova_remnant is asymmetric.

parallax-starfieldnebulablackhole
Intensity
Starfield
Nebula
Blackhole
Loading preview…
Firefly MeadowNight / calm

Calm night ambience: a starfield overhead, a low layer of valley fog, and a gentle firefly swarm. The fireflies variant controls swarm behaviour — woodland is synchronised, meadow_swarm is scattered, mating_display is highly coordinated.

skystarfieldfogfireflies
Intensity
Fireflies
Fog
Loading preview…
Stormy NightWeather / drama

Night sky + storm clouds + thunderstorm rain, with an optional solar-storm aurora overhead for a supernatural edge. Demonstrates how canvas2d weather effects layer without fighting when variants are tuned for mood.

skycloudsrain-sceneaurora (optional)
Intensity
Rain
Clouds
Loading preview…
UnderwaterAquatic

Dancing caustic light patterns on the sea floor + expanding ring ripples across the water surface + soft sea-mist haze for distance. A three.js-backed composition that reads unmistakably as submerged.

causticsripplesfog
Intensity
Caustics
Ripples
Haze
Loading preview…
SynthwaveRetro / abstract

Dusk sky + neon wireframe wave mesh + sparse void-region starfield. The library is not limited to naturalistic scenes — this composition leans fully into retro 80s aesthetics. Swap the waves variant to energy_field or lava_flow for alternative abstract moods.

skywaves (grid)parallax-starfield
Intensity
Sky
Waves

Each scene is a thin Vue wrapper around a <CanvasScene> holding the layers listed above. Use them verbatim, or copy their underlying effects directly into your own scene if you want different composition.

Character overlays (Snowman, ChristmasTree, SantaSled, PalmTrees, PumpkinPatch, AutumnTrees) live in the docs repo under app/components/characters/ — they are pure-SVG Vue components, not part of @orphnet/canvas-bg. Copy them into your project to build similar bespoke overlays.