Obsidian

Dark tinted glass whose faces stay near-black while every surface turning away from the viewer ignites with a flowing iridescent gradient — vivid color living only on the oblique walls and bevels

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 glass shape. Accepts CSS units, see Sizing and units.

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

  • scale

    Scale of the glass shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the glass shape in degrees

    Type
    number
    Default
    0

  • bodyColor

    The dark body of the glass — what the faces looking straight at you show. Keep it deep for the iridescence to pop.

    Type
    string
    Default
    #06071a

  • colorA

    First iridescent color (two-color fallback when stops are cleared)

    Type
    string
    Default
    #ff2f7a

  • colorB

    Second iridescent color (two-color fallback when stops are cleared)

    Type
    string
    Default
    #5fe6ff

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    [{"color":"#ff2f7a","position":0},{"color":"#2a2cff","position":0.3},{"color":"#5fe6ff","position":0.55},{"color":"#a6ffd8","position":0.75},{"color":"#ffb3e6","position":1}]

  • colorSpace

    Color space for color interpolation

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

  • iridescence

    Strength of the color on the oblique surfaces — 0 = plain dark glass, above 1 = saturated neon walls

    Type
    number
    Default
    1

  • rimWidth

    How far in from edge-on the color reaches — small keeps it to the steepest walls, large lets it creep across gently turning faces

    Type
    number
    Default
    0.55

  • rimSoftness

    Softness of the transition from dark face to colored wall

    Type
    number
    Default
    0.25

  • flowAngle

    Direction the gradient flows across the surface, in degrees

    Type
    number
    Default
    30

  • flowScale

    How many times the palette cycles across the shape — higher = tighter color bands

    Type
    number
    Default
    1

  • speed

    Speed the gradient flows along the walls. 0 pauses.

    Type
    number
    Default
    0.5

  • gloss

    Strength of the studio softboxes reflected in the glass — the pale highlights riding the top edges

    Type
    number
    Default
    0.35

  • envRotation

    Rotates the reflected studio — spins where the bright reflections fall

    Type
    number
    Default
    0

  • bevelWidth

    Width of the edge bevel on flat shapes — the band that turns away from the viewer and catches the color

    Type
    number
    Default
    0.08

  • bevelShape

    Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee

    Type
    number
    Default
    0

  • edgeSoftness

    Softness of the shape boundary edge

    Type
    number
    Default
    0.05

  • 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>
  <Obsidian />
</Shader>