MotionSwap

Contenido que hace un fundido cruzado mientras su tamaño lo acompaña.

WebReact NativeContenido y tamaño

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo completo.

App.jsx

import { useEffect, useState } from 'react';
import { MotionSwap, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

function Check() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16">
      <path d="m3 8.5 3 3 7-7" fill="none" stroke="currentColor" strokeWidth="2" />
    </svg>
  );
}

export default function App({ effect = 'up', align = 'center', spring = 'default' }) {
  const [status, setStatus] = useState('idle');
  const [loaded, setLoaded] = useState(true);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  useEffect(() => {
    if (status === 'idle') return;
    const next = status === 'saving' ? 'saved' : 'idle';
    const timer = setTimeout(() => setStatus(next), status === 'saving' ? 1100 : 1600);
    return () => clearTimeout(timer);
  }, [status]);

  useEffect(() => {
    if (loaded) return;
    const timer = setTimeout(() => setLoaded(true), 1200);
    return () => clearTimeout(timer);
  }, [loaded]);

  return (
    <div className="stage">
      <button className={`save ${status}`} onClick={() => setStatus('saving')}>
        <MotionSwap value={status} effect={effect} align={align} transition={transition}>
          {status === 'idle' && 'Save changes'}
          {status === 'saving' && 'Saving…'}
          {status === 'saved' && (
            <>
              <Check /> Saved
            </>
          )}
        </MotionSwap>
      </button>

      <MotionSwap
        as="div"
        inline={false}
        value={loaded ? 'profile' : 'loading'}
        effect={effect}
        transition={transition}
        className="profile"
      >
        {loaded ? (
          <div className="person">
            <span className="avatar">MK</span>
            <div>
              <strong>Min-ji Kim</strong>
              <p>Design engineer. Builds the motion system and the component docs.</p>
            </div>
          </div>
        ) : (
          <div className="skeleton">
            <span />
            <span />
          </div>
        )}
      </MotionSwap>
      <button className="reload" onClick={() => setLoaded(false)}>
        Reload profile
      </button>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 20px;
}

.save {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 16px system-ui,
    sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}

.save.saving {
  background: #2e8f6d;
}

.save.saved {
  background: #0e2e24;
}

.save svg {
  vertical-align: -2px;
}

.profile {
  width: 100%;
  border: 1px solid #cfe8dc;
  border-radius: 16px;
  background: #fff;
}

.person {
  display: flex;
  gap: 14px;
  padding: 18px;
}

.person p {
  margin: 4px 0 0;
  color: #5b616b;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 700;
}

.skeleton {
  display: grid;
  gap: 10px;
  padding: 22px 18px;
}

.skeleton span {
  height: 12px;
  border-radius: 6px;
  background: #eaf6f0;
}

.skeleton span:last-child {
  width: 60%;
}

.reload {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

Uso mínimo

SaveButton.jsx

<button onClick={save}>
  <MotionSwap value={status} effect="up">
    {status === 'saving' ? 'Saving…' : status === 'saved' ? 'Saved' : 'Save'}
  </MotionSwap>
</button>;

Lo que resuelve por ti

El elemento se redimensiona desde su tamaño en pantalla hasta el tamaño natural del contenido nuevo, así que los botones nunca saltan.
El contenido anterior se desvanece donde estaba mientras el nuevo aparece; ninguno se recoloca durante el cambio.
Volver atrás a mitad de un cambio continúa desde lo que se ve en pantalla en lugar de apilar copias.
Los hijos de texto plano son su propio value; pasa value para cualquier otra cosa.

Úsalo para

Guardar, luego Guardando… y luego Guardado.
Un esqueleto que se convierte en una tarjeta de perfil.
Un botón de reproducir que se convierte en pausa.

Props

Prop	Tipo	Por defecto	Descripción
`value`	`unknown`		Identidad del contenido; un valor nuevo provoca el cambio. Los hijos de texto plano son su propia identidad.
`children`	`ReactNode`		El contenido.
`as`	`element`	`'span'`	El elemento que se renderiza.
`inline`	`boolean`	`as === 'span'`	`true` ajusta el tamaño al contenido (etiquetas, iconos); `false` ocupa el ancho del padre y anima la altura.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Dónde se sitúa el contenido mientras cambia el tamaño.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Cómo entra y sale el contenido: `up` sube, `down` baja y `scale` crece.
`transition`	`Transition`	`spring`	Una curva de tiempo `{ duration, easing }` o un resorte `{ tempo: 'spring', spring }`. Los resortes conservan su impulso cuando se interrumpen.
`onMotionComplete`	`(value) => void`		Se ejecuta cuando el movimiento se asienta.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

inline (por defecto al renderizarse como span) anima el ancho y el alto; inline={false} ocupa el ancho del padre y anima la altura.

En React Native, los cambios inline miden el contenido nuevo en una línea; usa inline={false} para contenido que se ajusta en varias.

Se usa en estos ejemplos

Respuesta de chatSugerencias que se pliegan, una respuesta que llega a un ritmo constante y una línea de estado que se intercambia.MotionStreamMotionListMotionSwapMotionHeight