Star Swipe

Conformal star warp shader with sweeping motion

star-swipe-tw

Customize

Tweak the props live

Animation

Speed0.2

Scroll Speed6

Rotation-45

Scale1.5

Opacity1

Warp

Warp Strength1.5

Warp Curvature6

Warp Falloff4

Noise Amount0.5

Color

Color Intensity0.1

Color Separation0

Color

#FF9FFC

Background

#FFFFFF

Cursor Interaction

Cursor Intensity1

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`0.2`	Animation speed multiplier (0.01–2.0)
`scale`	number	`1.5`	Pattern zoom scale — higher = zoomed in (0.1–5.0)
`warpStrength`	number	`1.5`	Intensity of the conformal star warp (0–5)
`warpCurvature`	number	`6.0`	Möbius projection curvature numerator (0.1–20)
`warpFalloff`	number	`4.0`	Möbius denominator offset — higher values soften center warp (0.1–20)
`scrollSpeed`	number	`6.0`	How fast the pattern sweeps across the screen (0–20)
`noiseAmount`	number	`0.5`	Screen-space dither noise amount (0–2)
`colorIntensity`	number	`0.1`	Overall color brightness factor (0.01–2.0)
`colorSeparation`	number	`0`	RGB channel separation for rainbow-like splits (0–5)
`rotation`	number	`-45`	Rotation angle in degrees (-180–180)
`color`	string	`"#FF9FFC"`	Tint color (hex)
`backgroundColor`	string	`"#000000"`	Background color (hex)
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to bend the warp field near pointer
`cursorIntensity`	number	`1`	Cursor effect strength multiplier (0–3)

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

speednumber

Animation speed multiplier (0.01–2.0)

Default:0.2

scalenumber

Pattern zoom scale — higher = zoomed in (0.1–5.0)

Default:1.5

warpStrengthnumber

Intensity of the conformal star warp (0–5)

Default:1.5

warpCurvaturenumber

Möbius projection curvature numerator (0.1–20)

Default:6.0

warpFalloffnumber

Möbius denominator offset — higher values soften center warp (0.1–20)

Default:4.0

scrollSpeednumber

How fast the pattern sweeps across the screen (0–20)

Default:6.0

noiseAmountnumber

Screen-space dither noise amount (0–2)

Default:0.5

colorIntensitynumber

Overall color brightness factor (0.01–2.0)

Default:0.1

colorSeparationnumber

RGB channel separation for rainbow-like splits (0–5)

Default:0

rotationnumber

Rotation angle in degrees (-180–180)

Default:-45

colorstring

Tint color (hex)

Default:"#FF9FFC"

backgroundColorstring

Background color (hex)

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to bend the warp field near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1