Skip to main content

Glow Orb Background

BackgroundGlowOrb Backgrounds & Effects JavaScript

A single soft light drifting on a random walk behind the site — never visibly repeating.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
BackgroundGlowOrb
Category
Backgrounds & Effects
Used as
Animated site background (Global Options)
Built with
PHP, Twig, SCSS, JavaScript
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

One blurred light drifts behind the page on a genuinely random walk: a new target is picked at irregular intervals and the orb eases toward it, so the motion never loops.

How to enable

Not a page block: choose it under Global Options → Site Background → Effect. Only one background runs at a time, site-wide, and it honours prefers-reduced-motion.

Options

This component isn't added as a page block, so it has no per-page fields — see "About this component" for where it is configured.

Under the hood

Components/BackgroundGlowOrb/

  • _style.scss Styles (SCSS) 27 lines
  • functions.php Fields & data (PHP) 9 lines
  • index.twig Markup (Twig) 3 lines
  • script.js Behaviour (JavaScript) 68 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components