Shader Flow

A soft animated shader-style background with flowing gradient motion.

Background Effectsgradienthoverbackgroundshadergradientanimationflowingblobsframer-motion

Nexus UIShader Background

Flowing gradient animation

blobsnoiseblur

Playground

Adjust the important props for this component and grab JSX that matches your choices.

showContent

Show the default built-in foreground content.

cursorReactive

Enable subtle cursor-reactive movement of background blobs.

intensity

Control the intensity of cursor-reactive movement.

Generated JSX

Copy this into your page.

<useRef
  showContent={true}
  cursorReactive={true}
  intensity="medium"
/>

Animation effects

gradienthover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.