How do I install the Vibe UI Web Threads component?

You can install Web Threads into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add web-threads" in your terminal.

Does Vibe UI Web Threads support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Web Threads component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

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.

Web Threads

Preview

Open Studio

Vibe UI

Sandbox

Demo Content

Canvas BG

#120f17

Color 1

#5227FF

Color 2

#FF9FFC

Speed

0.20

Count

Fan

Installation

pnpm dlx vibe-ui-kit@latest add web-threads

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

Prop	Type	Default	Description
color1	string	"#5227FF"	First thread gradient start color (Hex format)
color2	string	"#FF9FFC"	Second thread gradient end color (Hex format)
color3	string	"#FFFFFF"	Core fusion blending color overlay (Hex format)
speed	number	0.2	Flow sway speed factor
threadCount	number	6	Number of rendered threads (Max 10)
frequency	number	5.0	Frequency of sine waves on thread paths
spread	number	0.18	Horizontal width/spread expansion rate
taper	number	1.0	Amplitude scaling index for threads further out
position	number	0.5	Vertical height offset of the center node
fanMode	'center' \| 'left' \| 'right'	'center'	Where the wave pinch/fanning converges
glow	number	0.02	Thread glow intensity rate
falloff	number	0.6	Glow dissipation rate
thickness	number	1.1	Visual thickness of each thread
brightness	number	0.6	Overall shader brightness factor
opacity	number	1.0	Overall transparency alpha multiplier
mirror	boolean	true	Mirror phase mapping on left/right sides
shimmer	boolean	false	Enable minor phase noise oscillation
grain	boolean	true	Enable background overlay noise grain overlay
grainIntensity	number	0.05	Grain noise intensity alpha
mouseInteraction	boolean	true	Allow cursor position to influence the pinch center
mouseStrength	number	0.3	Cursor influence displacement strength