Flow Field

A flowing wind effect with particles that swirl around the cursor and scatter on click, creating a dynamic background animation.

bykokonut-labs from Kokonutui

Installation

terminal

pnpm dlx layro-cli add @kokonut-labs/flow-field

npx layro-cli add @kokonut-labs/flow-field

npx layro-cli add @kokonut-labs/flow-field

bunx layro-cli add @kokonut-labs/flow-field

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

// biome-ignore-all lint/suspicious/noBitwiseOperators: the noise hash is bit arithmetic.
"use client";

/**
 * @author: @dorianbaffier
 * @description: Wind. Streamlines that part around the cursor, swirl in its wake and scatter on click.
 * @version: 2.0.0
 * @date: 2026-10-14
 * @license: MIT
 * @website: https://kokonutui.com
 * @github: https://github.com/kokonut-labs/kokonutui
 */

import { type ReactNode, useEffect, useRef } from "react";