BrickPattern
Classic brick wall pattern with alternating rows and mortar gaps
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorBrick | color | #000000 | Brick color |
| colorMortar | color | #ffffff | Mortar / gap color |
| cellsX | range | 8 | Number of bricks per row |
| cellsY | range | 10 | Number of brick rows |
| mortar | range | 0.05 | Width of mortar gaps — equal pixel thickness in both directions |
| softness | range | 0 | Softness of the brick edges (0 = crisp, 1 = very soft) |
| variation | range | 0 | Per-brick random lightening/darkening of the brick color |
| rotation | range | 0 | Rotation of the pattern in degrees |
| speed | range | 0 | Animation speed |
| offset | range | 0 | Static horizontal offset — shifts the brick pattern without animating |
| speedVariance | range | 0 | How much each row's speed varies — at high values rows move at different speeds and directions |
| seed | range | 0 | Random seed for per-row speed variation |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for interpolation |
Usage
vue
<Shader>
<BrickPattern />
</Shader>