Shader Pack 2: Calm Motion
Aurora Veil, Halftone Tide, Coral Bloom, Ridgeline and Caustic Depths: five animated WebGL website backgrounds with calm, slow motion, each with HTML drop-in and Divi 5 versions.
// Divi 5 readyImport, edit, publish. No code.
- 01Divi 5 sectionJSON import via Portability
- 02Code module fallbackPaste-in plan B
- 03HTML drop-inAny other site
// License
$20.00
Instant downloadDivi 5 import insideFree 1.x updates
// 01 Divi 5 install
Works in Divi without touching code
Every download includes a ready-made Divi 5 section for each shader (packs also include one file with all five). Import it, change the words, save. Hand the page to a client and they edit it like any other section, while the shader keeps running behind it.
01
Import
In the Visual Builder, open Portability, choose Import and pick the .divi.json file.
02
Edit
Heading, text and button are normal Divi modules. Set height in Design > Spacing or Sizing.
03
Publish
Save. The animated background shows on the live page and in preview.
// Plan B Code module fallback. If the import doesn't work on your Divi version, paste code-module/<shader>.html into a Code module at the top of any section. Needs an Administrator account so WordPress keeps the script.
// Not on Divi? HTML drop-in. Upload one .js file, add <div class="shader-bg" data-shader="…"> and the background mounts behind its content. Works on any HTML site.
// 02 Overview
What it does
Five calm, slow-moving backgrounds built to sit quietly behind content: aurora curtains, a halftone tide, living coral, flowing ridgelines and underwater caustics. Slower pacing, eased pointer response, a gentle fade-in on load and no flicker, strobing or bursts.
The five shaders
- Aurora Veil: Slow aurora curtains over a still mirrored lake and quietly twinkling stars.
- Halftone Tide: Drifting light fields printed as a hexagonal halftone, with a wandering tide line.
- Coral Bloom: A living chemical pattern that morphs between coral mazes and dividing cells.
- Ridgeline: Fifty-six Unknown Pleasures-style ridgelines over terrain flowing toward the viewer.
- Caustic Depths: Underwater caustics on a violet sea floor, with soft light shafts and drifting motes.
What’s included
- The original pack: five standalone HTML pages, a gallery page, preview images and the full technical README
- HTML drop-in: a JavaScript file for each shader, a copy-paste snippet and a demo page with all five
- Divi 5: an importable section for each shader, plus a file with all five sections
- README files with install steps and settings
- LICENSE.txt (Schimke Studios Shader License)
Formats
HTML: a JavaScript file that mounts the shader as a full-bleed background behind a container such as <div class="shader-bg" data-shader="…">.
Divi 5: a section layout (JSON, imported through Divi Portability) with the shader as the section background behind a heading, text and button.
Settings: colours, speed and intensity can be set with a data-config attribute or in the CONFIG object at the top of the code. README files document the install steps and settings for both formats.
Under the hood
Plain WebGL2 with inline GLSL ES 3.00, no external libraries. Every shader exposes a CONFIG object for colours, speed, intensity and quality caps.
Performance and accessibility
- Resolution-capped for high-DPI screens; pauses when scrolled out of view or when the tab is hidden
- Respects
prefers-reduced-motion(slowed or frozen) - Shows a static CSS gradient if WebGL2 is unavailable
Heavier effects (Aurora Veil, Ridgeline) are best suited to desktop hero sections; their quality caps can be lowered for older integrated GPUs.
Browser support
Any current browser with WebGL2: Chrome, Edge, Firefox and Safari 15+, on desktop and mobile. Coral Bloom: Needs the EXT_color_buffer_float WebGL extension (supported by nearly all desktop and modern mobile GPUs). Without it, the effect shows an error message instead. Ridgeline: Uses EXT_color_buffer_float when available and falls back to slightly steppier 8-bit heights without it.
// 03 Fallback chain
Safe to hand off
Plain WebGL2 with no external libraries. Every shader steps down on its own, so a client's visitors never get a broken section.
- RunsPlain WebGL2No libraries, nothing to update
- Off-screenPausesStops drawing when scrolled out of view
- Hidden tabPausesStops when the tab isn't visible
- Reduced motionSlows right downRespects prefers-reduced-motion (or freeze, one setting)
- No WebGL2Static gradientA CSS gradient in the shader's colors
// 04 Requirements
Will it run?
| Browser | WebGL2: Chrome, Edge, Firefox, Safari 15+ |
|---|---|
| Formats | HTML drop-in, Divi 5 section |
| Libraries | None (plain WebGL2) |
| WebGL extension | EXT_color_buffer_float for Coral Bloom (Ridgeline uses it when available) |
// 05 Included
What you get
01
Shader license
One purchase covers one person or company. Use it in unlimited personal, commercial and client projects.
02
Modify and ship
Change the colors, speed and code however you like, and ship it inside your own sites, apps and videos.
03
Instant download
A .zip right after checkout with the Divi 5 section, Code module fallback, HTML drop-in and license. The link is also in your order email and under My account.
Questions before you buy? Read the Refund policy, the Terms and the Shader License.
// Bundle and save
Get the whole pack
// More shaders
More backgrounds
Shader Pack 2: Calm Motion
Live preview. Press Esc or the X to close.