Geometric Sphere

A remixable, theme-aware hero composed of layered visuals: panning grid, volumetric haze, chromatic core glow, and a slow-rotating wireframe sphere. Supports mouse-driven parallax smoothing, accessible focusable CTAs, and CSS variables for easy theme overrides. Designed for integration as a homepage or showcase hero and to be simple to remix by changing the CONFIG constants or CSS variables.

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

import React from "react";
import SphereHero from "@/components/ui/geometric-sphere";

export default function App() {
  return (
    <div id="root-wrapper" className="app-root">
      <SphereHero />
    </div>
  );
}