Docs
3D event badge

3D event badge

Displays a beautiful 3D event badge with React Three Fiber.

Docs

Inspired by Vercel React Three Fiber, this 3D Badge component leverages the power of React Three Fiber to create an interactive and visually stunning badge. Perfect for events, profiles, or any application that can benefit from a unique 3D element.

Installation

Install the following dependencies:

npm install three meshline @react-three/rapier @react-three/drei @react-three/fiber

Copy and paste the Event Calendar code into your project.

Download 3D Card model.

Click here to download the 3D Card model

API Reference

Props

PropTypeDescription
maxSpeednumber50
minSpeednumber10
classNamestring""
width`stringnumber`
height`stringnumber`

Usage

export default function Demo() {
  return (
    <LanyardCard
      className="rounded-lg shadow-xl"
      height="80vh"
      backgroundColor="bg-gray-900"
    />
  )
}
KeyboardAvatar List