Holographic

Iridescent holographic foil sticker with animated rainbow sheen and glitter flakes

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

center

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

Center position of the foil shape

scalenumber

Default:1

Scale of the foil shape (1 = default size)

scale

numberDefault: 1

Scale of the foil shape (1 = default size)

rotationnumber

Default:0

Rotation of the foil shape in degrees

rotation

numberDefault: 0

Rotation of the foil shape in degrees

hueShiftnumber

Default:0

Rotates the rainbow spectrum across the foil

hueShift

numberDefault: 0

Rotates the rainbow spectrum across the foil

foilScalenumber

Default:1.5

Size of the iridescent color patches — higher = smaller, busier patches

foilScale

numberDefault: 1.5

Size of the iridescent color patches — higher = smaller, busier patches

saturationnumber

Default:0.75

Rainbow saturation — 0 = plain silver foil, 1 = fully spectral

saturation

numberDefault: 0.75

Rainbow saturation — 0 = plain silver foil, 1 = fully spectral

roughnessnumber

Default:0.25

Matte laminate grain — softens the gloss with fine paper-like noise

roughness

numberDefault: 0.25

Matte laminate grain — softens the gloss with fine paper-like noise

speednumber

Default:1

Animation speed — the spectrum drifts across the foil as if the sticker is tilting in your hand. 0 pauses.

speed

numberDefault: 1

Animation speed — the spectrum drifts across the foil as if the sticker is tilting in your hand. 0 pauses.

crinklenumber

Default:0.5

Laminate wrinkles — perturbs the surface so the sheen and rainbow swirl locally instead of lying flat

crinkle

numberDefault: 0.5

Laminate wrinkles — perturbs the surface so the sheen and rainbow swirl locally instead of lying flat

crinkleScalenumber

Default:1

Size of the laminate wrinkles — higher = smaller, denser wrinkles

crinkleScale

numberDefault: 1

Size of the laminate wrinkles — higher = smaller, denser wrinkles

sparklenumber

Default:0.4

Glitter flakes embedded in the foil — tiny facets that refract a shifted hue and twinkle as the spectrum drifts

sparkle

numberDefault: 0.4

Glitter flakes embedded in the foil — tiny facets that refract a shifted hue and twinkle as the spectrum drifts

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

<Shader>
  <Holographic />
</Shader>

<Shader>
  <Holographic />
</Shader>

<Shader>
  <Holographic />
</Shader>

import { createShader } from 'shaders/js'

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

Hologram

HueShift