Loading video...

Video Failed to Load

Go Home

¡Añade animaciones a tu web super fácil! Tailwind Animated es un plugin que tiene: - Decenas de transiciones para tus elementos - Un playground para ver y configurarlas - Animaciones de copiar y pegar - Configura duración y delay en segundos ➡️

midudev's profile picture

Miguel Ángel Durán

332,889 subscribers

86,102 views • 3 years ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

¡Añade animaciones CSS increíbles para tu web! Esta página tiene transiciones de copiar y pegar: → transition․style
0:10

¡Añade animaciones CSS increíbles para tu web! Esta página tiene transiciones de copiar y pegar: → transition․style

Miguel Ángel Durán

50,022 views • 1 year ago

¿Quieres añadir animaciones en tu página web? Pues tienes que conocer Animista, un generador online de animaciones CSS para facilitarte la vida. 👌 Puedes ver cómo quedan, configurarlas a tu gusto y luego copiar el código para añadirlas a tu web. ⭐ ➡️
0:19

¿Quieres añadir animaciones en tu página web? Pues tienes que conocer Animista, un generador online de animaciones CSS para facilitarte la vida. 👌 Puedes ver cómo quedan, configurarlas a tu gusto y luego copiar el código para añadirlas a tu web. ⭐ ➡️

Miguel Ángel Durán

211,317 views • 3 years ago

¡He creado un plugin de animaciones para Tailwind! ✓ +70 transiciones listas para usar ✓ Personaliza la animación con clases ✓ Anima elementos a través del scroll ✓ Puro CSS, rendimiento top $ npm install tailwind-animations
0:17

¡He creado un plugin de animaciones para Tailwind! ✓ +70 transiciones listas para usar ✓ Personaliza la animación con clases ✓ Anima elementos a través del scroll ✓ Puro CSS, rendimiento top $ npm install tailwind-animations

Miguel Ángel Durán

42,525 views • 7 months ago

Si necesitas animaciones CSS... ¡este recurso es para ti! Tiene más de 100 disponibles y son de copiar y pegar. 🔗
0:13

Si necesitas animaciones CSS... ¡este recurso es para ti! Tiene más de 100 disponibles y son de copiar y pegar. 🔗

Miguel Ángel Durán

109,848 views • 3 years ago

¡Esta librería para React es una maravilla! Sube el nivel de las animaciones de tu web o app. Se llama Amicro y es de código abierto, tiene: Loaders, efectos hover, botones y transiciones. →
0:13

¡Esta librería para React es una maravilla! Sube el nivel de las animaciones de tu web o app. Se llama Amicro y es de código abierto, tiene: Loaders, efectos hover, botones y transiciones. →

Miguel Ángel Durán

58,271 views • 29 days ago

¡Tremenda colección de botones para mejorar tu web! De copiar y pegar, sin JavaScript y con Tailwind CSS →
0:16

¡Tremenda colección de botones para mejorar tu web! De copiar y pegar, sin JavaScript y con Tailwind CSS →

Miguel Ángel Durán

49,324 views • 2 years ago

🐱 ¡Animaciones y gatetes! Cattocss es una biblioteca de animaciones CSS donde puedes copiar directamente el código a tu proyecto web. 👉 👈
0:13

🐱 ¡Animaciones y gatetes! Cattocss es una biblioteca de animaciones CSS donde puedes copiar directamente el código a tu proyecto web. 👉 👈

Carmen Ansio

83,672 views • 3 years ago

¡Brutal biblioteca de gráficas para tu web! Personalizables, vistosas y fáciles de usar ✓ Componentes de copiar y pegar ✓ React + Tailwind →
0:15

¡Brutal biblioteca de gráficas para tu web! Personalizables, vistosas y fáciles de usar ✓ Componentes de copiar y pegar ✓ React + Tailwind →

Miguel Ángel Durán

40,650 views • 3 months ago

¡Hermosa colección de componentes! Desarrollado con React y Tailwind. Listo para copiar, pegar y subir el nivel de tu web:
0:13

¡Hermosa colección de componentes! Desarrollado con React y Tailwind. Listo para copiar, pegar y subir el nivel de tu web:

Miguel Ángel Durán

79,543 views • 2 years ago

