Shader Atlas
한국어
◆ Materials

Hologram

홀로그램 투영

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

Also known as: HologramSci-fi hologramHolographic projection

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, Hologram } from 'shaders/react'

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

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

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Hologram />
    </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: 'Hologram',
    }
  ]
}, { disableTelemetry: true })

Props · Hologram

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 hologram shape
scaleScale10.1 – 3 (step 0.01)Scale of the hologram shape (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the hologram shape in degrees
colorColor#5ec8ff—Projection tint — the color the whole hologram emits (classic sci-fi cyan by default)
brightnessBrightness2.50.2 – 3 (step 0.01)Overall emission gain. Bright edges blow out toward white for a hot, projected look.
edgeSoftnessEdge Softness0.040 – 1 (step 0.01)Softness of the shape boundary edge — keep low for crisp projection edges
fillVolume Fill0.450 – 1 (step 0.01)Translucent interior glow. Driven by optical thickness, so thicker parts of a 3D form glow more — the core volumetric cue.
edgeGlowEdge Glow10 – 2.5 (step 0.01)Fresnel rim intensity — bright glowing silhouette and, on 3D shapes, the grazing internal walls of extruded logos
depthLinesDepth Lines0.50 – 1 (step 0.01)Iso-depth scan-lines that hug the surface and reveal the 3D form like a volumetric scan. On flat shapes they become concentric contour rings.
depthScaleDepth Density264 – 70 (step 1)Density of the depth scan-lines — higher packs more contour bands through the volume
scanlinesScanlines0.550 – 1 (step 0.01)CRT scanline contrast — how dark the gaps between horizontal projection lines get
scanlineScaleScanline Count13020 – 400 (step 1)Number of horizontal scanlines across the canvas height
scanlineSpeedScanline Drift10 – 5 (step 0.01)How fast the scanlines drift upward — 0 holds them static
sweepSweep Bar0.10 – 1 (step 0.01)Brightness of the refresh bar that sweeps vertically through the projection
flickerFlicker0.30 – 1 (step 0.01)Unstable-projector flicker — a fast shimmer plus occasional brightness dropouts
distortionDistortion0.10 – 1 (step 0.01)Continuous horizontal wobble and chromatic edge fringing — the wavering of an unstable beam
grainGrain0.70 – 1 (step 0.01)Fine projection static — animated per-pixel noise over the emission
speedSpeed10 – 3 (step 0.01)Master animation speed for every animated layer. 0 freezes the projection.
shapeShapeSet in code{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrlSet in code—URL to a pre-generated SDF .bin file — when non-empty, activates SVG mode and triggers a shader recompile
shapeTypeshapeTypeSet in code—Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time.

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

Holographic홀로그래픽 포일

Animated holographic foil with a rainbow sheen and glitter flakes.

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.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Light Edge움직이는 빛 테두리

Colored light pulses and races around the edge of a shape.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Chromatic Aberration색수차

Separates the red, green and blue channels so edges show a prism-like color split.

It looks like a projection suspended in the air: translucent light and a glowing outline sit beneath moving scan lines.

Raise `brightness` to brighten the projection; `fill` adds translucent light inside it. `edgeGlow` controls the rim, and `depthLines` adds contour-like lines that follow the surface. Raise `scanlines` to deepen the gaps between horizontal lines, and `flicker` makes the projection less stable.

The effect builds a holographic shape, so it reads clearly in a still scene or when separated from other UI. Scan lines and flicker can make lettering hard to read; keep them restrained on instructions.

When to use

Use it for sci-fi logos, projected status indicators, or short transitions. Avoid it on long instructions or essential controls that should not flicker.

Open as page ↗