Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Hologram

Volumetric sci-fi hologram — a translucent emissive projection of the shape with fresnel-lit edges, depth scan-lines that wrap 3D forms, CRT scanlines, flicker and beam wobble

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.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the hologram shape
scalenumber
Default:1
Scale of the hologram shape (1 = default size)
rotationnumber
Default:0
Rotation of the hologram shape in degrees
colorstring
Default:#5ec8ff
Projection tint — the colour the whole hologram emits (classic sci-fi cyan by default)
brightnessnumber
Default:2.5
Overall emission gain. Bright edges blow out toward white for a hot, projected look.
edgeSoftnessnumber
Default:0.04
Softness of the shape boundary edge — keep low for crisp projection edges
fillnumber
Default:0.45
Translucent interior glow. Driven by optical thickness, so thicker parts of a 3D form glow more — the core volumetric cue.
edgeGlownumber
Default:1
Fresnel rim intensity — bright glowing silhouette and, on 3D shapes, the grazing internal walls of extruded logos
depthLinesnumber
Default:0.5
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.
depthScalenumber
Default:26
Density of the depth scan-lines — higher packs more contour bands through the volume
scanlinesnumber
Default:0.55
CRT scanline contrast — how dark the gaps between horizontal projection lines get
scanlineScalenumber
Default:130
Number of horizontal scanlines across the canvas height
scanlineSpeednumber
Default:1
How fast the scanlines drift upward — 0 holds them static
sweepnumber
Default:0.1
Brightness of the refresh bar that sweeps vertically through the projection
flickernumber
Default:0.3
Unstable-projector flicker — a fast shimmer plus occasional brightness dropouts
distortionnumber
Default:0.1
Continuous horizontal wobble and chromatic edge fringing — the wavering of an unstable beam
grainnumber
Default:0.7
Fine projection static — animated per-pixel noise over the emission
speednumber
Default:1
Master animation speed for every animated layer. 0 freezes the projection.
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.
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.

Usage

<Shader>
  <Hologram
    color="#5ec8ff"
  />
</Shader>
Previous
HexGrid
Next
Holographic