git:20260408.80853f4 to git:20260416.4e43d41

1 added, 1 removed. Audit A to A.

---

name: rocaille-shader

- description: Generate Rocaille-style domain warping shaders with sinusoidal displacement, mouse-reactive liquid logo effects on image/SVG textures, depth-map parallax displacement heroes (Astryx-style hover-reactive statues/busts), and stable fluid simulations over live DOM elements (fluid-dom). This skill should be used when building WebGL/GLSL visualizations, shader art, procedural backgrounds, organic swirling light effects, applying a rippling liquid hover effect to a logo or hero image, creating an editorial hero with a hover-reactive 3D-look bust or statue via depth-map parallax, or wrapping DOM sections in a pointer-reactive Navier-Stokes fluid distortion. Trigger phrases: depth parallax, hover-reactive depth map, statue hero, fluid sim, stable fluid, WebGL-Fluid-Simulation, pointer-reactive fluid.

+ description: Generate Rocaille-style domain warping shaders, mouse-reactive liquid logo effects, depth-map parallax heroes (Astryx-style hover-reactive statues), and stable fluid simulations over live DOM. Four modes — rocaille, liquid-logo, astryx-statue, fluid-dom. Triggers on shader art, depth parallax, hover-reactive depth map, statue hero, fluid sim, liquid logo, WebGL visualization, procedural background, pointer-reactive fluid.

argument-hint: [--mode rocaille|liquid-logo|astryx-statue|fluid-dom] [warp-count] [color-mode] [format]

---

# 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:

```glsl

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

| Warps | Effect | Use Case |

|-------|--------|----------|

| 1-2 | Subtle wave | Backgrounds, subtle motion |

| 3-5 | Organic flow | Music visualizers, hero sections |

| 6-9 | Complex swirl | Psychedelic effects, main attraction |

| 10+ | Chaotic | Experimental, glitch art |

## 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:

```bash

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/`:

| Template | Description |

|----------|-------------|

| `shadertoy.glsl` | Shadertoy-compatible fragment shader |

| `threejs.js` | Three.js ShaderMaterial with uniforms |

| `vanilla-webgl.html` | Pure WebGL2, no dependencies |

| `p5js.js` | P5.js shader mode integration |

| `interactive.html` | Full demo with controls |

| `liquid-logo.glsl` | Shadertoy liquid-logo reference (reads iChannel0) |

| `liquid-logo.html` | Standalone liquid-logo runtime (drop `logo.png` beside it, or pass `?logo=…`) |

## Implementation Patterns

### Minimal Shadertoy

```glsl

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

```javascript

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)` with:

- `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

```glsl

// 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

```bash

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

| Flag | Default | Effect |

|------|---------|--------|

| `--distortion` | `0.40` | Peak UV pull toward the cursor |

| `--radius` | `0.25` | Gaussian falloff radius (smaller = tighter ripple) |

| `--decay` | `3.0` | Release decay rate (higher = snappier relax) |

| `--chroma` | `0.015` | RGB-channel UV split magnitude |

| `--idle` / `--no-idle` | on | Lissajous idle breathing when cursor is still |

The runtime respects `prefers-reduced-motion` (halves distortion and idle

amplitude) and pauses its RAF loop on `visibilitychange`, so the effect

consumes zero GPU when the tab is hidden.

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](https://iquilezles.org/articles/warp/) (iq / Shadertoy).

- **Liquid Logo mode** — inspired by [**LiquidLogo**](https://gustavwf.supply/product/liquidlogo)

by **Gustav WF** ([@gustavwf](https://x.com/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](https://indigo-type-231733.framer.app/astryx) (Framer + Unicorn

Studio). The depth-parallax shader technique descends from [Robin Delaporte's

CodePen](https://codepen.io/robin-dela/pen/vaQQNL) (the universal ancestor of

web depth-parallax heroes). Production reference:

[DepthFlow](https://github.com/BrokenSource/DepthFlow) by BrokenSource (AGPL,

reference only — not a dependency).

- **Fluid-DOM mode** — pattern studied from [Amagi's "Stable Fluid on VFX-JS"

CodePen](https://codepen.io/editor/fand/pen/019d61f5-aadf-7e18-851c-0ebd317146c7).

Shader lineage: [Pavel DoGreat's WebGL-Fluid-Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation)

(MIT). Theory: Jos Stam, "Real-Time Fluid Dynamics for Games" (GDC 2003).