Rocaille Shader Skill

Generate organic, swirling light effects through progressive domain warping - a technique that creates increasingly complex patterns by iteratively displacing coordinates using sinusoidal functions.

Core Technique

The Rocaille effect builds complexity through repeated application of:

v += sin(v.yx + t) / amplitude;

Where:

• v

  is a 2D coordinate vector

• v.yx

  swaps x/y components creating characteristic swirl

• t

  is time for animation

• amplitude

  controls warp intensity (1.0 = strong, 4.0 = subtle)
• Each iteration adds more organic complexity

Quick Reference

Usage

To generate a shader, specify:

1. Warp count (1-15): Number of displacement iterations
2. Color mode:

   basic

   ,

   rainbow

   ,

   monochrome

   ,

   neon

   , or custom RGB
3. Output format:

   shadertoy

   ,

   threejs

   ,

   webgl

   ,

   p5js

Generate Custom Shader

Run the generator script:

python3 scripts/rocaille_generator.py --warps 5 --color rainbow --format shadertoy

Options:

• --warps N

  - Number of warp iterations (default: 5)

• --color MODE

  - Color mode: basic, rainbow, monochrome, neon (default: rainbow)

• --format FMT

  - Output format: shadertoy, threejs, webgl, p5js, all (default: shadertoy)

• --amplitude N

  - Warp intensity divisor (default: 2.0)

• --speed N

  - Animation speed multiplier (default: 1.0)

• --demo

  - Generate interactive HTML demo page

Asset Templates

Pre-built templates available in

assets/templates/

shadertoy.glsl

threejs.js

vanilla-webgl.html

p5js.js

interactive.html

liquid-logo.glsl

liquid-logo.html

logo.png

?logo=…

Implementation Patterns

Minimal Shadertoy

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
    vec2 v = uv;

    for(int i = 0; i < 5; i++) {
        v += sin(v.yx + iTime) / 2.0;
    }

    float d = 1.0 / length(v);
    fragColor = vec4(vec3(d * 0.1), 1.0);
}

Three.js Integration

const material = new THREE.ShaderMaterial({
    uniforms: {
        uTime: { value: 0 },
        uWarpCount: { value: 5 },
        uAmplitude: { value: 2.0 }
    },
    vertexShader: vertexCode,
    fragmentShader: fragmentCode
});

// In animation loop
material.uniforms.uTime.value = performance.now() / 1000;

Customization

Base Shape Variations

Replace

1.0 / length(v)

• length(v)

  - Inverted (dark center)

• sin(length(v) * 10.0)

  - Ripple rings

• abs(v.x) + abs(v.y)

  - Diamond shape

• max(abs(v.x), abs(v.y))

  - Square shape

Color Mapping

// Rainbow based on angle
vec3 color = 0.5 + 0.5 * cos(atan(v.y, v.x) + vec3(0, 2, 4));

// Neon glow
vec3 color = vec3(d * 0.2, d * 0.05, d * 0.3);

// Temperature gradient
vec3 color = mix(vec3(0.1, 0.2, 0.8), vec3(1.0, 0.3, 0.1), d);

Liquid Logo Mode

Apply the domain-warp family to a texture instead of a procedural distance field. A pointer-driven radial warp + chromatic aberration makes a static image or SVG logo ripple, bend, and refract around the cursor, with an optional Lissajous idle breathing when the pointer is inactive. Use for hero sections, brand reveals, loading moments, or any hover state where the logo should feel alive.

Generate a self-contained HTML

python3 scripts/rocaille_generator.py \
    --mode liquid-logo \
    --input path/to/logo.svg \
    --output liquid.html

The output embeds the image as a base64 data URI — the generated HTML is a single file with no external dependencies.

Tuning parameters

--distortion

0.40

--radius

0.25

--decay

3.0

--chroma

0.015

--idle

--no-idle

The runtime respects

prefers-reduced-motion

visibilitychange

For the shader math (radial Gaussian falloff, UV pull direction, cursor-aligned chromatic offset), see

references/liquid-logo.md

Reference Documentation

For deeper understanding:

• references/rocaille-complete.md

  - Full 8-step shader breakdown

• references/domain-warping.md

  - Theory from Inigo Quilez

• references/glsl-patterns.md

  - Common GLSL patterns used

• references/liquid-logo.md

  - Liquid logo math (falloff, pull, chromatic offset)

• references/fluid-dom.md

  - Stable fluid sim over live DOM (Navier-Stokes pipeline, VFX-JS lineage)

Combining Effects

Layer with other techniques:

• Bloom: Apply gaussian blur to bright areas
• Grain: Add

  fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453)

• Vignette: Multiply by

  1.0 - length(uv) * 0.5

• Chromatic aberration: Sample RGB at slightly offset UVs

Attribution

• Rocaille domain-warp technique — the core

  v += sin(v.yx + t) / amplitude

  formula and the theory behind it come from Inigo Quilez's domain warping article (iq / Shadertoy).
• Liquid Logo mode — inspired by LiquidLogo by Gustav WF (@gustavwf / gustavwf.supply), a free Framer component. The liquid-logo shader here is reimplemented from scratch from first principles (radial Gaussian falloff, UV displacement, cursor-aligned chromatic offset) — it is not a port of Gustav's code and does not redistribute any of his files. If you want a drop-in Framer component, get it directly from him; if you want a standalone HTML file or a Shadertoy-compatible shader, this skill generates one.
• Astryx-statue mode — pattern studied from Astryx (Framer + Unicorn Studio). The depth-parallax shader technique descends from Robin Delaporte's CodePen (the universal ancestor of web depth-parallax heroes). Production reference: DepthFlow by BrokenSource (AGPL, reference only — not a dependency).
• Fluid-DOM mode — pattern studied from Amagi's "Stable Fluid on VFX-JS" CodePen. Shader lineage: Pavel DoGreat's WebGL-Fluid-Simulation (MIT). Theory: Jos Stam, "Real-Time Fluid Dynamics for Games" (GDC 2003).