Toggle Sidebar B
AppearanceLight & dark mode D

Pattern Waves

A lit halftone surface of dots, lines, crosses or glyphs that moves like draped silk, rolling swells or ripples, with six presets, one-color theming and a cursor that sends ripples through it.

Default

Pick a preset, then override any pattern, wave or light value. The marks are drawn in WebGL and the cursor sends ripples through the surface.

Light previewReplay previewOpen in new tab
New Creative Components

Soft light on a moving surface.

Get started Learn more

Customize

Preset
Pattern
Wave
Color
Background
Spacing9px
Mark Size0.95
Depth0.95
Light0°
Shine0.8
Contrast1.2
Speed0.35
Scale1
Direction20°
Fade
Fade Size0.5
Opacity1
Cursor Size50px
Cursor Strength0.6

API Reference

PatternWaves

PropTypeDefaultDescription
preset'silk' | 'ocean' | 'pond' | 'lines' | 'terminal' | 'mesh''silk'A complete starting look. Every pattern, wave and light prop below overrides the preset value when you pass it.
pattern'dot' | 'square' | 'plus' | 'line' | 'glyph'from presetThe mark that draws the surface. Line traces it as flowing contour lines, glyph uses characters picked by brightness.
wave'silk' | 'swell' | 'ripple'from presetThe shape of the moving surface. Silk is draped fabric folds, swell is rolling parallel waves, ripple is rings travelling in from off screen.
colorstring'#ffffff'The one color of the pattern. Shadows, midtones and highlights are all derived from it. A color darker than the background prints like ink.
backgroundColorstring'#000000'Color behind the pattern. Pass transparent to show the page through.
spacingnumberfrom presetDistance between marks in CSS pixels. Smaller values give a finer print.
markSizenumberfrom presetLargest mark as a fraction of the spacing.
depthnumberfrom presetHow tall the surface is. Deeper surfaces cast stronger shading and lift the marks along the crests.
lightnumberfrom presetAngle of the light across the waves in degrees, from -90 to 90. 0 lights the folds head on, larger values graze them.
shinenumberfrom presetStrength of the glints where the surface catches the light.
contrastnumberfrom presetSpread between the quiet shadows and the lit areas.
speednumberfrom presetHow fast the surface moves. 0 freezes it while the cursor keeps working.
scalenumberfrom presetSize of the waves. Larger values give broader, calmer forms.
directionnumberfrom presetDirection the waves travel in degrees. The light turns with it.
opacitynumber1Overall opacity of the pattern, from 0 to 1.
fade'edges' | 'center' | 'bottom' | 'top' | 'none''edges'Where the pattern fades into the background. Center keeps the middle calm for a headline, bottom and top fade towards that edge.
fadeSizenumber0.5How far the fade reaches, from 0.05 to 1.
charactersstring'.:-=+*#%@'Characters for the glyph pattern, ordered from the lightest to the densest.
interactivebooleantrueLets the cursor disturb the surface. Moving it leaves a wake of ripples that catch the light, a click drops a splash.
cursorSizenumber50Radius of the patch of surface the cursor pushes, in CSS pixels.
cursorStrengthnumber0.6How hard the cursor pushes the surface, from 0 to 1.
introbooleantrueOn mount the marks fade in from the center, then the surface rises and the light sweeps across it.
pausedbooleanfalseFreezes the surface. The cursor ripples keep working.
styleCSSProperties-Inline styles for the root element.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • Purely decorative canvas. Place it behind content with enough contrast.
ParticlesPixel Blast