Shader Modes

Fold ships a built-in GLSL shader library that applies animated effects to element groups. Shaders can be combined, keep text readable automatically, and animate on their own.

Quick Start
Data-Attribute API
JavaScript API
Color System
Composing Modes
Shader Modes Reference
Notes

Quick Start

Fold.init({
  onReady: function () {
    // Apply a shader to an element by CSS selector
    Fold.applyShader('#hero', 'plasma');

    // With custom colours and speed
    Fold.applyShader('.card', 'fire', { colors: ['#ff6600', '#cc0000'], speed: 1.5 });

    // Remove later
    Fold.removeShader('#hero');
  }
});

Data-Attribute API

Add shader effects directly in HTML — no JavaScript required.

Attribute	Description
`data-foldpage-shader`	Shader mode name (or comma-separated list for composing)
`data-foldpage-shader-color`	Hex colours overriding the mode defaults — comma or space separated
`data-foldpage-shader-speed`	Speed multiplier (float, default `1.0`)
`data-foldpage-shader-factor`	Intensity multiplier (float, default `1.0`). Also affects transparency in most modes; use `shader-opacity` to control transparency on its own
`data-foldpage-shader-opacity`	Opacity multiplier (float, default `1.0`). `0` = invisible, `1` = the mode's normal look, above `1` = more opaque

html

<!-- Fire shader with custom warm palette -->
<div class="card"
  data-foldpage-shader="fire"
  data-foldpage-shader-color="#ff9900,#cc2200"
  data-foldpage-shader-speed="1.6">
  ...
</div>

<!-- Water shader, dialed down to 50% opacity so more of the page shows through -->
<div class="hero-bg" data-foldpage-shader="water" data-foldpage-shader-opacity="0.5">
  ...
</div>

<!-- Composing two modes -->
<section data-foldpage-shader="neon, glitch">
  ...
</section>

Attributes are read once at group registration (when the element is first mounted into the 3D scene). To change a shader after the scene is running, use the JS API.

JavaScript API

`Fold.applyShader()`

Fold.applyShader(
  target: Group | HTMLElement | string,   // CSS selector, element, or Three.js Group from Fold.querySelector()
  modeName: string,                       // single mode or comma/space-separated list
  opts?: ShaderOptions | Record<string, ShaderOptions>
): void

ShaderOptions:

Field	Type	Default	Description
`colors`	`string[]`	mode defaults	Hex colours; see Color System
`speed`	`number`	`1.0`	Multiplier applied to all time-based animation
`factor`	`number`	`1.0`	Intensity multiplier (wave height, glitch/spark density, etc.). Also affects transparency
`opacity`	`number`	`1.0`	Opacity multiplier, independent of `factor`

Examples:

// By CSS selector
Fold.applyShader('#hero', 'aurora');

// By HTMLElement
var el = document.getElementById('card');
Fold.applyShader(el, 'neon', { colors: ['#00ffcc'], speed: 0.8 });

// By Three.js Group (from Fold.querySelector)
var group = Fold.querySelector('.feature');
if (group && !Array.isArray(group)) {
  Fold.applyShader(group, 'sparks', { factor: 0.6 });
}

// Dedicated opacity control, independent of intensity
Fold.applyShader('#hero', 'plasma', { opacity: 0.4 });

Any previously applied shader on the same target is automatically removed and originals restored before the new shader is applied.

`Fold.removeShader()`

Fold.removeShader(target: Group | HTMLElement | string): void

Removes all shader effects and restores original mesh materials and text colours.

Fold.removeShader('#hero');

`Fold.getShader()`

Fold.getShader(target: Group | HTMLElement | string): string | null

Returns the active shader mode name(s) on a target, or null if none is applied. For composed shaders returns a comma-joined string ("neon, glitch").

console.log(Fold.getShader('#hero')); // "fire"
console.log(Fold.getShader('.card')); // null

`Fold.SHADER_NAMES` (array)

The canonical list of all built-in mode names:

console.log(Fold.SHADER_NAMES);
// ['aurora', 'fire', 'frost', 'glitch', 'holographic', 'mirror', 'neon', 'plasma', 'prism', 'ripple', 'sparks', 'water']

