'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Motion
Morph
Morphing de elemento compartido: dale a dos elementos el mismo id y, cuando uno reemplaza al otro, el nuevo crece desde el viejo, en posición, tamaño y esquinas, con su contenido apareciendo gradualmente. Una tarjeta se abre en su detalle, un botón se vuelve un panel. MorphIcon transforma un ícono en otro.
import { Morph, MorphIcon } from '@alea/motion';
Ejemplos
De tarjeta a detalle
Dos elementos Morph con el mismo id: presiona una tarjeta y crece hasta su detalle; Cerrar la encoge de vuelta a su lugar en la grilla.
De botón a panel
Un botón se transforma en el panel que abre, y de vuelta: un botón de redactar, una búsqueda que crece, una acción flotante.
MorphIcon
Dos íconos que se transforman uno en otro: el nuevo gira y crece mientras el viejo se desenfoca.
Props
Morph props
Un elemento compartido: dale a dos elementos el mismo id y, cuando uno reemplaza al otro (una tarjeta que se abre en su detalle, un botón que se vuelve un panel), el nuevo se transforma desde la posición, el tamaño y las esquinas del viejo. Funciona sin View Transitions; respeta el movimiento reducido.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
idobligatoria | string | - | Los elementos con el mismo id se transforman uno en otro: cuando uno reemplaza al otro, el nuevo crece desde la caja del viejo. |
as | ElementType | 'div' | El elemento a usar. Por defecto div. |
className | string | - | |
duration | number | - | Duración en ms. Por defecto el token de movimiento slow (480). |
easing | string | - | Curva de aceleración. Por defecto una desaceleración fuerte sin rebote. |
fadeContent | boolean | true | Hace aparecer el contenido después de que la caja se movió (por defecto true), así el texto nunca se ve estirado. |
style | CSSProperties | - |
MorphIcon props
Dos íconos que se transforman uno en otro: el activo gira y crece mientras el otro se desenfoca (reproducir y pausar, menú y cerrar, copiar y check).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
activeobligatoria | boolean | - | |
fromobligatoria | ReactNode | - | |
toobligatoria | ReactNode | - | |
className | string | - |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Motion
- morph
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-morph-icon.alea-morph-icon-a.alea-morph-icon-b
Accesibilidad
- El morphing es solo visual: mueve tú el foco al contenido nuevo (autoFocus o un ref), y de vuelta al disparador cuando se cierra.
- Con movimiento reducido, los elementos se intercambian sin morphing.
- MorphIcon es decorativo: nombra el botón según su acción actual.
Qué hacer y qué evitar
Hacer
- Haz morphing entre dos estados de lo mismo: una tarjeta y su detalle, un botón y su panel.
- Mantén el morph corto (el token slow, 480 ms) y deja que el contenido aparezca después de que la caja se mueve.
Evitar
- No hagas morphing entre cosas que no tienen relación.
- No encadenes morphs; uno a la vez se entiende mejor.