Floating 3D Card

The Floating3DCard bridges the gap between traditional UI design and advanced WebGL experiences. Utilizing React Three Fiber, it renders a high-performance 3D scene directly inside a standard DOM layout with 5 unique geometry variants.

Live Preview

Installation

Variants

| Variant | Geometry | Material | Best For | |---|---|---|---| | crystal | Wireframe Icosahedron + Glass Core | Physical + Clearcoat | SaaS, Developer tools | | nebula | Distorted Sphere | MeshDistort | AI/ML, Creative platforms | | prism | Glass Octahedron + Orbital Ring | Physical Transmission | Analytics, Data products | | plasma | Organic Blob | Distort + Emissive | Gaming, Entertainment | | ring | Torus Knot | Physical Metallic | Fintech, Luxury brands |

How it works

This component encapsulates a Canvas from React Three Fiber. Inside the Canvas, it renders one of five geometry variants, each with its own Scene sub-component. During each frame, useFrame reads state.pointer (normalized mouse position) and smoothly interpolates the 3D object's rotation to follow the cursor. The Float helper from drei adds organic hovering motion. Environment provides realistic image-based lighting and ContactShadows grounds the object in the card.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { Floating3DCard } from "@/components/creative/floating-3d-card";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Floating3DCard } from "@/components/creative/floating-3d-card";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <Floating3DCard
      >
        <div>Content goes here</div>
      </Floating3DCard>
    </div>
  );
}