lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

configuración principiante reactsveltevueinterfaz

Torph: anima cambios de texto y cifras en tu interfaz

Haz más legibles los cambios de un contador o una etiqueta de estado con transiciones entre valores. Puedes integrarlo en React, Vue, Svelte o JavaScript sin añadir otra biblioteca de animación.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Preparación

Abre la raíz de la aplicación y comprueba Node.js/npm según sus requisitos. La ruta del ejemplo exige React y react-dom ≥18. Los adaptadores alternativos requieren Svelte ≥5 o Vue ≥3 según el manifiesto del paquete; no necesitas instalar todos.

Paso 1: instala el paquete

En el proyecto de destino, el README del paquete documenta:

npm install torph

Paso 2: integra el adaptador

Para React, el ejemplo mínimo oficial es:

import { TextMorph } from "torph/react";

<TextMorph>Hola, mundo</TextMorph>;

Pide al agente que vincule sus hijos al estado real de tu aplicación. Para Svelte o Vue usa los ejemplos del README del paquete; sus props son distintas.

Paso 3: prueba cambios de valor

Cambia el estado desde la propia interfaz. Empieza con una etiqueta corta o un contador y conserva el respeto por movimiento reducido que documenta la API.

Comprobación

Comprueba el valor final, varios cambios consecutivos y el comportamiento con movimiento reducido. Revisa que la transición no interfiera con lectura, selección de texto ni el flujo de la página.

Si algo falla

Si no cambia el texto, verifica primero que cambia el estado de la aplicación y que importas el adaptador correcto. Consulta la diferencia entre text y children en la API antes de cambiar opciones de animación.

Fuente: documentación del proyecto.

ver en .md ¿Prefieres el recurso entero?

Qué es

Torph es un componente de interfaz que transforma visualmente un texto en otro. Incluye adaptadores para varios frameworks y una API de JavaScript para controlar el elemento directamente.

Para qué te sirve

  • Cuando el estado de una tarea del agente cambia y quieres conservar continuidad visual.
  • Cuando un total de una aplicación se actualiza y necesitas distinguir qué cifras cambiaron.
  • Cuando pides a tu agente de programación una transición de texto sin incorporar un motor de animación adicional.

Cómo funciona

El componente relaciona los segmentos del texto anterior con los del siguiente y anima entradas, salidas y movimientos. Los números se comparan por posición decimal de forma predeterminada. La duración y la curva se pueden ajustar; también admite parámetros de resorte. La API documenta respeto por la preferencia de movimiento reducido.

Antes de empezar

Necesitas una aplicación web y el entorno del framework elegido: React y react-dom ≥18 para estos pasos, o Svelte ≥5 o Vue ≥3 para sus adaptadores. El paquete se instala con un gestor de paquetes de JavaScript. No necesita claves de un proveedor de IA; el consumo del agente que te ayude a integrarlo es independiente.

Repositorio activo comprobado con GitHub el 26 oct 2026; último commit consultado del 2026-09-07.

Límites y alternativas

Torph solo presenta valores que tu aplicación ya calcula. No produce respuestas ni ejecuta tareas de un agente. Evita animar continuamente textos largos de una respuesta en streaming sin probar legibilidad. Para un cambio sencillo también puede bastar una actualización de texto sin transición; para cifras, el README menciona Number Flow como alternativa.

Recursos