Kinetic Particle Fabric

Heroes 113

About

An immersive 3D physics fabric simulation featuring interactive mesh deformations, gravitational shockwave pulses, fluid wave oscillations, and full light/dark mode compatibility.

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

Code

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

Usage.tsx

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

import { KineticFabric } from "@/components/ui/kinetic-particle-fabric";

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  return (
    <div className="flex h-screen w-screen items-center justify-center bg-neutral-100 p-6 dark:bg-neutral-950">
      {/* Constrained Centered Card Container */}
      <div className="relative h-[600px] w-full max-w-5xl overflow-hidden rounded-3xl border border-neutral-300 shadow-2xl dark:border-neutral-800">
        <KineticFabric className="h-full w-full rounded-3xl" />
      </div>
    </div>
  );
}