Grainient

Degradado con grano fílmico y distorsión.

Código: RODD·BG·021
Familia: Fondos
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

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

Cuándo usarlo

Detrás de un hero o una sección de impacto. Uno por página y con el texto siempre legible encima.

Props para personalizarlo

Prop	Tipo	Por defecto
color1	string	'#FF9FFC'
color2	string	'#5227FF'
color3	string	'#B497CF'
timeSpeed	number	0.25
colorBalance	number	0.0
warpStrength	number	1.0
warpFrequency	number	5.0
warpSpeed	number	2.0
warpAmplitude	number	50.0
blendAngle	number	0.0
blendSoftness	number	0.05
rotationAmount	number	500.0
noiseScale	number	2.0
grainAmount	number	0.1
grainScale	number	2.0
grainAnimated	boolean	false
contrast	number	1.5
gamma	number	1.0
saturation	number	1.0
centerX	number	0.0
centerY	number	0.0
zoom	number	0.9
className	string	''

Otros efectos de fondos

Iridescence — Superficie iridiscente tipo nácar.
LightRays — Rayos de luz volumétricos.
Meteors — Lluvia de meteoros cruzando el fondo.
PhotonBeam — Estelas de luz que recorren el fondo.
Prism — Prisma de cristal con dispersión de color.
RippleGrid — Rejilla holográfica con ondas.