Neon

Photorealistic neon tube / 3D pipe effect driven by a custom shape

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 neon shape. Accepts CSS units, see Sizing and units.

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

  • scale

    Scale of the neon shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the neon shape in degrees

    Type
    number
    Default
    0

  • color

    Primary neon tube color

    Type
    string
    Default
    #00ddff

  • secondaryColor

    Shadow-side color for a two-tone / dual-lit pipe look

    Type
    string
    Default
    #ff00aa

  • secondaryBlend

    Blend between mono (0) and two-tone (1) tube coloring

    Type
    number
    Default
    0.5

  • glowColor

    Color of the outer glow / bloom

    Type
    string
    Default
    #00ddff

  • tubeThickness

    How far inward from the boundary the tube extends. Low = thin neon outline, high = thick 3D pipe

    Type
    number
    Default
    0.2

  • intensity

    Overall brightness multiplier

    Type
    number
    Default
    1.5

  • hotCoreIntensity

    Bright white-hot center line — the gas discharge glow inside the tube

    Type
    number
    Default
    0.6

  • glowIntensity

    Outer glow / bloom strength

    Type
    number
    Default
    0.6

  • glowRadius

    How far the glow extends beyond the tube

    Type
    number
    Default
    0.25

  • lightAngle

    Directional light angle in degrees — controls 3D shading on the tube

    Type
    number
    Default
    300

  • specularIntensity

    Specular highlight brightness on the tube surface

    Type
    number
    Default
    0.5

  • specularSize

    Specular highlight size — 0 = tight pinpoint, 1 = broad sheen

    Type
    number
    Default
    0.5

  • cornerSmoothing

    Rounds sharp corners to mimic how real glass tubes curve at bends

    Type
    number
    Default
    0.15

  • flickerSpeed

    Flicker animation speed — 0 = off, higher = faster sporadic on/off

    Type
    number
    Default
    0

  • flickerAmount

    How often the neon flickers off — 0 = always on, 1 = frequent outages

    Type
    number
    Default
    0.2

  • flowSpeed

    Flow animation speed — 0 = off, light rotates through the tube

    Type
    number
    Default
    0

  • flowAmount

    Strength of the flowing brightness variation — 0 = uniform, 1 = dramatic

    Type
    number
    Default
    0.3

  • 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>
  <Neon
    color="#00ddff"
    intensity={1.5}
  />
</Shader>