FloatingCard3D

threecn/floating-card-3d

FreeComponent

A parallax-tilting 3D card with a --background surface, --border edges, and an HTML overlay.

Install it

npx shadcn@latest add https://threecn.dev/r/floating-card-3d.json

Source

components/threecn/floating-card-3d.tsxthreecn.dev/r/floating-card-3d.json

1"use client"
2 
3import * as React from "react"
4import { useFrame, useThree } from "@react-three/fiber"
5import { Html, RoundedBox } from "@react-three/drei"
6import * as THREE from "three"
7 
8import {
9  SceneContainer,
10  type SceneContainerProps,
11} from "@/components/threecn/scene-container"
12import {
13  useShadcnTheme,
14  type ThemeMode,
15} from "@/components/hooks/use-shadcn-theme"
16 
17type CardProps = {
18  tiltStrength: number
19  theme: ThemeMode
20  children?: React.ReactNode
21}
22 
23function Card({ tiltStrength, theme, children }: CardProps) {
24  const groupRef = React.useRef<THREE.Group>(null)
25  const { bgColor, borderColor, primaryColor } = useShadcnTheme(theme)
26  const size = useThree((s) => s.size)
27  const maxTilt = THREE.MathUtils.degToRad(tiltStrength)
28 
29  useFrame((state) => {
30    const group = groupRef.current
31    if (!group) return
32    // pointer is normalized to [-1, 1]; spring toward the target tilt.
33    const targetY = state.pointer.x * maxTilt
34    const targetX = -state.pointer.y * maxTilt
35    group.rotation.y = THREE.MathUtils.lerp(group.rotation.y, targetY, 0.08)
36    group.rotation.x = THREE.MathUtils.lerp(group.rotation.x, targetX, 0.08)
37    group.position.y = Math.sin(state.clock.elapsedTime * 0.8) * 0.06
38  })
39 
40  const aspect = size.width / Math.max(size.height, 1)
41  const cardW = aspect > 1 ? 3.4 : 2.6
42  const cardH = 2.1
43 
44  return (
45    <group ref={groupRef}>
46      {/* border / backplate */}
47      <RoundedBox args={[cardW + 0.08, cardH + 0.08, 0.06]} radius={0.12} smoothness={5} position={[0, 0, -0.04]}>
48        <meshStandardMaterial color={borderColor} metalness={0.3} roughness={0.6} />
49      </RoundedBox>
50      {/* card surface */}
51      <RoundedBox args={[cardW, cardH, 0.08]} radius={0.1} smoothness={5}>
52        <meshStandardMaterial
53          color={bgColor}
54          emissive={primaryColor}
55          emissiveIntensity={0.04}
56          metalness={0.2}
57          roughness={0.45}
58        />
59      </RoundedBox>
60      {children ? (
61        <Html
62          transform
63          distanceFactor={2.6}
64          position={[0, 0, 0.06]}
65          className="pointer-events-none select-none"
66          style={{ width: `${cardW * 110}px` }}
67        >
68          {children}
69        </Html>
70      ) : null}
71    </group>
72  )
73}
74 
75export type FloatingCard3DProps = {
76  tiltStrength?: number
77  className?: string
78  theme?: ThemeMode
79  environment?: SceneContainerProps["environment"]
80  children?: React.ReactNode
81}
82 
83/**
84// … truncated

What it pulls in

npm packages

three
@react-three/fiber
@react-three/drei

Files it writes

components/threecn/floating-card-3d.tsx
components/threecn/scene-container.tsx
components/hooks/use-shadcn-theme.ts

More from threecn

All 28 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
AuroraRibbonsaurora-ribbons	threecn	Components	Free	3 deps · 3 files
Boidsboids	threecn	Components	Free	3 deps · 3 files
Clothcloth	threecn	Components	Free	3 deps · 3 files
Crystalcrystal	threecn	Components	Free	3 deps · 3 files
CubeWavecube-wave	threecn	Components	Free	3 deps · 3 files
CurlFlowcurl-flow	threecn	Components	Free	3 deps · 3 files
DnaHelixdna-helix	threecn	Components	Free	3 deps · 3 files
Globeglobe	threecn	Components	Free	3 deps · 3 files