FloatingCard3D
A flat card floating in 3D space that tilts toward the cursor with spring smoothing. The surface uses --background with --border edges. Overlay real H
A flat card floating in 3D space that tilts toward the cursor with spring smoothing. The surface uses --background with --border edges. Overlay real HTML via drei <Html>.
Customize
Tilt15°
Environment
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tiltStrength | number | 15 | Max tilt in degrees. |
children | ReactNode | — | HTML overlaid on the card via drei <Html>. |
className | string | — | Classes for the wrapper element (set its height here). |
theme | "auto" | "light" | "dark" | "auto" | Color source. auto reads the live shadcn theme. |
tiltStrengthnumberMax tilt in degrees.
Default
15childrenReactNodeHTML overlaid on the card via drei <Html>.
Default
—classNamestringClasses for the wrapper element (set its height here).
Default
—theme"auto" | "light" | "dark"Color source. auto reads the live shadcn theme.
Default
"auto"