Pixel Flow Field

Renders a dynamic pixel-based background with flowing cells. Behaves by animating cells based on settings like speed, pointer interaction, and text input. Use it to create visually engaging, interactive background effects on web pages.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/pixel-flow-field

npx layro-cli add @educlopez/pixel-flow-field

npx layro-cli add @educlopez/pixel-flow-field

bunx layro-cli add @educlopez/pixel-flow-field

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useRef, useState } from "react";

export type PixelFlowFieldShape = "square" | "circle" | "cross";

export interface PixelFlowFieldProps {
  /** Cell size in CSS pixels. Smaller cells read the source more sharply. */
  cellSize?: number;
  /** Foreground content, always painted above the decorative field. */
  children?: ReactNode;
  /** Extra classes for the positioned wrapper element. */