BG-02BackgroundsUpdated, October 14, 2026

Background Paths

A ribbon of lines in one color that keeps flowing at any size and parts around the cursor.

no extra packages

Calm by default

A ribbon of lines that keeps flowing in one color, at any size. Move the cursor through it and the lines part around you.

PRODither Reveal Hero and more like it are in Kokonut UI Pro

Installation

Background Paths is a free, open-source React component in the Kokonut UI Backgrounds collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/background-paths.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/background-paths

Usage

import BackgroundPaths from "@/components/kokonutui/background-paths";

export default function Example() {
  return <BackgroundPaths />;
}

Dependencies

Built with React and Tailwind CSS.

Dot Field

A halftone dot membrane that ripples behind a swipe and rings out from a click, built with React and Canvas.

Shape Hero

A landing hero where shapes drop in, pile up under the headline and can be grabbed and thrown.