Layout & Styling

The <Shader> component renders a <canvas> element that you can style like any other HTML element. This makes it easy to integrate shaders into your existing layouts and designs.

Sizing the Canvas

Apply classes or styles directly to the <Shader> component to control its size:

Responsive Sizing

Use responsive utilities to adapt shaders to different screen sizes:

Positioning

Position shaders absolutely, fixed, or sticky like any other element:

Borders and Effects

Style the canvas container with borders, shadows, and other CSS effects:

The canvas renders within its container, so any CSS applied to the <Shader> component affects the canvas element directly.