Theme

Warp

Free

Animated color bands warped by noise and swirls over a checks, stripes, or edge pattern. Adapted from Warp by Paper Shaders (shaders.paper.design) under the Apache 2.0 license.

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Customize

Controls

Band 1

Band 2

Band 3

Band 4

Band 5

Band 6

Band colors4

Pattern

Distortion0.25

Pattern scale0.1

Proportion0.45

Softness1

Swirl0.8

Swirl layers10

Speed1

Scale1

Rotation0

Offset X0

Offset Y0

Code

Usage

<ShaderWarp
  bandColor1="#121212"
  bandColor2="#9470ff"
  bandColor3="#121212"
  bandColor4="#8838ff"
  bandColor5="#121212"
  bandColor6="#9470ff"
  bandColorCount={4}
  basePattern="checks"
  warpDistortion={0.25}
  patternScale={0.1}
  bandProportion={0.45}
  bandSoftness={1}
  swirlStrength={0.8}
  swirlLayers={10}
  warpSpeed={1}
  graphicScale={1}
  graphicRotation={0}
  graphicOffsetX={0}
  graphicOffsetY={0}
/>

Props

prop	type	default	description
`bandColorCount`	`number`	`4`	Number of active band colors, from 1 to 6.
`bandColor1`	`string`	`#121212`	Band color 1 as a CSS color.
`bandColor2`	`string`	`#9470ff`	Band color 2 as a CSS color.
`bandColor3`	`string`	`#121212`	Band color 3 as a CSS color.
`bandColor4`	`string`	`#8838ff`	Band color 4 as a CSS color.
`bandColor5`	`string`	`#121212`	Band color 5 as a CSS color.
`bandColor6`	`string`	`#9470ff`	Band color 6 as a CSS color.
`basePattern`	`"checks" \| "stripes" \| "edge"`	`checks`	Base pattern under the warp.
`bandProportion`	`number`	`0.45`	Blend point between colors. 0.5 gives an equal split. Range 0 to 1.
`bandSoftness`	`number`	`1`	0 gives hard color edges and 1 gives smooth gradients. Range 0 to 1.
`warpDistortion`	`number`	`0.25`	Strength of the noise distortion. Range 0 to 1.
`swirlStrength`	`number`	`0.8`	Strength of the swirl distortion. Range 0 to 1.
`swirlLayers`	`number`	`10`	Number of layered swirl passes. Range 2 to 20.
`patternScale`	`number`	`0.1`	Zoom level of the base pattern. Range 0 to 1.
`warpSpeed`	`number`	`1`	Animation speed. 0 stops the animation. Range 0 to 20.
`graphicScale`	`number`	`1`	Overall zoom level of the graphic.
`graphicRotation`	`number`	`0`	Rotation of the graphic in degrees.
`graphicOffsetX`	`number`	`0`	Horizontal offset of the graphic center.
`graphicOffsetY`	`number`	`0`	Vertical offset of the graphic center.
`graphicFit`	`"none" \| "contain" \| "cover"`	`none`	How the graphic fits the canvas.
`opacity`	`number`	`1`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.5`	Caps device pixel ratio for sharper output without runaway GPU cost.
`maxFps`	`30 \| 45 \| 60`	`60`	Caps the animation frame rate for performance-sensitive pages.