rocaille-shader

Generate Rocaille-style domain warping shaders for WebGL and GLSL.

41|3|Updated Jan 2, 2026
One-click install
npx skills add https://github.com/tdimino/claude-code-minoan --skill rocaille-shader
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rocaille-shader
Source: https://github.com/tdimino/claude-code-minoan/tree/main/skills/design-media/rocaille-shader
Command: npx skills add https://github.com/tdimino/claude-code-minoan --skill rocaille-shader

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of complex, organic, and visually stunning shader art, perfect for dynamic backgrounds, visualizations, or unique digital art pieces, eliminating the need for manual GLSL coding.

Core Features & Use Cases

  • Procedural Shader Generation: Creates GLSL shaders with intricate, flowing patterns using domain warping.
  • Customizable Effects: Allows control over warp iterations, color schemes (rainbow, neon, fire, etc.), amplitude, and animation speed.
  • Multiple Output Formats: Generates shaders compatible with Shadertoy, Three.js, vanilla WebGL, and P5.js.
  • Use Case: Quickly generate a mesmerizing, animated background for a website or a music visualizer that reacts dynamically to audio input.

Quick Start

Generate a rainbow-colored Rocaille shader for Shadertoy with 7 warp iterations.

Frequently Asked Questions about rocaille-shader

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create procedural swirling shader art without writing GLSL code manually?

To create procedural shader art without manual GLSL coding, use automated generation tools that apply iterative sinusoidal coordinate displacement to produce organic domain warping patterns. This approach eliminates manual coding by automating parameter control for warp iterations, color modes, and animation speed.

What is domain warping in WebGL and how does it generate organic patterns?

Domain warping in WebGL is a procedural technique that displaces texture coordinates through iterative sinusoidal functions to create organic, swirling visual patterns. It generates complex flowing art by applying coordinate displacement across multiple warp iterations, producing dynamic effects suitable for backgrounds and visualizations.

Can I use generated GLSL shaders with Three.js, Shadertoy, and P5.js?

Yes, generated GLSL shaders support multiple output formats including Three.js, Shadertoy, vanilla WebGL, and P5.js. This compatibility ensures the procedural domain warping effects can be integrated into various WebGL visualization platforms and frameworks without manual code translation.

How do I customize color schemes and animation speed for procedural background shaders?

To customize procedural background shaders, adjust parameters like color modes including rainbow, neon, and fire options, alongside amplitude and animation speed settings. These customizable parameters control the visual output of the domain warping effects for dynamic digital art pieces.

Does domain warping shader generation work for music visualizers and animated website backgrounds?

Yes, domain warping shader generation works for music visualizers and animated website backgrounds by producing dynamic, flowing procedural patterns. The generated GLSL shaders support customizable animation speeds, making them suitable for reactive visual effects and dynamic digital environments.

What are the limitations of using domain warping for procedural visualizations?

Limitations of domain warping for procedural visualizations include increased computational overhead from multiple warp iterations and sinusoidal coordinate displacement calculations. Higher warp counts and complex amplitude settings may impact rendering performance, requiring careful parameter balancing for smooth WebGL animation.