ThinFilm

Iridescent thin-film edge

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the shape

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the shape in degrees

    Type
    number
    Default
    0

  • intensity

    Rim brightness — values above 1 push the edge past white for HDR bloom

    Type
    number
    Default
    1

  • rimWidth

    How far inward from the edge the iridescence reaches

    Type
    number
    Default
    1

  • edgeSoftness

    Softness of the shape boundary

    Type
    number
    Default
    0.3

  • thickness

    Film thickness — higher values pack more spectral bands across the rim

    Type
    number
    Default
    0.5

  • dispersion

    How strongly color separates around the perimeter (warm vs cool sides)

    Type
    number
    Default
    0.5

  • saturation

    Spectral saturation — 0 = white rim, 1 = full iridescence

    Type
    number
    Default
    1

  • hueShift

    Rotate the spectrum to reposition the colors

    Type
    number
    Default
    0

  • lightAngle

    Light angle in degrees — sets which side of the rim runs warm vs cool

    Type
    number
    Default
    300

  • mode

    Rainbow uses the full iridescent spectrum; Custom cycles through your three chosen colors

    Type
    "rainbow" | "custom"
    Default
    rainbow

  • colorA

    First color in the rim cycle

    Type
    string
    Default
    #2b6fff

  • colorB

    Second color in the rim cycle

    Type
    string
    Default
    #ffffff

  • colorC

    Third color in the rim cycle

    Type
    string
    Default
    #ff7a21

  • colorSpace

    color space used to blend between custom colors

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

  • speed

    Speed at which the colors rotate around the rim (0 = static)

    Type
    number
    Default
    0.1

  • shape

    Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

    Type
    string
    Default
    ""

Usage

<Shader>
  <ThinFilm
    intensity={1}
  />
</Shader>