Chess Grid Transition

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3'use client'
4 
5import { TransitionRouter } from 'next-transition-router'
6import React, { useEffect, useRef, useState, type ReactNode } from 'react'
7import gsap from 'gsap'
8 
9function prefersReducedMotion() {
10  if (typeof window === 'undefined') return false
11  return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
12}
13 
14const DEFAULT_GRID_SIZE = 8
15const DEFAULT_COLOR = '#ff5f00'
16 
17function clampNumber(value: number | undefined, min: number, max: number, fallback: number): number {
18  const next = Number(value)
19  if (!Number.isFinite(next)) return fallback
20  return Math.min(max, Math.max(min, next))
21}
22 
23interface ChessGridTransitionProps {
24  children?: ReactNode
25  duration?: number
26  gridSize?: number
27  color?: string
28}
29 
30export default function ChessGridTransition({
31  children,
32  duration = 1,
33  gridSize = DEFAULT_GRID_SIZE,
34  color = DEFAULT_COLOR,
35}: ChessGridTransitionProps) {
36  const wrapperRef = useRef<HTMLDivElement | null>(null)
37  const gridRef = useRef<HTMLDivElement | null>(null)
38 
39  const [mounted, setMounted] = useState(false)
40  const [isMobile, setIsMobile] = useState(false)
41  const [isTablet, setIsTablet] = useState(false)
42 
43  const safeDuration = clampNumber(duration, 0.25, 3, 1)
44  const cols = Math.round(clampNumber(gridSize, 4, 16, DEFAULT_GRID_SIZE))
45  const desktopRows = Math.max(2, Math.round(cols * 0.5))
46  const mobileRows = Math.max(4, Math.round(cols * 1.125))
47  const tabletRows = Math.max(4, Math.round(cols * 1.25))
48  const overlap = 2
49 
50  useEffect(() => {
51    const updateViewport = () => {
52      const width = window.innerWidth
53      setIsMobile(width <= 639)
54      setIsTablet(width > 639 && width <= 1025)
55    }
56 
57    updateViewport()
58    window.addEventListener('resize', updateViewport)
59    return () => window.removeEventListener('resize', updateViewport)
60  }, [])
61 
62  const rows = isMobile ? mobileRows : isTablet ? tabletRows : desktopRows
63 
64  const getRowCells = (cells: HTMLCollection, rowIndex: number) => {
65    const rowCells = []
66    for (let col = 0; col < cols; col++) {
67      rowCells.push(cells[rowIndex * cols + col])
68    }
69    return rowCells
70  }
71 
72  const buildAnimation = (tl: gsap.core.Timeline, cells: HTMLCollection, direction = 1) => {
73    const rowsArr = Array.from({ length: rows }, (_, i) => i)
74 
75    rowsArr.forEach((rowIndex, rowOrderIndex) => {
76      const rowCells = getRowCells(cells, rowIndex)
77 
78      rowCells.forEach((cell, colIndex) => {
79// … truncated