Obsidian

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

Props

originstring

Default:center

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

origin

stringDefault: center

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

center{x: number, y: number}

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

Center position of the glass shape

center

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

Center position of the glass shape

scalenumber

Default:1

Scale of the glass shape (1 = default size)

scale

numberDefault: 1

Scale of the glass shape (1 = default size)

rotationnumber

Default:0

Rotation of the glass shape in degrees

rotation

numberDefault: 0

Rotation of the glass shape in degrees

bodyColorstring

Default:#06071a

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

bodyColor

stringDefault: #06071a

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

colorAstring

Default:#ff2f7a

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

colorA

stringDefault: #ff2f7a

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

colorBstring

Default:#5fe6ff

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

colorB

stringDefault: #5fe6ff

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

stopsobject

Default:

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

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

stops

objectDefault:

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

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

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:oklab

Color space for color interpolation

colorSpace

Color space for color interpolation

iridescencenumber

Default:1

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

iridescence

numberDefault: 1

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

rimWidthnumber

Default:0.55

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

rimWidth

numberDefault: 0.55

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

rimSoftnessnumber

Default:0.25

Softness of the transition from dark face to coloured wall

rimSoftness

numberDefault: 0.25

Softness of the transition from dark face to coloured wall

flowAnglenumber

Default:30

Direction the gradient flows across the surface, in degrees

flowAngle

numberDefault: 30

Direction the gradient flows across the surface, in degrees

flowScalenumber

Default:1

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

flowScale

numberDefault: 1

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

speednumber

Default:0.5

Speed the gradient flows along the walls. 0 pauses.

speed

numberDefault: 0.5

Speed the gradient flows along the walls. 0 pauses.

glossnumber

Default:0.35

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

gloss

numberDefault: 0.35

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

envRotationnumber

Default:0

Rotates the reflected studio — spins where the bright reflections fall

envRotation

numberDefault: 0

Rotates the reflected studio — spins where the bright reflections fall

bevelWidthnumber

Default:0.08

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

bevelWidth

numberDefault: 0.08

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

bevelShapenumber

Default:0

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

bevelShape

numberDefault: 0

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

edgeSoftnessnumber

Default:0.05

Softness of the shape boundary edge

edgeSoftness

numberDefault: 0.05

Softness of the shape boundary edge

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.

shape

ShapeConfigDefault: 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.

shapeSdfUrl

stringDefault: ""

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

<Shader>
  <Obsidian />
</Shader>

<Shader>
  <Obsidian />
</Shader>

<Shader>
  <Obsidian />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Obsidian', props: {} }
  ]
})

ObjectTracker

PagePeel