Project Card 3D

From faxas-portfolio-app · src/components/exploration/project-card-3d/ProjectCard3D.tsx

Live

Preview runs the converted copy this catalog installs (v2.0.0), mounted with authored demo content.

Install

npx shadcn@latest add https://praxis.faxas.net/r/project-card-3d.json

Adds the registered component, its registry metadata, and declared package dependencies. shadcn CLI required.

Variants

Props

NameTypeDefault
project
CardProjectData
—
variant
'rainbow-top' | 'glass-left' | 'full-bleed'
rainbow-top
className
string
—
iterationLabel
string
—
width
number
360
height
number
450
imageRatio
number
0.52
borderRadius
number
24
imagePosition
'top' | 'left' | 'full-bleed'
top
glassBg
string
rgba(15, 15, 30, 0.72)
glassBlur
number
22
borderColor
string
rgba(255,255,255,0.14)
borderWidth
number
1.5
rainbowBorder
boolean
false
perspective
number
1100
maxRotation
number
12
maxZ
number
32
hoverScale
number
1.025
rotationSpring
{ damping: number; stiffness: number }
—
parallaxOffset
number
12
glowType
'radial' | 'none'
radial
glowColor
string
rgba(200,180,255,0.24)
glowBlur
number
28
glowMaxOpacity
number
0.85
shadowBase
string
0 18px 55px rgba(0,0,0,0.32)
shadowHover
string
0 26px 85px rgba(102,126,234,0.34)
titleFont
string
var(--font-dm-sans), sans-serif
titleWeight
number
700
titleSize
string
1.35rem
titleColor
string
#e2e8f0
titleGradient
boolean
false
tagSize
string
0.72rem
tagBg
string
rgba(255,255,255,0.08)
tagColor
string
#cbd5e1
tagBorder
string
1px solid rgba(255,255,255,0.12)
descriptionSize
string
0.88rem
descriptionColor
string
#94a3b8
imageOverlay
string
linear-gradient(180deg, transparent 25%, rgba(15,15,30,0.24))
imageRadius
number
0
particleCount
number
0
shineSweep
boolean
true
gradientShift
boolean
true
tagsSlideUp
boolean
false
index
number
0
glassmorphism
boolean
false
spotlightEnabled
boolean
true
spotlightPosition
'center' | 'left' | 'right' | 'top'
center
tiltStrength
number
12
scaleOnHover
number
1.025
showParticles
boolean
false