Vibe UI
Initializing Vibe UI System...

Sliced Waves

A hardware-accelerated WebGL animated background component rendering a custom grid division of sliding wave stripes. Responsive to resizing, with frame loop sleep cycles when not visible or tab focus is blurred.

Preview

✨ Sliced Waves Flow

Graphic Slice Wave

Beautiful procedural grid divisions swaying as wave patterns on the GPU. Supports custom colors, thickness, and mouse warp fields.

Installation

Installation

pnpm dlx vibe-ui-kit@latest add undefined

Variations

Cyberpunk Neon Grid

Fanned vertical orange, red, and hot pink bars flashing dynamically.

SLICE_GRID_HUD

VERTICAL_BAR_FLUX

Procedural vertical bars modulated dynamically on WebGL shader coordinates. Render cycles synchronized.

Oceanic Calm Grid

Slow, overlapping horizontal teal and cyan bars creating an elegant sea-glow backdrop.

Oceanic Flow

Calm Sea Grid

Slow, ambient horizontal grids overlapping in sea green and cyan hues, producing an elegant underwater light shimmer backdrop.

Props

PropTypeDefaultDescription
color1string"#FF9FFC"First stripe gradient start color (Hex format)
color2string"#5227FF"Second stripe gradient end color (Hex format)
color3string"#B497CF"Core blending gradient ambient color (Hex format)
columnsnumber14Number of column grid lines
rowsnumber8Number of row grid lines
barThicknessnumber0.1Physical width thickness scale of the stripes
speednumber0.35Stripe movement speed index
travelnumber0.7Displacement range travel scale of the sliding animation
waveSpreadnumber0.9Phase delay offset spread factor between adjacent stripes
rowOffsetnumber1.0Individual row phase offset index
softnessnumber0.05Anti-aliasing border edge softness blur index
glownumber0Stripe rim glow bloom rate
brightnessnumber1.0Overall shader color brightness multiplier
contrastnumber1.0Overall color contrast multiplier
opacitynumber0.5Overall transparency alpha multiplier
orientation'horizontal' | 'vertical''horizontal'Visual direction orientation layout of the bars
alternatebooleanfalseAlternate movement directions on consecutive columns/rows
mouseInteractionbooleantrueAllows cursor movement to displace stripe positions
mouseStrengthnumber1.0Mouse displacement influence strength
mouseRadiusnumber0.3Radius index of cursor warp field
grainbooleantrueEnables background overlay noise grain overlay
grainIntensitynumber0.05Grain noise intensity alpha

Contributors

Theme Customizer

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