Shader Atlas
한국어
◆ Materials

Holographic

홀로그래픽 포일

Animated holographic foil with a rainbow sheen and glitter flakes.

Also known as: HolographicHolographic foilIridescent foil

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
import { Shader, Holographic } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Holographic />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<script setup lang="ts">
import { Shader, Holographic } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Holographic/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<script>
  import { Shader, Holographic } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Holographic />
</Shader>
Solid
// Renders only in browsers with WebGPU.
import { Shader, Holographic } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Holographic />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Holographic',
    }
  ]
}, { disableTelemetry: true })

Props · Holographic

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
originOriginSet in codecenter—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the foil shape
scaleScale10.1 – 3 (step 0.01)Scale of the foil shape (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the foil shape in degrees
hueShiftHue Shift00 – 360 (step 1)Rotates the rainbow spectrum across the foil
foilScaleFoil Scale1.50.3 – 6 (step 0.01)Size of the iridescent color patches — higher = smaller, busier patches
saturationSaturation0.750 – 1 (step 0.01)Rainbow saturation — 0 = plain silver foil, 1 = fully spectral
roughnessRoughness0.250 – 1 (step 0.01)Matte laminate grain — softens the gloss with fine paper-like noise
speedSpeed10 – 2 (step 0.01)Animation speed — the spectrum drifts across the foil as if the sticker is tilting in your hand. 0 pauses.
crinkleCrinkle0.50 – 1 (step 0.01)Laminate wrinkles — perturbs the surface so the sheen and rainbow swirl locally instead of lying flat
crinkleScaleCrinkle Scale10.3 – 6 (step 0.01)Size of the laminate wrinkles — higher = smaller, denser wrinkles
sparkleSparkle0.40 – 1 (step 0.01)Glitter flakes embedded in the foil — tiny facets that refract a shifted hue and twinkle as the spectrum drifts
edgeSoftnessEdge Softness0.050 – 1 (step 0.01)Softness of the shape boundary edge
shapeShapeSet in code{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrlSet in code—URL to a pre-generated SDF .bin file
shapeTypeshapeTypeSet in code—Active SDF shape type

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Hologram홀로그램 투영

A translucent sci-fi projection with glowing edges, scan lines, flicker, and beam wobble.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Thin Film박막 간섭

An iridescent thin-film color band that follows the edge of a shape.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Obsidian흑요석 유리

Dark tinted glass with flowing iridescent color on angled faces and bevels.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Neon네온관

A luminous neon tube or 3D pipe effect shaped by a custom outline.

Like a holographic sticker changing color as it catches the light, rainbow patches and tiny sparkles drift across the surface.

`hueShift` rotates the rainbow colors. Raise `foilScale` for smaller, busier color patches; lower `saturation` for a more silver finish. `crinkle` adds wrinkles to the foil, while `sparkle` changes how many glitter flakes catch the light.

The effect creates its own foil surface, making it useful for badges and sticker-like graphics. Moving sparkles and color contrast can obscure small text, so avoid applying it to whole paragraphs.

When to use

Use it for stickers, limited-edition badges, or a foil accent on packaging. Avoid it across long copy or large areas of a restrained interface.

Open as page ↗