Documentation

GuidesComponents

Neon

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

Props

center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the neon shape
scalenumber
Default:1
Scale of the neon shape (1 = default size)
colorstring
Default:#00ddff
Primary neon tube color
secondaryColorstring
Default:#ff00aa
Shadow-side color for a two-tone / dual-lit pipe look
secondaryBlendnumber
Default:0.5
Blend between mono (0) and two-tone (1) tube coloring
glowColorstring
Default:#00ddff
Color of the outer glow / bloom
tubeThicknessnumber
Default:0.2
How far inward from the boundary the tube extends. Low = thin neon outline, high = thick 3D pipe
intensitynumber
Default:1.5
Overall brightness multiplier
hotCoreIntensitynumber
Default:0.6
Bright white-hot center line — the gas discharge glow inside the tube
glowIntensitynumber
Default:0.6
Outer glow / bloom strength
glowRadiusnumber
Default:0.25
How far the glow extends beyond the tube
lightAnglenumber
Default:300
Directional light angle in degrees — controls 3D shading on the tube
specularIntensitynumber
Default:0.5
Specular highlight brightness on the tube surface
specularSizenumber
Default:0.5
Specular highlight size — 0 = tight pinpoint, 1 = broad sheen
cornerSmoothingnumber
Default:0.15
Rounds sharp corners to mimic how real glass tubes curve at bends
flickerSpeednumber
Default:0
Flicker animation speed — 0 = off, higher = faster sporadic on/off
flickerAmountnumber
Default:0.2
How often the neon flickers off — 0 = always on, 1 = frequent outages
flowSpeednumber
Default:0
Flow animation speed — 0 = off, light rotates through the tube
flowAmountnumber
Default:0.3
Strength of the flowing brightness variation — 0 = uniform, 1 = dramatic
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>
  <Neon
    color="#00ddff"
    :intensity="1.5"
   />
</Shader>
Previous
Mirror
Next
Paper