Text Reveal Effect
Text Reveal Effect é um componente de texto para React e Tailwind CSS, da biblioteca Motion Primitives, com licença MIT. Copia e cola no teu projeto.
Motion Primitives
MIT
text
O que é
Text Reveal Effect é um componente de texto 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.
Text Reveal Effect
import { TextEffect } from '@/components/core/text-effect';
export function TextEffectWithCustomDelay() {
return (
<div className='flex flex-col space-y-0'>
<TextEffect
per='char'
delay={0.5}
variants={{
container: {
hidden: {
opacity: 0,
},
visible: {
opacity: 1,
transition: {
staggerChildren: 0.05,
},
},
},
item: {
hidden: {
opacity: 0,
rotateX: 90,
y: 10,
},
visible: {
opacity: 1,
rotateX: 0,
y: 0,
transition: {
duration: 0.2,
},
},
},
}}
>
Animate your ideas
</TextEffect>
<TextEffect per='char' delay={1.5}>
with motion-primitives
</TextEffect>
<TextEffect
per='char'
delay={2.5}
className='pt-12 text-xs'
preset='blur'
>
(and delay!)
</TextEffect>
</div>
);
}