¡Nuevo componente de React interesante! Se llama Hiraki y es un drawer para tu web. ✓ 4 direcciones, gestos con inercia y snap points ✓ Accesible y animaciones CSS ✓ 0 dependencias →
0:14

¡Nuevo componente de React interesante! Se llama Hiraki y es un drawer para tu web. ✓ 4 direcciones, gestos con inercia y snap points ✓ Accesible y animaciones CSS ✓ 0 dependencias →

Miguel Ángel Durán

44,045 views • 1 month ago

¡Los mejores botones de modo oscuro para tu web! Para HTML/CSS y React. De copiar y pegar: →
0:15

¡Los mejores botones de modo oscuro para tu web! Para HTML/CSS y React. De copiar y pegar: →

Miguel Ángel Durán

25,414 views • 1 year ago

¡Qué joya de herramienta para devs y diseñadores! Genera una paleta de colores super fácil en segundos. Exporta para CSS, Figma y Tailwind →
0:12

¡Qué joya de herramienta para devs y diseñadores! Genera una paleta de colores super fácil en segundos. Exporta para CSS, Figma y Tailwind →

Miguel Ángel Durán

75,242 views • 11 months ago

¡Esta es una de las mejores bibliotecas de animaciones! Anima CSS, SVGs y elementos del DOM súper fácil. Una joyita para devs frontend > npm install animejs
0:16

¡Esta es una de las mejores bibliotecas de animaciones! Anima CSS, SVGs y elementos del DOM súper fácil. Una joyita para devs frontend > npm install animejs

Miguel Ángel Durán

60,034 views • 1 year ago

Hoy hemos desarrollado la web de La Velada del Año. ¡La hicimos desde cero y en directo con +10.000 espectadores! Hemos usado: - Tailwind Animated para las animaciones - Astro como framework - Despliegue en Netlify - clip-path para encajar el hover en cada silueta - JavaScript para la magia ¿Qué te parece cómo ha quedado?
0:17

Hoy hemos desarrollado la web de La Velada del Año. ¡La hicimos desde cero y en directo con +10.000 espectadores! Hemos usado: - Tailwind Animated para las animaciones - Astro como framework - Despliegue en Netlify - clip-path para encajar el hover en cada silueta - JavaScript para la magia ¿Qué te parece cómo ha quedado?

Miguel Ángel Durán

186,792 views • 3 years ago

Brutal herramienta para Programadores Web y SEO. Comprueba si tu web es visible para Google y la IA. ✓ Revisa contra todos los crawlers conocidos ✓ Te da un informe detallado en segundos Perfecto para evitarte sorpresas: →
0:17

Brutal herramienta para Programadores Web y SEO. Comprueba si tu web es visible para Google y la IA. ✓ Revisa contra todos los crawlers conocidos ✓ Te da un informe detallado en segundos Perfecto para evitarte sorpresas: →

Miguel Ángel Durán

35,819 views • 11 months ago

Dice el señor Reverte que es muy fácil para un tonto sentirse importante en las Redes Sociales. Y lo dice alguien que hace uso de las RRSS y que tiene muchos seguidores. A ver si está hablando de él mismo, pregunto.
0:12

Dice el señor Reverte que es muy fácil para un tonto sentirse importante en las Redes Sociales. Y lo dice alguien que hace uso de las RRSS y que tiene muchos seguidores. A ver si está hablando de él mismo, pregunto.

Esteban Navarro Soriano

58,340 views • 1 year ago

