Floating Shapes

3D floating geometric shapes with gentle rotation and bounce.

three3dshapesfloatingwebgl

Installation

Terminalbash

npx motioncraft add floating-shapes

floating-shapes.tsxtsx

import { FloatingShapes } from "@/components/three/floating-shapes";

<FloatingShapes className="h-96" />

Prop	Type	Default	Description
className	string	—	Additional CSS classes

Interactive 3D globe with connection arcs and glow effects.

Particle system that smoothly morphs between geometric shapes (sphere, cube, torus, spiral). Direction-aware coloring.

3D scene that rotates and scales based on page scroll progress. Wireframe icosahedron with direction-aware coloring.

Card with smooth 3D tilt and scale on hover with spring physics.