Production checklist
The preview proves that an effect works; the containing layout determines whether it works well. Resolve these four constraints before tuning visual details.
Give it resolved bounds
A shader fills its parent. Set an explicit height or aspect ratio and keep overflow behavior intentional.
Separate readable content
Place text and controls in a later stacking layer. Their contrast must not depend on a bright or dark animation frame.
Budget rendered pixels
Large surfaces and high-DPR screens cost more. Lower maxDpr or resolutionScale before removing the effect entirely.
Validate texture sources
For image-driven effects, remote files must allow cross-origin loading. Local or same-origin assets are more predictable.
Sizing and composition
The component observes and fills its parent. A parent with no resolved height produces no useful drawing area, while a viewport-sized parent can make a lightweight effect unnecessarily expensive.
Keep the shader in its own layer and clip it at the intended boundary. Foreground content should remain normal HTML so it preserves semantic structure, selection, focus behavior, and independent contrast.
Performance controls
Start with the documented defaults, then test on a real mobile device. maxDpr caps device pixel ratio; resolutionScale reduces the internal render size without changing layout dimensions. Prefer a small resolution reduction over stacking several full-resolution shader surfaces.
Use paused when an effect is intentionally inactive. Reduced-motion preferences are handled by the generated component, but they do not replace testing the surrounding transitions and autoplay behavior in your own interface.
Textures and remote assets
Components that accept an image source load it in the browser. A remote URL must return appropriate CORS headers or the renderer may be unable to use it as a texture. Imported files and same-origin public assets avoid that dependency and are the safer default for production.
Check the component page for asset-specific behavior. Embedded support textures are installed with the registry entry; consumer-provided images remain explicit props.