Plastic

Glossy molded plastic with photorealistic studio reflections, driven in a custom shape

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

center

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

Center position of the plastic shape

scalenumber

Default:1

Scale of the plastic shape (1 = default size)

scale

numberDefault: 1

Scale of the plastic shape (1 = default size)

rotationnumber

Default:0

Rotation of the plastic shape in degrees

rotation

numberDefault: 0

Rotation of the plastic shape in degrees

colorAstring

Default:#f5f5f7

Body color at the start of the gradient

colorA

stringDefault: #f5f5f7

Body color at the start of the gradient

colorBstring

Default:#d9dade

Body color at the end of the gradient

colorB

stringDefault: #d9dade

Body color at the end of the gradient

stopsobject

Default:null

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

stops

objectDefault: null

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

gradientAnglenumber

Default:90

Direction of the body color gradient in degrees

gradientAngle

numberDefault: 90

Direction of the body color gradient in degrees

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

Default:linear

Color space for gradient color interpolation

colorSpace

Color space for gradient color interpolation

thicknessnumber

Default:0.5

Puffiness — how far the rounded bevel reaches inward from the edge before the surface flattens

thickness

numberDefault: 0.5

Puffiness — how far the rounded bevel reaches inward from the edge before the surface flattens

roughnessnumber

Default:0.12

Surface roughness — 0 = polished gloss with crisp mirror reflections, 1 = matte satin

roughness

numberDefault: 0.12

Surface roughness — 0 = polished gloss with crisp mirror reflections, 1 = matte satin

reflectivitynumber

Default:1

Strength of the environment reflections and specular highlights

reflectivity

numberDefault: 1

Strength of the environment reflections and specular highlights

crumplenumber

Default:0.25

Surface crumple — irregular dents that break reflections into hard organic shapes, like blown or vacuum-formed plastic

crumple

numberDefault: 0.25

Surface crumple — irregular dents that break reflections into hard organic shapes, like blown or vacuum-formed plastic

crumpleScalenumber

Default:1

Size of the crumple dents — higher = smaller, denser dents

crumpleScale

numberDefault: 1

Size of the crumple dents — higher = smaller, denser dents

crumpleCoveragenumber

Default:1

How much of the surface is crumpled — 0 = pristine, 0.5 = patches of crumple, 1 = fully crumpled

crumpleCoverage

numberDefault: 1

How much of the surface is crumpled — 0 = pristine, 0.5 = patches of crumple, 1 = fully crumpled

seednumber

Default:0

Random seed — re-rolls the crumple pattern for reflection variety

seed

numberDefault: 0

Random seed — re-rolls the crumple pattern for reflection variety

edgeSoftnessnumber

Default:0.05

Softness of the shape boundary edge

edgeSoftness

numberDefault: 0.05

Softness of the shape boundary edge

lightAnglenumber

Default:315

Direction the studio key light comes from, in degrees

lightAngle

numberDefault: 315

Direction the studio key light comes from, in degrees

speednumber

Default:1

Speed of the environment drift — the studio reflections slowly orbit the surface. 0 pauses.

speed

numberDefault: 1

Speed of the environment drift — the studio reflections slowly orbit the surface. 0 pauses.

shadingnumber

Default:0.35

Diffuse shading contrast — how strongly the body darkens away from the light

shading

numberDefault: 0.35

Diffuse shading contrast — how strongly the body darkens away from the light

rimnumber

Default:0.25

Fresnel rim light intensity on grazing surfaces

rim

numberDefault: 0.25

Fresnel rim light intensity on grazing surfaces

rimColorstring

Default:#ffffff

Color of the fresnel rim light

rimColor

stringDefault: #ffffff

Color of the fresnel rim light

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

<Shader>
  <Plastic />
</Shader>

<Shader>
  <Plastic />
</Shader>

<Shader>
  <Plastic />
</Shader>

import { createShader } from 'shaders/js'

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

Plasma

PolarCoordinates