Skip to main content

Animated Backgrounds — Playground

Your content sits on top

The effect renders behind — pick one on the right and tweak it.

Aurora — options
Sample option — updates as you tweak
'bg_effect' => [
    'effect' => 'aurora',
    'aurora' => [
            'color_a' => [ 'predefined' => '', 'custom' => '#6a8dff' ],
            'color_b' => [ 'predefined' => '', 'custom' => '#c56cff' ],
            'color_c' => [ 'predefined' => '', 'custom' => '#00d4c8' ],
            'speed' => 8,
    ],
],

Animated Backgrounds attach to a container (Section, Bleed Section, Masonry Section or Row) — the Background Effect option on its Style tab.bg_effect is a multi-picker (the effect + its own sub-options); color fields use the theme color-preset picker (stored as [ 'predefined' => '', 'custom' => '#hex' ]). Only the one chosen effect's tiny JS/CSS ships, and it honours reduced motion.

Pick an effect on the right, then tweak its colors / density / speed — it renders behind the sample content exactly as it does behind a real section. This runs the real module: the shared canvas engine (the particle field and metaball blob sub-engines) plus each effect's own builder, and the verbatim CSS for the gradient/pattern effects. All 35 effects are here — nothing is stubbed. The Sample option updates as you tweak. (The stage is dark so light particles and glows read clearly; on a real page the effect sits behind your section's own background.)

Where it lives

Animated Backgrounds attach to a container — a Section, Bleed Section, Masonry Section or Row → Style tab → Background Effect. Only the one chosen effect's small JS/CSS ships, canvas effects pause off-screen and while the tab is hidden, and it honours reduce motion.

← Back to Animated Backgrounds