Isometric Wave Grid Background

Heroes 349

About

"Retro-futuristic isometric wave grid with real-time mouse distortion physics and ambient breathing animation. Features canvas-based rendering with gradient fade effects, smooth bezier interpolation, and vignette depth overlay. Mouse-reactive repulsion field creates dynamic 3D-depth illusion with non-linear force falloff. Customizable color (RGB), speed multiplier, and grid density. Zero-dependency, single-file portable. Built for shadcn/ui with TypeScript type safety. Ideal for hero sections, sci-fi dashboards, and cyberpunk interfaces."

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Isometric Wave Grid Background to your project and fits it to your theme.

Code

How Isometric Wave Grid Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import IsoLevelWarp from "@/components/ui/isometric-wave-grid-background";

export default function HeroDemo() {
  return (
    <div className="relative w-full h-screen overflow-hidden font-sans">
      
      {/* BACKGROUND: The New Trend */}
      <IsoLevelWarp 
        // Cyber-Violet Color
        color="100, 50, 250" 
        density={50} 
        speed={1.5}
      />

      {/* CONTENT LAYER */}
      <div className="relative z-10 flex flex-col items-center justify-center h-full px-4 text-center">
        
        {/* Hero Text */}
        <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter text-white mb-6 drop-shadow-2xl">
          The Fabric of <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-b from-white to-muted">
            Digital Reality.
          </span>
        </h1>

      </div>
    </div>
  );
}