proNew129 lines · framer-motion

Hero Grid Perspective

A grid floor that keeps moving toward the horizon. A centred hero over a CSS-only perspective grid floor that scrolls forward under a glowing horizon sun, built with a single rotated repeating-gradient plane — no canvas or WebGL.

Use it for: Launches, roadmaps and 'we're heading somewhere' pitches that want a retro-futurist sense of forward motion.
Themes: Light + dark
License: Commercial use

Live

Launch · Horizon

Build toward the horizon

A perspective grid that never stops moving forward — for roadmaps, launches and anything heading somewhere.

Start building →View roadmap

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Centred hero over a CSS-only perspective grid floor that scrolls toward the
 * viewer under a glowing horizon sun. No canvas or WebGL — just a rotated
 * repeating-gradient plane animated with framer-motion.
 */

export interface HeroGridPerspectiveProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A repeating linear-gradient grid is rotated 78° in 3D (CSS perspective + rotateX) to read as a floor receding toward a horizon line.
→framer-motion animates backgroundPositionY by exactly one grid cell on an infinite linear loop, so the floor appears to scroll forward seamlessly; speed scales the loop duration.
→A blurred radial 'sun' sits on the horizon with a thin gradient horizon line; both scale with glow and recolour with gridColor (signal/info/lime).
→prefers-reduced-motion removes the scroll animation entirely, leaving a static grid.

Accessibility

✓The grid, sun and horizon line are aria-hidden; only the eyebrow, heading, copy and two real <a> CTAs are exposed to assistive tech.
✓Headline is a single <h1>; CTAs keep the design system's visible focus ring.
✓No canvas/WebGL dependency; the whole effect is CSS transforms and gradients, so it renders anywhere CSS 3D transforms are supported.
✓Honours prefers-reduced-motion.