¿Qué es page-transitions?
Úselo al implementar cambios de ruta, ver transiciones, aperturas/cierres modales o animaciones de navegación en aplicaciones web y móviles. Fuente: dylantarre/animation-principles.
·page-transitions
*
page-transitions
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesFuente: dylantarre/animation-principles
Úselo al implementar cambios de ruta, ver transiciones, aperturas/cierres modales o animaciones de navegación en aplicaciones web y móviles.
Instalación
Cómo instalar page-transitions
Instala rápidamente el skill de IA page-transitions en tu entorno de desarrollo mediante línea de comandos
- Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
- Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions
- Verificar instalación: Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
Fuente: dylantarre/animation-principles.
SKILL.md
Ver originalApply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
| Squash & Stretch | Entering page elastic effect | | Anticipation | Exit animation before enter | | Staging | Hero elements bridge views | | Straight Ahead / Pose to Pose | Shared element vs crossfade | | Follow Through / Overlapping | Content settles after nav | | Slow In / Slow Out | Asymmetric enter/exit easing | | Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes | | Timing | 200-500ms total transition | | Exaggeration | Reserved for emphasis moments | | Solid Drawing | Consistent spatial model | | Appeal | Smooth, oriented navigation |
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions- Categoría
- *Creatividad
- Verificado
- ✓
- Primera vez visto
- 2026-03-03
- Actualizado
- 2026-03-10
Respuestas rápidas
¿Cómo instalo page-transitions?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code, Cursor u OpenClaw
¿Dónde está el repositorio de origen?
https://github.com/dylantarre/animation-principles
Detalles
- Categoría
- *Creatividad
- Fuente
- skills.sh
- Primera vez visto
- 2026-03-03