Documentation

GuidesComponents

ThinFilm

Iridescent thin-film edge

Props

center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the shape
scalenumber
Default:1
Scale of the shape (1 = default size)
intensitynumber
Default:1
Rim brightness — values above 1 push the edge past white for HDR bloom
rimWidthnumber
Default:1
How far inward from the edge the iridescence reaches
edgeSoftnessnumber
Default:0.3
Softness of the shape boundary
thicknessnumber
Default:0.5
Film thickness — higher values pack more spectral bands across the rim
dispersionnumber
Default:0.5
How strongly colour separates around the perimeter (warm vs cool sides)
saturationnumber
Default:1
Spectral saturation — 0 = white rim, 1 = full iridescence
hueShiftnumber
Default:0
Rotate the spectrum to reposition the colours
lightAnglenumber
Default:300
Light angle in degrees — sets which side of the rim runs warm vs cool
mode"rainbow" | "custom"
Default:rainbow
Rainbow uses the full iridescent spectrum; Custom cycles through your three chosen colours
colorAstring
Default:#2b6fff
First colour in the rim cycle
colorBstring
Default:#ffffff
Second colour in the rim cycle
colorCstring
Default:#ff7a21
Third colour in the rim cycle
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:oklch
Colour space used to blend between custom colours
speednumber
Default:0.1
Speed at which the colours rotate around the rim (0 = static)
shapeShapeConfig
Default:circleSDF
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.
shapeSdfUrlstring
Default:""
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.

Usage

<Shader>
  <ThinFilm
    intensity={1}
  />
</Shader>
Previous
Swirl
Next
TiltShift