Frost

Photoreal frozen ice — thickness-driven subsurface scattering that reads as a solid block, with fine frost crystals creeping in from the edges

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 ice shape

center

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

Center position of the ice shape

scalenumber

Default:1

Scale of the ice shape (1 = default size)

scale

numberDefault: 1

Scale of the ice shape (1 = default size)

rotationnumber

Default:0

Rotation of the ice shape in degrees

rotation

numberDefault: 0

Rotation of the ice shape in degrees

iceColorstring

Default:#0597fc

Ice tint — the colour deep ice saturates toward (thin edges stay near white)

iceColor

stringDefault: #0597fc

Ice tint — the colour deep ice saturates toward (thin edges stay near white)

ambientnumber

Default:0

Cool ambient fill so shadowed ice never goes black

ambient

numberDefault: 0

Cool ambient fill so shadowed ice never goes black

edgeSoftnessnumber

Default:0.05

Softness of the shape boundary edge

edgeSoftness

numberDefault: 0.05

Softness of the shape boundary edge

densitynumber

Default:5

Optical depth multiplier — how thick and deep the ice reads

density

numberDefault: 5

Optical depth multiplier — how thick and deep the ice reads

absorptionnumber

Default:1

Beer–Lambert absorption strength — higher drives a deeper blue-teal core

absorption

numberDefault: 1

Beer–Lambert absorption strength — higher drives a deeper blue-teal core

scatternumber

Default:0.5

Forward back-lit glow transmitted through thin ice

scatter

numberDefault: 0.5

Forward back-lit glow transmitted through thin ice

frostAmountnumber

Default:0.8

Overall density of the rim frost crystals

frostAmount

numberDefault: 0.8

Overall density of the rim frost crystals

frostDepthnumber

Default:0.4

How far the frost creeps inward from the rim

frostDepth

numberDefault: 0.4

How far the frost creeps inward from the rim

frostScalenumber

Default:1

Crystal size — higher = finer, busier frost

frostScale

numberDefault: 1

Crystal size — higher = finer, busier frost

frostRoughnessnumber

Default:3

Feathery roughness of the frost crystal surface

frostRoughness

numberDefault: 3

Feathery roughness of the frost crystal surface

sparklenumber

Default:0.5

Tiny bright crystal glints catching the light at the rim

sparkle

numberDefault: 0.5

Tiny bright crystal glints catching the light at the rim

glossnumber

Default:0.6

Surface sheen — the broad soft icy specular

gloss

numberDefault: 0.6

Surface sheen — the broad soft icy specular

fresnelnumber

Default:0.02

Cold rim glow on grazing surfaces

fresnel

numberDefault: 0.02

Cold rim glow on grazing surfaces

lightAnglenumber

Default:300

Key light direction in degrees

lightAngle

numberDefault: 300

Key light direction in degrees

speednumber

Default:0.3

Sparkle twinkle speed. 0 freezes the sparkle.

speed

numberDefault: 0.3

Sparkle twinkle speed. 0 freezes the sparkle.

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

<Shader>
  <Frost />
</Shader>

<Shader>
  <Frost />
</Shader>

<Shader>
  <Frost />
</Shader>

import { createShader } from 'shaders/js'

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

FractalNoise

GaborNoise