Kinetic Dots Shader

Shaders 27

About

A pointer-reactive WebGL dot-grid shader background that fills the trail behind the cursor, for hero sections, cards, and interactive backdrops.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Kinetic Dots Shader to your project and fits it to your theme.

Code

How Kinetic Dots Shader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ShaderKineticDots from "@/components/ui/shader-kinetic-dots";

export default function ShaderKineticDotsDemo() {
  return (
    <div className="relative h-screen w-full">
      <ShaderKineticDots
        preset="kinetic-dots"
        tone="dark"
        className="absolute inset-0 h-full w-full"
      />
    </div>
  );
}