Generador de parámetros de animación de muelle
EstilosTodo se ejecuta en tu navegador: no se sube nada
Ajusta tres magnitudes físicas (masa, rigidez y amortiguación) más una velocidad inicial, y obtienes los parámetros `spring` de Framer Motion junto con una función de easing `linear()` de CSS muestreada en 60 puntos: lo más cerca que está hoy el CSS de un muelle. Un muelle y un par de duración más curva no dicen lo mismo. Una `cubic-bezier` tiene una sola forma fija, mientras que un muelle puede sobrepasar, no sobrepasar o avanzar despacio: tres sensaciones muy distintas, cuya «duración» ni siquiera es uno de los parámetros (un muelle se detiene cuando lo dice la física). ⚠️ El veredicto es la relación de amortiguación ζ = c / (2·√(m·k)): ζ < 1 es subamortiguado (sobrepasa), ζ = 1 es crítico y ζ > 1 es sobreamortiguado (no sobrepasa, pero vuelve más despacio). Ese número aparece en las notas de abajo. ⚠️ La integración es Euler semiimplícito con paso fijo (1/240 de segundo). Con mucha rigidez y poca masa, un método explícito diverge a `NaN`, y un `NaN` escrito en `linear()` invalida toda la declaración (en la página solo se ve que nada se mueve). Por eso los parámetros se acotan primero a un rango seguro, y en cuanto la integración se sale de él la herramienta da un error en lugar de emitir `NaN`. Un muelle con amortiguación cero oscila siempre y nunca se detiene, y eso también se informa.
Funciones
- Masa, rigidez, amortiguación y velocidad inicial ajustables
- Cinco preajustes oficiales: gentle, wobbly, stiff, slow y molasses
- Genera el código transition={{ type: "spring" }} de Framer Motion
- Muestrea la respuesta del muelle en 60 puntos y escribe un easing linear() de CSS
- Da también la duración del muestreo (el tiempo que tarda el muelle en detenerse solo)
- ⚠️ Informa la relación de amortiguación ζ, la frecuencia natural ω0 y si sobrepasa
- ⚠️ Integración de Euler semiimplícito con paso fijo, que da error en vez de emitir NaN
- El bloque de la vista previa no deja de rebotar, así que el sobrepaso se ve a simple vista
- Todo se ejecuta en tu navegador: no se sube nada
Cómo se usa
- Elige un preajuste o ajusta tú la masa, la rigidez, la amortiguación y la velocidad
- Mira abajo la relación de amortiguación y el veredicto de sobrepaso
- Copia el bloque de Framer Motion o el CSS con el easing linear()
- Observa el rebote del bloque en la vista previa para notar el sobrepaso
Preguntas frecuentes
- ¿Qué es la relación de amortiguación ζ y cómo decide si sobrepasa?
- `ζ = c / (2·√(m·k))`, donde c es la amortiguación, m la masa y k la rigidez. ζ < 1 es subamortiguado, así que el muelle pasa del objetivo y vuelve (sobrepaso); ζ = 1 es crítico, que justo evita el sobrepaso y vuelve lo más rápido; ζ > 1 es sobreamortiguado, sin sobrepaso pero con una vuelta más lenta. Depende solo de esos tres números, no de la velocidad inicial (la velocidad solo da forma al tramo inicial).
- ¿Por qué usar linear() en CSS?
- Porque, entre las funciones de easing de CSS, solo `linear()` fija el avance punto por punto, que es lo que permite expresar un sobrepaso: pasarse del objetivo y volver. Una `cubic-bezier` también puede salirse del 0 a 1 en su eje vertical, pero igualar de cerca la respuesta de un muelle es difícil. Muestrear el muelle en 60 puntos es lo más cerca que llega el CSS hoy. El precio es que tiene longitud fija, así que se indica junto a él el tiempo natural de asentamiento.
- ¿Por qué poner la amortiguación a cero da un error?
- Porque un muelle sin amortiguación nunca se detiene: oscila con la misma amplitud para siempre, así que no hay un momento de reposo ni una duración finita que muestrear. Tampoco debería existir esa animación en una interfaz real (el usuario se quedaría viéndola temblar). Sube un poco la amortiguación para que acabe deteniéndose.
- ¿Cómo uso estos parámetros en Framer Motion?
- Usa directamente la línea generada: `transition={{ type: "spring", mass: ..., stiffness: ..., damping: ..., velocity: ... }}`. El spring de Framer Motion es exactamente este modelo físico, y `velocity` es la velocidad al empezar la animación (habitual cuando algo sale lanzado por un arrastre). Los nombres de preajuste (gentle, wobbly, etc.) son los conjuntos oficiales; al elegir uno, los cuatro números de arriba no participan en el cálculo.
Herramientas relacionadas
Curva de Bézier
EstilosModela una curva de aceleración arrastrando dos puntos de control, mira cómo se mueve y copia cubic-bezier() con sus formas para transition y animation.
Plantilla de transition
EstilosElige propiedad, duración, aceleración y retardo, pruébalo pasando el cursor y copia el CSS. El código separa transition y :hover con claridad.
Plantilla de @keyframes
EstilosSiete animaciones listas (fundido, deslizar, rebote, latido, temblor, giro, flotar): ajusta duración y curva y copia el CSS con su prefers-reduced-motion.
Generador de degradados CSS
EstilosAjusta ángulo, colores y forma, mira la previa al momento y copia el CSS. Lineal, radial y cónico, con parada intermedia opcional.
Generador de border-radius
EstilosAjusta el radio de las cuatro esquinas, prévisualo al momento y copia el CSS. Con px, rem y porcentaje: en una caja no cuadrada el porcentaje da elipse.
Generador de glassmorphism
EstilosAjusta desenfoque, opacidad, saturación y borde, mira el vidrio esmerilado al momento y copia el CSS, con el prefijo -webkit- para iOS.