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

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the hologram shape

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

  • scale

    Scale of the hologram shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the hologram shape in degrees

    Type
    number
    Default
    0

  • color

    Projection tint — the color the whole hologram emits (classic sci-fi cyan by default)

    Type
    string
    Default
    #5ec8ff

  • brightness

    Overall emission gain. Bright edges blow out toward white for a hot, projected look.

    Type
    number
    Default
    2.5

  • edgeSoftness

    Softness of the shape boundary edge — keep low for crisp projection edges

    Type
    number
    Default
    0.04

  • fill

    Translucent interior glow. Driven by optical thickness, so thicker parts of a 3D form glow more — the core volumetric cue.

    Type
    number
    Default
    0.45

  • edgeGlow

    Fresnel rim intensity — bright glowing silhouette and, on 3D shapes, the grazing internal walls of extruded logos

    Type
    number
    Default
    1

  • depthLines

    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.

    Type
    number
    Default
    0.5

  • depthScale

    Density of the depth scan-lines — higher packs more contour bands through the volume

    Type
    number
    Default
    26

  • scanlines

    CRT scanline contrast — how dark the gaps between horizontal projection lines get

    Type
    number
    Default
    0.55

  • scanlineScale

    Number of horizontal scanlines across the canvas height

    Type
    number
    Default
    130

  • scanlineSpeed

    How fast the scanlines drift upward — 0 holds them static

    Type
    number
    Default
    1

  • sweep

    Brightness of the refresh bar that sweeps vertically through the projection

    Type
    number
    Default
    0.1

  • flicker

    Unstable-projector flicker — a fast shimmer plus occasional brightness dropouts

    Type
    number
    Default
    0.3

  • distortion

    Continuous horizontal wobble and chromatic edge fringing — the wavering of an unstable beam

    Type
    number
    Default
    0.1

  • grain

    Fine projection static — animated per-pixel noise over the emission

    Type
    number
    Default
    0.7

  • speed

    Master animation speed for every animated layer. 0 freezes the projection.

    Type
    number
    Default
    1

  • shape

    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.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    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.

    Type
    string
    Default
    ""

Usage

<Shader>
  <Hologram
    color="#5ec8ff"
  />
</Shader>