MMridha UI

Floating 3D Showcase

A configurable Three.js scene featuring a floating geometric object that gently rotates and responds to mouse tilt. Designed as a hero visual or product showcase centerpiece. Includes ambient and point lighting for material depth.

ReactNext.jsClient ComponentReactThree.jsMotion

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/floating-3d-showcase

Registry endpoint: https://ui.mridha.net/r/floating-3d-showcase.json

Manual Installation

1. Install dependencies

pnpm add @react-three/fiber @react-three/drei three motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/floating-3d-showcase.tsx

3. Import the component

import { Floating3DShowcase } from "@/components/ui/floating-3d-showcase";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <Floating3DShowcase />
    </main>
  );
}

Dependencies

@react-three/fiber@react-three/dreithreemotion

Accessibility

  • The 3D canvas is decorative — aria-hidden='true' is applied.
  • A static image fallback should be provided when WebGL is unavailable.
  • Reduced motion replaces auto-rotation with a static display.

Performance

  • Scene is lazy-loaded using dynamic import with React.Suspense.
  • Auto-rotation uses delta time for frame-rate-independent movement.
  • Dispose all Three.js resources (geometry, material) on unmount.
  • WebGL context is shared where possible to avoid context limits.

Browser Limitations

  • Requires WebGL 2.0 for full material quality.
  • Some mobile browsers limit the number of active WebGL contexts.