Spotlight Follow
Spotlight Follow é um componente de fundo para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.
Motion Primitives
MIT
backgrounds
O que é
Spotlight Follow é um componente de fundo para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.
Como usar
Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.
Cinco cópias grátis por mês. Sem cartão.
Não precisa de pacotes além do que o projeto já tem
Licença
Este componente vem de Motion Primitives e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.
Spotlight Follow
import { Spotlight } from '@/components/core/spotlight';
export function SpotlightBasic() {
return (
<div className='relative aspect-video h-[200px] rounded-sm border border-zinc-100 bg-white dark:border-zinc-800 dark:bg-black'>
<Spotlight
className='bg-zinc-700 blur-2xl'
size={64}
springOptions={{
bounce: 0.3,
duration: 0.1,
}}
/>
<div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-sm bg-white p-2 dark:bg-black'>
<svg
role='img'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 70 70'
aria-label='MP Logo'
width='70'
height='70'
className='h-8 w-auto stroke-black dark:stroke-white'
fill='none'
>
<path
stroke='currentColor'
strokeLinecap='round'
strokeWidth='3'
d='M51.883 26.495c-7.277-4.124-18.08-7.004-26.519-7.425-2.357-.118-4.407-.244-6.364 1.06M59.642 51c-10.47-7.25-26.594-13.426-39.514-15.664-3.61-.625-6.744-1.202-9.991.263'
></path>
</svg>
</div>
</div>
);
}