Back to shaders

Fluid Ink

Customize
#0a0a1a
#1a1a4e
#6a0dad
1.00
1.50
0.40
1.00
1.00
1.00
1.00
1.00

Flowing ink with domain warping, swirls, and color bleeding.

fluidorganicsmokeabstractflowby ShaderDrop

Source Code

Quick Start

1

Download or copy the component file

2

Save to components/FluidInk.tsx

3

Import and use in your page

page.tsx
import { FluidInk } from "@/components/FluidInk"

export default function Page() {
  return (
    <div className="relative min-h-screen">
      <FluidInk className="absolute inset-0 -z-10" />
      {/* Your content here */}
    </div>
  )
}
FluidInk.tsx