Flickering Grid

Canvas-based flickering grid animations with performance optimization. Perfect for React applications requiring subtle animated backgrounds with Next.js integration and TypeScript support.

Canvas API

Intersection Observer API

Loading component...

'use client';import React, {  useCallback,  useEffect,  useMemo,  useRef,  useState,} from "react";import { cn } from "@/lib/utils";export interface FlickeringGridProps {  squareSize?: number;  gridGap?: number;  flickerChance?: number;  color?: string;  width?: number;  height?: number;  className?: string;  maxOpacity?: number;}export const FlickeringGrid: React.FC<FlickeringGridProps> = ({  squareSize = 4,  gridGap = 6,  flickerChance = 0.3,  color = "rgb(0, 0, 0)",  width,  height,  className,  maxOpacity = 0.3,}) => {  const canvasRef = useRef<HTMLCanvasElement>(null);  const containerRef = useRef<HTMLDivElement>(null);  const [isInView, setIsInView] = useState(false);  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });  const memoizedColor = useMemo(() => {    const toRGBA = (color: string) => {      if (typeof window === "undefined") {        return `rgba(0, 0, 0,`;      }      const canvas = document.createElement("canvas");      canvas.width = canvas.height = 1;      const ctx = canvas.getContext("2d");      if (!ctx) return "rgba(255, 0, 0,";      ctx.fillStyle = color;      ctx.fillRect(0, 0, 1, 1);      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);      return `rgba(${r}, ${g}, ${b},`;    };    return toRGBA(color);  }, [color]);  const setupCanvas = useCallback(    (canvas: HTMLCanvasElement, width: number, height: number) => {      const dpr = window.devicePixelRatio || 1;      canvas.width = width * dpr;      canvas.height = height * dpr;      canvas.style.width = `${width}px`;      canvas.style.height = `${height}px`;      const cols = Math.floor(width / (squareSize + gridGap));      const rows = Math.floor(height / (squareSize + gridGap));      const squares = new Float32Array(cols * rows);      for (let i = 0; i < squares.length; i++) {        squares[i] = Math.random() * maxOpacity;      }      return { cols, rows, squares, dpr };    },    [squareSize, gridGap, maxOpacity],  );  const updateSquares = useCallback(    (squares: Float32Array, deltaTime: number) => {      for (let i = 0; i < squares.length; i++) {        if (Math.random() < flickerChance * deltaTime) {          squares[i] = Math.random() * maxOpacity;        }      }    },    [flickerChance, maxOpacity],  );  const drawGrid = useCallback(    (      ctx: CanvasRenderingContext2D,      width: number,      height: number,      cols: number,      rows: number,      squares: Float32Array,      dpr: number,    ) => {      ctx.clearRect(0, 0, width, height);      ctx.fillStyle = "transparent";      ctx.fillRect(0, 0, width, height);      for (let i = 0; i < cols; i++) {        for (let j = 0; j < rows; j++) {          const opacity = squares[i * rows + j];          ctx.fillStyle = `${memoizedColor}${opacity})`;          ctx.fillRect(            i * (squareSize + gridGap) * dpr,            j * (squareSize + gridGap) * dpr,            squareSize * dpr,            squareSize * dpr,          );        }      }    },    [memoizedColor, squareSize, gridGap],  );  useEffect(() => {    const canvas = canvasRef.current;    const container = containerRef.current;    if (!canvas || !container) return;    const ctx = canvas.getContext("2d");    if (!ctx) return;    let animationFrameId: number;    let gridParams: ReturnType<typeof setupCanvas>;    const updateCanvasSize = () => {      const newWidth = width || container.clientWidth;      const newHeight = height || container.clientHeight;      setCanvasSize({ width: newWidth, height: newHeight });      gridParams = setupCanvas(canvas, newWidth, newHeight);    };    updateCanvasSize();    let lastTime = 0;    const animate = (time: number) => {      if (!isInView) return;      const deltaTime = (time - lastTime) / 1000;      lastTime = time;      updateSquares(gridParams.squares, deltaTime);      drawGrid(        ctx,        canvas.width,        canvas.height,        gridParams.cols,        gridParams.rows,        gridParams.squares,        gridParams.dpr,      );      animationFrameId = requestAnimationFrame(animate);    };    const resizeObserver = new ResizeObserver(() => {      updateCanvasSize();    });    resizeObserver.observe(container);    const intersectionObserver = new IntersectionObserver(      ([entry]) => {        setIsInView(entry.isIntersecting);      },      { threshold: 0 },    );    intersectionObserver.observe(canvas);    if (isInView) {      animationFrameId = requestAnimationFrame(animate);    }    return () => {      cancelAnimationFrame(animationFrameId);      resizeObserver.disconnect();      intersectionObserver.disconnect();    };  }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);  return (    <div ref={containerRef} className={cn("w-full h-full", className)}>      <canvas        ref={canvasRef}        className="pointer-events-none"        style={{          width: canvasSize.width,          height: canvasSize.height,        }}      />    </div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/flickering-grid.json

npx shadcn@latest add https://www.shadcn.io/registry/flickering-grid.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/flickering-grid.json

bunx shadcn@latest add https://www.shadcn.io/registry/flickering-grid.json

Features

Canvas-based animation with randomized square opacity changes creating dynamic flickering effects
Performance optimized using Intersection Observer to pause animations when not visible
High DPI support automatically adapting to device pixel ratio for crisp rendering
Customizable grid parameters including square size, gap spacing, and overall dimensions
Flexible color system supporting any CSS color format with automatic RGBA conversion
Responsive design adapting to container size changes using ResizeObserver
Memory efficient implementation using Float32Array for optimal performance
TypeScript support with complete interface definitions for reliable integration

Examples

Blue Variant

Loading component...

'use client';import React, {  useCallback,  useEffect,  useMemo,  useRef,  useState,} from "react";import { cn } from "@/lib/utils";export interface FlickeringGridProps {  squareSize?: number;  gridGap?: number;  flickerChance?: number;  color?: string;  width?: number;  height?: number;  className?: string;  maxOpacity?: number;}export const FlickeringGrid: React.FC<FlickeringGridProps> = ({  squareSize = 4,  gridGap = 6,  flickerChance = 0.3,  color = "rgb(0, 0, 0)",  width,  height,  className,  maxOpacity = 0.3,}) => {  const canvasRef = useRef<HTMLCanvasElement>(null);  const containerRef = useRef<HTMLDivElement>(null);  const [isInView, setIsInView] = useState(false);  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });  const memoizedColor = useMemo(() => {    const toRGBA = (color: string) => {      if (typeof window === "undefined") {        return `rgba(0, 0, 0,`;      }      const canvas = document.createElement("canvas");      canvas.width = canvas.height = 1;      const ctx = canvas.getContext("2d");      if (!ctx) return "rgba(255, 0, 0,";      ctx.fillStyle = color;      ctx.fillRect(0, 0, 1, 1);      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data);      return `rgba(${r}, ${g}, ${b},`;    };    return toRGBA(color);  }, [color]);  const setupCanvas = useCallback(    (canvas: HTMLCanvasElement, width: number, height: number) => {      const dpr = window.devicePixelRatio || 1;      canvas.width = width * dpr;      canvas.height = height * dpr;      canvas.style.width = `${width}px`;      canvas.style.height = `${height}px`;      const cols = Math.floor(width / (squareSize + gridGap));      const rows = Math.floor(height / (squareSize + gridGap));      const squares = new Float32Array(cols * rows);      for (let i = 0; i < squares.length; i++) {        squares[i] = Math.random() * maxOpacity;      }      return { cols, rows, squares, dpr };    },    [squareSize, gridGap, maxOpacity],  );  const updateSquares = useCallback(    (squares: Float32Array, deltaTime: number) => {      for (let i = 0; i < squares.length; i++) {        if (Math.random() < flickerChance * deltaTime) {          squares[i] = Math.random() * maxOpacity;        }      }    },    [flickerChance, maxOpacity],  );  const drawGrid = useCallback(    (      ctx: CanvasRenderingContext2D,      width: number,      height: number,      cols: number,      rows: number,      squares: Float32Array,      dpr: number,    ) => {      ctx.clearRect(0, 0, width, height);      ctx.fillStyle = "transparent";      ctx.fillRect(0, 0, width, height);      for (let i = 0; i < cols; i++) {        for (let j = 0; j < rows; j++) {          const opacity = squares[i * rows + j];          ctx.fillStyle = `${memoizedColor}${opacity})`;          ctx.fillRect(            i * (squareSize + gridGap) * dpr,            j * (squareSize + gridGap) * dpr,            squareSize * dpr,            squareSize * dpr,          );        }      }    },    [memoizedColor, squareSize, gridGap],  );  useEffect(() => {    const canvas = canvasRef.current;    const container = containerRef.current;    if (!canvas || !container) return;    const ctx = canvas.getContext("2d");    if (!ctx) return;    let animationFrameId: number;    let gridParams: ReturnType<typeof setupCanvas>;    const updateCanvasSize = () => {      const newWidth = width || container.clientWidth;      const newHeight = height || container.clientHeight;      setCanvasSize({ width: newWidth, height: newHeight });      gridParams = setupCanvas(canvas, newWidth, newHeight);    };    updateCanvasSize();    let lastTime = 0;    const animate = (time: number) => {      if (!isInView) return;      const deltaTime = (time - lastTime) / 1000;      lastTime = time;      updateSquares(gridParams.squares, deltaTime);      drawGrid(        ctx,        canvas.width,        canvas.height,        gridParams.cols,        gridParams.rows,        gridParams.squares,        gridParams.dpr,      );      animationFrameId = requestAnimationFrame(animate);    };    const resizeObserver = new ResizeObserver(() => {      updateCanvasSize();    });    resizeObserver.observe(container);    const intersectionObserver = new IntersectionObserver(      ([entry]) => {        setIsInView(entry.isIntersecting);      },      { threshold: 0 },    );    intersectionObserver.observe(canvas);    if (isInView) {      animationFrameId = requestAnimationFrame(animate);    }    return () => {      cancelAnimationFrame(animationFrameId);      resizeObserver.disconnect();      intersectionObserver.disconnect();    };  }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]);  return (    <div ref={containerRef} className={cn("w-full h-full", className)}>      <canvas        ref={canvasRef}        className="pointer-events-none"        style={{          width: canvasSize.width,          height: canvasSize.height,        }}      />    </div>  );};

