Components
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.
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>
);
}