3D Event Badge
Overview
An interactive 3D event badge rendered with Three.js and React Three Fiber.
This media component is intended for interfaces that need an interactive 3D event badge rendered with Three.js and React Three Fiber, landing pages, and portfolio pages. Its implementation is provided as editable source so the final behavior and styling stay inside your project.
Technologies
Detected package dependencies: three, @react-three/fiber, @react-three/drei, @react-three/rapier, meshline, leva.
Usage
The live preview and its Code tab above are the working example for this component. Copy the example after installation, then provide the required values from its TypeScript signature.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
type | "dynamic" | "fixed" | "kinematicPosition" | Yes | Value accepted by the type property in the exported source type. |
canSleep | boolean | Yes | Value accepted by the canSleep property in the exported source type. |
colliders | "ball" | "cuboid" | "hull" | "trimesh" | false | Yes | Value accepted by the colliders property in the exported source type. |
angularDamping | number | Yes | Value accepted by the angularDamping property in the exported source type. |
linearDamping | number | Yes | Value accepted by the linearDamping property in the exported source type. |
Use cases
- interfaces that need an interactive 3D event badge rendered with Three.js and React Three Fiber
- landing pages
- portfolio pages
Features
- Copy-paste source that remains in your repository
- TypeScript source included with the component
- Tailwind CSS classes editable in the component source
Accessibility
- Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.
Customization
- Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
- Edit the copied source directly for visual or structural changes.
Related components
Topic guides
See how this component fits into broader interface patterns, implementation decisions, and working examples.
3D Event Badge FAQ
Is 3D Event Badge free to use in commercial projects?
Yes. The public 3D Event Badge source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.
How do I install 3D Event Badge?
Run npx shadcn@latest add @spectrumui/event-badge-3d. The page also exposes the source for manual installation.
Does 3D Event Badge require Motion?
No Motion dependency was detected in the documented source or registry entry for 3D Event Badge.
Does 3D Event Badge use shadcn/ui or Radix UI?
No shadcn/ui or Radix UI dependency was detected in the documented 3D Event Badge source.
Can I use 3D Event Badge in Next.js?
The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.
What accessibility checks should I run for 3D Event Badge?
No component-specific accessibility mechanism was detected automatically. Test keyboard operation, focus, labels, contrast, and screen-reader output before shipping.