Use Cases

This free open source React component works well for:

Dashboard backgrounds - Subtle animated patterns for data-heavy interfaces built with Next.js
Landing page sections - Dynamic grid effects that don't compete with content using TypeScript
Portfolio layouts - Sophisticated animated backgrounds showcasing technical skills
App interfaces - Ambient grid patterns for modern applications using shadcn/ui design
Documentation sites - Technical precision patterns for developer resources
Presentation backgrounds - Professional animated effects for slides using Tailwind CSS

API Reference

Props

Prop	Type	Default	Description
`squareSize`	`number`	`4`	Size of each square in pixels
`gridGap`	`number`	`6`	Gap between squares in pixels
`flickerChance`	`number`	`0.3`	Probability of a square flickering per second (0-1)
`color`	`string`	`"rgb(0, 0, 0)"`	Color of the squares (any valid CSS color)
`width`	`number`	-	Fixed width (uses container width if not specified)
`height`	`number`	-	Fixed height (uses container height if not specified)
`className`	`string`	-	Additional CSS classes for the container
`maxOpacity`	`number`	`0.3`	Maximum opacity for squares (0-1)

Implementation Notes

Component uses HTML5 Canvas API for high-performance square rendering and animation
Animation automatically pauses when not visible using Intersection Observer for battery efficiency
Uses requestAnimationFrame for smooth 60fps animation with automatic container resizing
Color formats supported: RGB, hex, HSL, and named CSS colors with automatic RGBA conversion
Grid density controlled by squareSize (2-8px) and gridGap (3-12px) parameters
Flicker intensity adjustable via flickerChance (0-1) and maxOpacity (0-1) settings
Memory efficient implementation using Float32Array for optimal performance on large grids
Compatible with shadcn/ui design system and responsive to container dimension changes
Pointer events disabled to avoid interference with overlaid content and interactions

Reactflickering-grid

Reactflickering-grid

On this page