Dimensional Field

An animated dark WebGL background with drifting glass spheres and a flowing noise gradient, rendered inside a sandboxed iframe hero section, for landing pages that need an immersive dimensional/architecture themed backdrop.

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

import DimensionalField from "@/components/ui/dimensional-field";

export default function DimensionalFieldDemo() {
  return (
    <div className="relative h-[600px] w-full overflow-hidden rounded-xl border border-border bg-background">
      <DimensionalField className="h-full w-full" />
    </div>
  );
}