Typevine

Acerca de

Typevine convierte un mensaje en una pequeña escena animada. Escribe “Feliz cumpleaños, Maya” y las enredaderas empiezan a crecer por encima y por debajo de las letras, se abren flores y pasan luciérnagas. Elige un mundo, ajusta cómo se ve y cómo se mueve, y guárdalo como imagen o como video en bucle para enviárselo a alguien. Abre directo en la escena: sin cuenta, sin galería de plantillas y sin cobro al final.

Está en vivo en typevine.com con dos mundos, el Bosque Encantado y el Arrecife Profundo.

Por qué lo construí

Empezó como un fin de semana de diversión. Vi una publicación en Twitter sobre Type Garden, un pequeño experimento de Akshat Agarwal donde un jardín crece a partir de las letras que escribes, y me dieron ganas de probar algo parecido y darle un giro con mi propio estilo.

Paletta y Popshot son herramientas: existen para quitarle fricción al trabajo. Esto era lo contrario, algo cuyo único trabajo es sentirse bien al usarlo. Quería que el momento de escribir fuera el producto: cada tecla hace crecer algo, así que se siente más como un juego que como un formulario. Y quería que terminara en algo que puedas enviar, sin la cuenta, los cobros ni los anuncios que piden la mayoría de las tarjetas digitales.

Cómo funciona

Aunque partí de esa inspiración, parte del reto divertido fue reconstruirlo todo con IA y no usar nada del código original, para que el resultado fuera mío y pudiera llevar mi visión y mis temas. El corazón es un motor escrito en TypeScript puro, sin DOM, sin reloj y sin Math.random. Coloca las letras, hace crecer las enredaderas a lo largo y alrededor de ellas, las entrelaza por encima y por debajo de los trazos, y decide cada fotograma a partir de una semilla y un tiempo. El mismo mensaje con el mismo número de patrón siempre crece igual. Eso permite que la vista previa, la imagen guardada y el video coincidan exactamente, sin nada que sincronizar entre ellos.

Cada mundo es una escena completa en Three.js, con profundidad, luz y partículas, y la tarjeta se dibuja con Canvas 2D dentro de ella. La interfaz es Preact con signals, construida con Vite y desplegada en Vercel. Los videos se codifican en MP4 en el navegador, así que hacer uno no necesita servidor.

La legibilidad es la restricción más difícil. Una enredadera que tapa el mensaje arruina la tarjeta, así que una batería de pruebas hace crecer las enredaderas con veinte patrones, tres formatos y muchos mensajes, y revisa cada fotograma contra límites de cuánto puede cubrir el arte de cada letra.

Lo que está en vivo

Todo lo siguiente está en vivo en typevine.com:

• Dos mundos: el Bosque Encantado (hiedra, flores, hongos y luciérnagas en un bosque a la luz de la luna) y el Arrecife Profundo (algas, coral y burbujas en agua azul), cada uno con tres estilos
• Un crecimiento que sigue lo que escribes, letra por letra, hasta 200 caracteres
• Personalizar: fuente, movimiento, cuánto crece, velocidad y formato, además de un número de patrón y un botón para barajar
• Guardar una imagen, gratis
• Hacer un video en bucle, gratis, con un pequeño logo de Typevine
• Formatos horizontal, cuadrado, vertical e historia
• Una versión para teléfono con los controles en una barra inferior
• Deshacer y rehacer, atajos de teclado, sonido y una opción de Reducir movimiento que deja la vista previa quieta
• Analítica sin cookies que nunca registra el mensaje que escribes

Dónde está hoy

Sinceramente, todavía no lo sé. Typevine fue un proyecto divertido de fin de semana, y puede que siga creciendo de forma orgánica, un mundo a la vez, o que se quede tal como está. En cualquier caso cumplió lo que buscaba: tomar una idea que me encantó, hacerla mía y ver hasta dónde podía llegar construyendo con IA en pocos días.