Neon

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

Props

Prop	Type	Default	Description
center	position	{"x":0.5,"y":0.5}	Center position of the neon shape
scale	range	1	Scale of the neon shape (1 = default size)
color	color	#00ddff	Primary neon tube color
secondaryColor	color	#ff00aa	Shadow-side color for a two-tone / dual-lit pipe look
secondaryBlend	range	0.5	Blend between mono (0) and two-tone (1) tube coloring
glowColor	color	#00ddff	Color of the outer glow / bloom
tubeThickness	range	0.2	How far inward from the boundary the tube extends. Low = thin neon outline, high = thick 3D pipe
intensity	range	1.5	Overall brightness multiplier
hotCoreIntensity	range	0.6	Bright white-hot center line - the gas discharge glow inside the tube
glowIntensity	range	0.6	Outer glow / bloom strength
glowRadius	range	0.25	How far the glow extends beyond the tube
lightAngle	range	300	Directional light angle in degrees - controls 3D shading on the tube
specularIntensity	range	0.5	Specular highlight brightness on the tube surface
specularSize	range	0.5	Specular highlight size - 0 = tight pinpoint, 1 = broad sheen
cornerSmoothing	range	0.15	Rounds sharp corners to mimic how real glass tubes curve at bends
flickerSpeed	range	0	Flicker animation speed - 0 = off, higher = faster sporadic on/off
flickerAmount	range	0.2	How often the neon flickers off - 0 = always on, 1 = frequent outages
flowSpeed	range	0	Flow animation speed - 0 = off, light rotates through the tube
flowAmount	range	0.3	Strength of the flowing brightness variation - 0 = uniform, 1 = dramatic
shape	shape	{"type":"circleSDF","radius":0.35}	Serialized shape configuration (JSON)
shapeSdfUrl	shape-upload		URL to a pre-generated SDF .bin file - when non-empty, activates SVG mode and triggers a shader recompile
shapeType	-		Active SDF shape type - triggers recompile when shape is switched. When empty, derived from shape JSON at mount time.

Usage

vue

<Shader>
  <Neon
    color="#00ddff"
    :intensity="1.5"
  />
</Shader>

MultiPointGradient Paper