Interactive Dot Grid

A playful grid-based interactive experience. Click on any dot to trigger ripple wave animations staggered from that coordinate.

Technical Features

Anime.js Animations

Driven by the Anime.js core animation engine, using compound keyframes to animate scales, translations, and opacities smoothly for organic-feeling motion.

Grid Coordinate Staggering

Calculates distance offsets dynamically from the clicked dot to all other dots in the 2D grid, delaying animation start times proportionally to create a ripple wave effect.

Responsive Field Resizing

Monitors viewport boundary changes and updates grid size parameters dynamically in React state, maintaining proper alignment on high-density displays.

Anime.js

React Hooks

Stagger Grid

Responsive Layout

DotGrid.tsx (Dot Grid Ripple Core)

"use client";

import { animate, stagger } from "animejs";
import { useEffect, useState } from "react";
import { Box } from "@mantine/core";

const GRID_HEIGHT = 14;
const GRID_WIDTH = 20;
const EMPTY_STYLE: React.CSSProperties = {};

interface DotGridProps {
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

const DotGrid = ({ className = "", style = EMPTY_STYLE, children, ...props }: DotGridProps) => {
  const [dotFieldWidth, setDotFieldWidth] = useState(80);

  const animation = (dotIndex: string | number) => {
    animate(".dot-point", {
      scale: [
        { to: 1.35, ease: "outSine", duration: 250 },
        { to: 1, ease: "inOutQuad", duration: 500 },
      ],
      translateY: [
        { to: -15, ease: "outSine", duration: 250 },
        { to: 0, ease: "inOutQuad", duration: 500 },
      ],
      opacity: [
        { to: 1, ease: "outSine", duration: 250 },
        { to: 0.5, ease: "inOutQuad", duration: 500 },
      ],
      delay: stagger(100, {
        grid: [GRID_WIDTH, GRID_HEIGHT],
        from: typeof dotIndex === "string" ? parseInt(dotIndex) : dotIndex,
      }),
    });
  };

  useEffect(() => {
    if (typeof window === "undefined") return;
    // eslint-disable-next-line react-hooks-extra/set-state-in-effect
    setDotFieldWidth(window.innerWidth / GRID_WIDTH);
    const startAnimation = () => {
      animation(260);
    };

    startAnimation();

    const resizeDotField = () => {
      const newSize = window.innerWidth / GRID_WIDTH;
      setDotFieldWidth(newSize > 40 ? window.innerWidth / GRID_WIDTH : 40);
    };

    window.addEventListener("resize", resizeDotField, true);

    return () => {
      window.removeEventListener("resize", resizeDotField);
    };
  }, []);

  const dots = [];
  let index = 0;

  for (let i = 0; i < GRID_WIDTH; i++) {
    for (let j = 0; j < GRID_HEIGHT; j++) {
      const dotKey = `column-${i}-row-${j}`;
      dots.push(
        <div className="dot" data-index={index} key={dotKey}>
          <div
            className="dot-point grid-circle"
            id={`dot-${index}`}
            data-index={index}
            role="button"
            tabIndex={0}
            onClick={(e) => {
              const target = e.target as HTMLDivElement;
              const dotIndex = target.dataset.index;
              if (dotIndex) {
                animation(dotIndex);
              }
            }}
            onKeyDown={(e) => {
              if (e.key !== "Enter" && e.key !== " ") {
                return;
              }

              e.preventDefault();
              const target = e.target as HTMLDivElement;
              const dotIndex = target.dataset.index;
              if (dotIndex) {
                animation(dotIndex);
              }
            }}
          />
        </div>,
      );
      index++;
    }
  }

  return (
    <Box className={`d-flex justify-content-center ${className}`} style={style} {...props}>
      <div
        className="grid-rows"
        style={{
          gridTemplateColumns: `repeat(${GRID_WIDTH}, ${dotFieldWidth}px)`,
        }}
      >
        {dots.map((dot) => dot)}
      </div>
      {children}
    </Box>
  );
};

export default DotGrid;