Rotating Planes Animation

This code implements a self-contained React component that renders a 3D animation of rotating planes. It uses inline styles, CSS variables, and keyframes defined within the component itself for a clean and independent implementation. The animation is achieved without external libraries beyond React and leverages Tailwind CSS for styling.

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

import RotatingPlanes from "@/components/ui/rotating-planes-animation";

export default function DemoOne() {
  const animationKeyframes = `
    @keyframes spin-3d {
      from {
        transform: perspective(1000px) rotateX(0deg);
      }
      to {
        transform: perspective(1000px) rotateX(360deg);
      }
    }
  `;
  
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#854775]">
      <style>{animationKeyframes}</style>
      <RotatingPlanes />
    </div>
  );
}