Prismatic

Heroes

About

An interactive, Canvas-based React component that renders a shape-shifting 3D mesh background with physics-driven topologies (Torus, Sphere, Vortex) and responsive cursor interactions.

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

Code

How Prismatic is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Prismatic from "@/components/ui/prismatic-display";

export default function PrismaticDemo() {
  return (
    <div className="flex min-h-[600px] w-full items-center justify-center bg-neutral-100 p-4 md:p-8 transition-colors duration-300 dark:bg-neutral-950">
      <div className="h-[600px] w-full max-w-5xl overflow-hidden rounded-3xl border border-neutral-200 shadow-2xl dark:border-neutral-900">
        <Prismatic />
      </div>
    </div>
  );
}