Si usas mucho IA para programar y quieres que no solo escriba código, sino que suba tus proyectos a producción, cree pull requests, controle el navegador, gestione tu base de datos y exponga tu localhost a internet… Entonces necesitas conocer estas CLIs para tu IA👇 🔹 GitHub CLI (gh) → Crea repos, pull requests e issues sin abrir el navegador. Terminas tu feature y en segundos tu PR está creado y listo para revisión. Combínalo con un agente de IA y tu flujo es imparable. 🔹 Supabase CLI → Levanta Supabase en local con Docker y en remoto, crea migraciones de base de datos, puede actualizar configuraciones, llenar datos de ejemplos, configurar tu RLS, subir los serverless functions, y mas 🔹 Playwright CLI → Tests end-to-end sin escribir casi nada. Tiene un modo que abre un navegador, graba todo lo que haces y genera el test por ti. Ideal para que tu agente de IA también verifique que la app funciona antes del deploy o simplemente compruebe el mismo su modificación. 🔹 AWS CLI → Sube archivos a S3, gestiona Lambdas, sincroniza tu build con un bucket. Deploy de un frontend estático en un solo comando, reconfigurar tus container, configura tu load balancer y basicamente crea toda tu arquitectura en producción 🔹 Railway CLI → Deploy moderno desde la terminal. Puedes correr migraciones en producción, ver logs en tiempo real y gestionar variables de entorno. Sin abrir dashboards, sin perder tiempo. 🔹 cloudflared / ngrok → Exponen tu localhost a internet con una URL pública. Perfectos para probar webhooks de Stripe, MercadoPago o mostrar una demo a un cliente sin hacer deploy. La clave no es aprenderlas todas de golpe. Empieza con GitHub CLI, agrega Railway cuando hagas tu primer deploy, y ten siempre a mano un tunnel para webhooks. Cuando dominas estas herramientas + IA, tu productividad cambia completamente. Video completo con ejemplos →
0:10

Si usas mucho IA para programar y quieres que no solo escriba código, sino que suba tus proyectos a producción, cree pull requests, controle el navegador, gestione tu base de datos y exponga tu localhost a internet… Entonces necesitas conocer estas CLIs para tu IA👇 🔹 GitHub CLI (gh) → Crea repos, pull requests e issues sin abrir el navegador. Terminas tu feature y en segundos tu PR está creado y listo para revisión. Combínalo con un agente de IA y tu flujo es imparable. 🔹 Supabase CLI → Levanta Supabase en local con Docker y en remoto, crea migraciones de base de datos, puede actualizar configuraciones, llenar datos de ejemplos, configurar tu RLS, subir los serverless functions, y mas 🔹 Playwright CLI → Tests end-to-end sin escribir casi nada. Tiene un modo que abre un navegador, graba todo lo que haces y genera el test por ti. Ideal para que tu agente de IA también verifique que la app funciona antes del deploy o simplemente compruebe el mismo su modificación. 🔹 AWS CLI → Sube archivos a S3, gestiona Lambdas, sincroniza tu build con un bucket. Deploy de un frontend estático en un solo comando, reconfigurar tus container, configura tu load balancer y basicamente crea toda tu arquitectura en producción 🔹 Railway CLI → Deploy moderno desde la terminal. Puedes correr migraciones en producción, ver logs en tiempo real y gestionar variables de entorno. Sin abrir dashboards, sin perder tiempo. 🔹 cloudflared / ngrok → Exponen tu localhost a internet con una URL pública. Perfectos para probar webhooks de Stripe, MercadoPago o mostrar una demo a un cliente sin hacer deploy. La clave no es aprenderlas todas de golpe. Empieza con GitHub CLI, agrega Railway cuando hagas tu primer deploy, y ten siempre a mano un tunnel para webhooks. Cuando dominas estas herramientas + IA, tu productividad cambia completamente. Video completo con ejemplos →

Fazt

33,021 views • 4 months ago

¡Añade un efecto parallax a cualquier imagen de tu página! Muy fácil de usar y personalizable al detalle Para JavaScript o componente de React: > npm install simple-parallax-js
0:14

¡Añade un efecto parallax a cualquier imagen de tu página! Muy fácil de usar y personalizable al detalle Para JavaScript o componente de React: > npm install simple-parallax-js

Miguel Ángel Durán

26,780 views • 4 months ago

Mientras Fable vivía aprovechamos para rediseñar por completo la landing de Lannis Cambiaron muchísimas cosas en estos meses y la web había quedado vieja. Fable es MUY bueno para hacer animaciones, tasks e ideas de diseño web. Esta fue la lógica detrás de cada parte:
0:13

Mientras Fable vivía aprovechamos para rediseñar por completo la landing de Lannis Cambiaron muchísimas cosas en estos meses y la web había quedado vieja. Fable es MUY bueno para hacer animaciones, tasks e ideas de diseño web. Esta fue la lógica detrás de cada parte:

Joaquín Paños

11,820 views • 2 months ago