Horizon Grid

npm install motion

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type HorizonGridProps = {
  children?: ReactNode;
  /** Grid square size in pixels. */
  cell?: number;
  /** Tilt of the floor in degrees. Higher looks flatter. */
  angle?: number;
  /** Seconds for the grid to travel one square toward the viewer. */
  duration?: number;
  /** Line and horizon colour. */
  color?: string;
  className?: string;
};

export function HorizonGrid({
  children,
  cell = 40,
  angle = 70,
  duration = 1.2,
  color = "#2E9098",
  className = "",
}: HorizonGridProps) {
  const reduceMotion = useReducedMotion();

  return (
    <div className={`relative isolate overflow-hidden bg-[#0C1010] ${className}`}>
      <div aria-hidden className="absolute inset-x-0 bottom-0 -z-10 h-[45%] overflow-hidden [perspective-origin:50%_0%] [perspective:200px]">
        {/* the floor hinges on the bottom edge and tips away; moving the pattern by exactly one square loops seamlessly */}
        <motion.div
          className="absolute -inset-x-full bottom-0 h-[400%]"
          style={{
            rotateX: angle,
            originY: 1,
            backgroundImage: `linear-gradient(to right, ${color} 1px, transparent 1px), linear-gradient(to bottom, ${color} 1px, transparent 1px)`,
            backgroundSize: `${cell}px ${cell}px`,
            opacity: 0.55,
          }}
          animate={reduceMotion ? undefined : { backgroundPosition: ["0px 0px", `0px ${cell}px`] }}
          transition={{ duration, repeat: Infinity, ease: "linear" }}
        />
        {/* fade the far edge into the horizon */}
        <div className="absolute inset-0 bg-[linear-gradient(to_bottom,#0C1010,transparent_60%)]" />
      </div>
      {/* the horizon line and its glow */}
      <div
        aria-hidden
        className="absolute inset-x-0 top-[55%] -z-10 h-px"
        style={{ background: `linear-gradient(to right, transparent, ${color}, transparent)`, boxShadow: `0 0 40px 6px ${color}55` }}
      />
      {children}
    </div>
  );
}