Physics Badge

A highly interactive 3D physics badge component. You can drag the badge around and it realistically reacts to gravity and momentum!

Installation

Copynpx shadcn@latest add "http://localhost:3000/r/physics-badge.json"

Setup Assets

To make this component render correctly, you must place the required 3D .glb model and the texture .png inside your public directory:

1. Model: public/assets/3d/card.glb
2. Texture: public/assets/images/tag_texture.png

You can change these default paths via props when rendering the component:

Copyimport PhysicsBadge from "@/components/ui/physics-badge"
 
export default function Example() {
  return (
    <div className="h-[500px] w-full relative">
      <PhysicsBadge 
        modelUrl="/assets/3d/card.glb"
        textureUrl="/assets/images/tag_texture.png"
      />
    </div>
  )
}