Biblioteca de Prompts Visuales
Domina las animaciones de entrada más profesionales. Copia el código exacto y mira cómo cobran vida en tiempo real.
Fade In
El elemento aparece pasando de invisible a visible (opacidad).
<motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 0.8 }} />Fade In Up
Aparece con un desplazamiento suave desde abajo. Es el más usado en landing pages.
<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} />Slide In Right
Entra deslizándose desde fuera de la pantalla (derecha).
<motion.div initial={{ x: '100%' }} whileInView={{ x: 0 }} transition={{ type: 'spring', damping: 20 }} />Scale In / Pop In
Crece desde pequeño hasta su tamaño normal. Da sensación de 'pop'.
<motion.div initial={{ scale: 0.8, opacity: 0 }} whileInView={{ scale: 1, opacity: 1 }} transition={{ type: 'spring' }} />Blur Fade
Aparece desenfocado y se va enfocando poco a poco. Se ve muy premium.
<motion.div initial={{ filter: 'blur(10px)', opacity: 0 }} whileInView={{ filter: 'blur(0px)', opacity: 1 }} transition={{ duration: 0.8 }} />Bounce In
Entra rebotando ligeramente al final. Toque juguetón.
<motion.div initial={{ scale: 0.3, opacity: 0 }} whileInView={{ scale: 1, opacity: 1 }} transition={{ type: 'spring', stiffness: 260, damping: 20 }} />Flip In (Y)
Aparece girando sobre su propio eje como una carta.
<motion.div initial={{ rotateY: 90, opacity: 0 }} whileInView={{ rotateY: 0, opacity: 1 }} transition={{ duration: 0.8 }} />Rotate In
Entra rotando desde un ángulo hasta quedar derecho.
<motion.div initial={{ rotate: -15, opacity: 0, scale: 0.9 }} whileInView={{ rotate: 0, opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} />Stagger Children
Una lista de elementos aparece uno tras otro con un pequeño retraso.
<motion.div variants={{ visible: { transition: { staggerChildren: 0.1 } } }} />Clip Path Reveal
El elemento se 'destapa' con una máscara que se corre lateralmente.
<motion.div initial={{ clipPath: 'inset(0 100% 0 0)' }} whileInView={{ clipPath: 'inset(0 0% 0 0)' }} transition={{ duration: 1 }} />Spring Entrance
Entra con física de resorte (rebote natural, no lineal). El estándar actual.
<motion.div initial={{ y: -50, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} transition={{ type: 'spring', stiffness: 100, damping: 10 }} />Letter Reveal
El texto aparece letra por letra de forma escalonada.
text.split('').map((char, i) => <motion.span key={i} variants={charVariants} />)¿Necesitas un efecto a medida?
Nuestra biblioteca se actualiza constantemente. Si buscas algo específico para tu proyecto, pregúntanos directamente.