GlassSurface

Superficie de cristal estilo Apple con distorsión en tiempo real.

Código: RODD·CP·024
Familia: Componentes
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/GlassSurface-TS-TW

Cuándo usarlo

Sustituyen a un componente estándar cuando la experiencia es parte del producto.

Props para personalizarlo

Prop	Tipo	Por defecto
children	React.ReactNode	undefined
width	number \| string	200
height	number \| string	80
borderRadius	number	20
borderWidth	number	0.07
brightness	number	50
opacity	number	0.93
blur	number	11
displace	number	0
backgroundOpacity	number	0
saturation	number	1
distortionScale	number	-180
redOffset	number	0
greenOffset	number	10
blueOffset	number	20
xChannel	'R' \| 'G' \| 'B'	'R'
yChannel	'R' \| 'G' \| 'B'	'G'
mixBlendMode	BlendMode	'difference'
className	string	''
style	React.CSSProperties	{}

Otros efectos de componentes

MagicBento — Bento grid con partículas, foco de luz y borde brillante.
MediaBetweenText — Una imagen o vídeo que se abre entre dos palabras.
PillNav — Navegación en píldora con resaltado deslizante.
ScrollStack — Tarjetas que se apilan con profundidad al hacer scroll.
Stepper — Asistente de pasos con transiciones animadas.
AnimatedList — Lista que aparece elemento a elemento, como notificaciones.