Brickslab.Tools

@brickslab./ui-web

Gradient mesh with subtle noise and grain texture effect using canvas

Noise Mesh

Props

Prop	Type	Défaut	Requis	Description
`colors`	`string[]`	`["#FF6B6B", "#4ECDC4", "#45B7D1"]`	—	Array of colors for the gradient mesh
`noise`	`number`	`0.4`	—	Intensity of noise texture (0-1)
`grainSize`	`number`	`2`	—	Size of grain particles
`animate`	`boolean`	`true`	—	Enable animation
`speed`	`number`	`6`	—	Animation speed in seconds

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  colors={["#FF6B6B", "#4ECDC4", "#45B7D1"]}
  noise={0.4}
  grainSize={2}
  animate={true}
  speed={6}
/>

colorsnoisegrainSizeanimatespeed

Usage

tsx

import { NoiseMeshBackground } from "@brickslab./ui-web";

export function MyComponent() {
  return (
    <div className="relative w-full h-screen">
      <NoiseMeshBackground
        colors={["#FF6B6B", "#4ECDC4", "#45B7D1"]}
        noise={0.4}
        grainSize={2}
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Noise Mesh</h1>
      </div>
    </div>
  );
}

Variations

Warm Colors High Noise

Warm

Cool Colors Low Noise

Cool