Glass Surface

From CPR_website · components/GlassSurface.tsx

Live

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

Install

npx shadcn@latest add https://praxis.faxas.net/r/glass-surface.json

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

Props

NameTypeDefault
children
ReactNode
—
captureSelector
string
—
width
number | string
200
height
number | string
80
borderRadius
number | string
20
borderWidth
number
0.07
brightness
number
50
opacity
number
0.93
blur
number
11
displace
number
0
backgroundOpacity
number
0
saturation
number
1
backdropBlur
number
0
backdropBrightness
number
1
backdropContrast
number
1
distortionScale
number
-180
turbulenceFrequency
string
0.02 0.08
turbulenceStrength
number
0
turbulenceBlur
number
1
turbulenceSeed
number
7
redOffset
number
0
greenOffset
number
10
blueOffset
number
20
xChannel
'R' | 'G' | 'B'
R
yChannel
'R' | 'G' | 'B'
G
mixBlendMode
'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion'
difference
className
string
style
CSSProperties
—