Is the Color Drip component accessible?

Yes, the Color Drip component is built with accessibility in mind using Radix UI primitives. It supports keyboard navigation, screen readers, and follows WCAG guidelines.

Can I customize the Color Drip component?

Absolutely! The Color Drip component is fully customizable using Tailwind CSS classes. You can modify colors, sizes, animations, and more by editing the component code or passing custom className props.

Does the Color Drip component work with Next.js?

Yes, all Nyxhora UI components including Color Drip are fully compatible with Next.js 14+ (including Next.js 15), supporting both the App Router and Pages Router.

Color Drip

Animated vertical lines with colorful dripping effects. Perfect for creating dynamic backgrounds with a matrix-like or rain-inspired aesthetic.

Preview

Color Drip

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/color-drip.json

Usage

tsx

17 lines

import { ColorDrip } from "@/components/ui/color-drip"

export default function Hero() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <ColorDrip 
        colorScheme="neon"
        lineCount={12}
        speed={1.5}
        showStaticLines={true}
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        {/* Your content here */}
      </div>
    </div>
  )
}

Color Schemes

Rainbow

Neon

Pastel

Fire

Ocean

Mono

Animation Options

Fast Animation (2x speed)

2x Speed

Upward Direction

Rising Effect

With Static Lines

Static Lines Visible

High Density Lines

20 Lines

Tall Drip Effect

Tall Drips

Custom Colors

Custom Gradient

Props

Prop	Type	Default	Description
`lineCount`	`number`	`10`	Number of drip lines
`colorScheme`	`'rainbow' \| 'neon' \| 'pastel' \| 'fire' \| 'ocean' \| 'mono' \| 'custom'`	`rainbow`	Color theme preset for the drip effect
`customColors`	`string[]`	`undefined`	Array of custom colors (used when colorScheme is 'custom')
`speed`	`number`	`1`	Animation speed multiplier
`dripHeight`	`number`	`15`	Height of the drip trail in viewport height units
`lineWidth`	`number`	`1`	Width of each line in pixels
`backgroundColor`	`string`	`#111111`	Background color
`containerWidth`	`string`	`90vw`	Width of the container
`showStaticLines`	`boolean`	`false`	Show static line behind the drip
`staticLineColor`	`string`	`rgba(255, 255, 255, 0.05)`	Color of static lines
`direction`	`'down' \| 'up'`	`down`	Direction of the drip animation
`staggerDelay`	`number`	`0.5`	Delay between each line animation (seconds)
`className`	`string`	`undefined`	Additional CSS classes