TriangularGrid

Tiling grid of equilateral triangles with optional animated row offsets

Props

  • colorA

    Triangle fill color

    Type
    string
    Default
    #1a1a1a

  • colorB

    Grid line color

    Type
    string
    Default
    #ffffff

  • cells

    Number of triangle rows down the shortest canvas edge

    Type
    number
    Default
    8

  • thickness

    Thickness of the grid lines (0 = no lines)

    Type
    number
    Default
    1

  • rotation

    Rotation of the grid in degrees

    Type
    number
    Default
    0

  • softness

    Softness of the line edges (0 = crisp, 1 = very soft)

    Type
    number
    Default
    0

  • variation

    Per-triangle random lightening/darkening of the fill color

    Type
    number
    Default
    0

  • speed

    Animates the triangle rows drifting horizontally (0 = static)

    Type
    number
    Default
    0

  • speedVariance

    Per-row random speed variance for irregular drifting motion

    Type
    number
    Default
    0.3

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

<Shader>
  <TriangularGrid />
</Shader>