Color System

Each mode ships defaultColors. Override them with the colors option (or data-*-shader-color):

`colors` length	Behaviour
0 (omitted)	Mode defaults are used
1	`colorA` = supplied; `colorB/C` derived via hue shifts (+17°, +33°); accent = complementary
2	`colorA` = supplied[0]; `colorB` = supplied[1]; `colorC` = midpoint; accent = complementary of colorA
3+	`colorA/B/C` = supplied[0/1/2]; optional `accent` = supplied[3]

// One colour — hue-shifted variants generated automatically
Fold.applyShader('#card', 'plasma', { colors: ['#00aaff'] });

// Two colours — explicit gradient endpoints
Fold.applyShader('#card', 'aurora', { colors: ['#034d7e', '#04826b'] });

Composing Modes

Pass a comma- or space-separated string to layer multiple shaders. Each mode's layers are applied independently; effects accumulate additively.

// Neon halo + glitch background
Fold.applyShader('#hero', 'neon, glitch');

// Per-mode options — pass a Record<modeName, ShaderOptions>
Fold.applyShader('#hero', 'neon, glitch', {
  neon:   { colors: ['#00ffee'] },
  glitch: { colors: ['#00ffee', '#0044ff'], factor: 0.7 },
});

When neon is combined with another mode, neon sets the text colour.

Shader Modes Reference

Mode	Aliases	Effect	Default colours
`plasma`	`lava-lamp`, `lava`	Sine waves morph between two colours — a lava-lamp look	`#e85c0d`, `#7011cc`
`aurora`	—	Diagonal flowing bands that shimmer like northern lights	`#034d7e`, `#2d0760`, `#04826b`
`fire`	`flame`, `flames`	Flame halo around the element; background darkens at the centre for readability	`#ff6010`, `#cc1800`
`sparks`	`spark`, `particles`	Sparks scatter outward from the element's edge over a dark background	`#ffe060`, `#44ccff`
`ripple`	`wave`	Caustic rings on a gently undulating surface; the element sways slightly	`#0077cc`, `#004488`
`water`	`caustic`, `caustics`, `ocean`	Tileable water-caustic light pattern on an undulating surface (after "Tileable Water Caustic" by David Hoskins, Shadertoy)	`#005a80`, `#44aacc`
`prism`	`rainbow`, `lens`	Spectral channels swirl outward from the centre like light through a prism	`#ff2200`, `#00ff88`, `#2200ff`
`frost`	`ice`, `crystal`	Frosted-glass ice crystals with a crystalline halo	`#aaddff`, `#224466`
`holographic`	`holo`	Iridescent tint with a drifting rainbow scan line	`#60aaff`
`glitch`	`corrupt`, `digital`	Band offsets, scanlines and colour fringing	`#00ffcc`, `#0033ff`
`mirror`	`tunnel`, `infinite`	Infinite-tunnel illusion with pulsing edge rings	`#8844ff`, `#00ccff`
`neon`	`glow`	Pulsing glow ring around the element; text takes the first colour	`#00ffcc`

fire, sparks, frost and neon draw a halo that extends beyond the element's edges, including past overflow: hidden clipping.

Notes

Opacity: most modes are slightly see-through by design. opacity: 1 keeps each mode's intended look; lower values make it more transparent. water and prism are fully opaque at opacity: 1.
Text: Fold sets a readable text colour to suit each mode. With neon, text takes the mode's first colour.
Nested elements: a shader applies to the element's own background and image, not to child elements that have their own backgrounds.
Animation: shaders animate on their own — no requestAnimationFrame loop needed.
Custom shaders: to apply your own ShaderMaterial, use Fold.querySelector() with group.traverse() and MESH_TYPE.

Shader Modes ​

Table of Contents ​

Quick Start ​

Data-Attribute API ​

JavaScript API ​

Fold.applyShader() ​

Fold.removeShader() ​

Fold.getShader() ​

Fold.SHADER_NAMES (array) ​

Color System ​

Composing Modes ​

Shader Modes Reference ​

Notes ​