Vibe UI
Initializing Vibe UI System...

Web Threads

A hardware-accelerated WebGL animated background component rendering a custom multi-thread waved line cluster. Responsive to resizing, with frame loop sleep cycles when not visible or tab focus is blurred.

Preview

✨ Web Threads Glow

Fluid Web Wave

A customizable multi-thread WebGL strand waving gently in 3D space with high performance and interactive cursor tracking.

Installation

Installation

pnpm dlx vibe-ui-kit@latest add undefined

Variations

Cyberpunk Grid

Uses emerald and cyan presets along with left-fanned pinch dynamics to simulate terminal matrices.

WAVEFORM_MONITOR

THREAD_NODE_FLUX

Waving strands simulated on GPU. Frequency range set to 7.0Hz. Mouse position inputs are mapped to pinch anchors dynamically.

Fire Strand Sway

A dense, high-frequency wave structure using orange, red, and yellow colors for a warm campfire or sunset glow.

Thermal Glow

Fire Strand Sway

Densely grouped, thin strands pulsing with deep orange and fire red hues, creating a cozy and organic glowing ambient backdrop.

Props

PropTypeDefaultDescription
color1string"#5227FF"First thread gradient start color (Hex format)
color2string"#FF9FFC"Second thread gradient end color (Hex format)
color3string"#FFFFFF"Core fusion blending color overlay (Hex format)
speednumber0.2Flow sway speed factor
threadCountnumber6Number of rendered threads (Max 10)
frequencynumber5.0Frequency of sine waves on thread paths
spreadnumber0.18Horizontal width/spread expansion rate
tapernumber1.0Amplitude scaling index for threads further out
positionnumber0.5Vertical height offset of the center node
fanMode'center' | 'left' | 'right''center'Where the wave pinch/fanning converges
glownumber0.02Thread glow intensity rate
falloffnumber0.6Glow dissipation rate
thicknessnumber1.1Visual thickness of each thread
brightnessnumber0.6Overall shader brightness factor
opacitynumber1.0Overall transparency alpha multiplier
mirrorbooleantrueMirror phase mapping on left/right sides
shimmerbooleanfalseEnable minor phase noise oscillation
grainbooleantrueEnable background overlay noise grain overlay
grainIntensitynumber0.05Grain noise intensity alpha
mouseInteractionbooleantrueAllow cursor position to influence the pinch center
mouseStrengthnumber0.3Cursor influence displacement strength

Contributors

Theme Customizer

8px
@theme { --radius: 0.5rem; --glass-blur: 8px; }
Changes apply instantly to this documentation workspace.
Web Threads | Vibe UI