Warp background

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

const DEPTH = 640; // px each wall reaches into the screen (h-160 / w-160)
const BEAM = 110; // streak length in px
const LANES = [-140, -60, 20, 100]; // px from each wall's center line
const GRID =
  'bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-size-[40px_40px]';

// Each wall is a box edge turned 90° into the screen. `run` slides a streak
// from the far end to the near edge; `fade` keeps its bright head in front.
const WALLS = [
  {
    place: 'inset-x-0 top-0 h-160 origin-top -rotate-x-90',
    run: { y: [DEPTH, -BEAM] },
    fade: 'bg-linear-to-b'
  },
  {
    place: 'inset-x-0 bottom-0 h-160 origin-bottom rotate-x-90',
    run: { y: [-BEAM, DEPTH] },
    fade: 'bg-linear-to-t'
  },
  {
    place: 'inset-y-0 left-0 w-160 origin-left rotate-y-90',
    run: { x: [DEPTH, -BEAM] },
    fade: 'bg-linear-to-r'
  },
  {
    place: 'inset-y-0 right-0 w-160 origin-right -rotate-y-90',
    run: { x: [-BEAM, DEPTH] },
    fade: 'bg-linear-to-l'
  }
];

export function WarpBackground({ children }: { children: ReactNode }) {
  const reduceMotion = useReducedMotion();

  return (
    <div className='relative grid h-96 place-items-center overflow-hidden'>
      <div aria-hidden className='absolute inset-0 perspective-[220px]'>
        {WALLS.map((wall) => (
          <div
            key={wall.place}
            className={`absolute overflow-hidden ${GRID} ${wall.place}`}
          >
            {!reduceMotion &&
              LANES.map((lane, i) => (
                <motion.span
                  key={lane}
                  animate={wall.run}
                  transition={{
                    duration: 2.4 + i * 0.6,
                    delay: -i * 0.9,
                    repeat: Infinity,
                    ease: 'linear'
                  }}
                  className={`absolute top-0 left-0 rounded-full ${wall.fade} from-sky-400 to-transparent`}
                  style={
                    'x' in wall.run
                      ? { top: `calc(50% + ${lane}px)`, width: BEAM, height: 3 }
                      : {
                          left: `calc(50% + ${lane}px)`,
                          width: 3,
                          height: BEAM
                        }
                  }
                />
              ))}
          </div>
        ))}
      </div>
      {/* Fade the far end of the tunnel into the background. */}
      <div
        aria-hidden
        className='absolute inset-0 bg-radial from-background from-30% to-transparent to-60%'
      />
      <div className='relative'>{children}</div>
    </div>
  );
}