Feat/spotlight

[yurigo]

Describe your changes

Inspirado en spotlight-new he creado el componente Spotlight.

Como se puede ver en la documentación y los commits el componente original utiliza motion. No obstante, una vez hecho el port y visto el funcionamiento, motion no es necesario. Se ha pasado de una animación vía js + motion a css animation.

Se han mantenido las mismas propiedades del componente original y añadido una nueva:

Prop	Type	Default	Description
gradientFirst	string	"radial-gradient(68.54% 68.72% at 55.02% 31.46%, oklch(82.97% 0.148864 181.7442 / .58) 0, oklch(100% 55% 181 / .02) 50%, oklch(45% 100% 181 / 0) 80%)"	First gradient color for the spotlight effect
gradientSecond	string	"radial-gradient(50% 50% at 50% 50%, oklch(82.97% 0.148864 181.7442 / .56) 0, oklch(100% 55% 181 / .02) 80%, transparent 100%)"	Second gradient color for the spotlight effect
gradientThird	string	"radial-gradient(50% 50% at 50% 50%, oklch(82.97% 0.148864 181.7442 / .24) 0, oklch(100% 45% 181 / .02) 80%, transparent 100%)"	Third gradient color for the spotlight effect
translateY	number	-350	Vertical translation offset in pixels
width	number	560	Width of the main spotlight element in pixels
height	number	1380	Height of the spotlight elements in pixels
smallWidth	number	240	Width of the smaller spotlight elements in pixels
duration	number	7	Animation duration in seconds
xOffset	number	100	Horizontal animation offset in pixels
fixed 🆕	boolean	false	Spotlight is fixed in the viewport

Include a screenshot/video where applicable

spotlight.mp4

Type of change

• New feature (non-breaking change which adds functionality)