Las webs de agencias dicen "somos técnicos" con un párrafo y una foto de stock. Nosotros preferimos demostrarlo: pusimos una consola de verdad en mitad de la home y un presupuestador que reacciona a cada clic. Este post cuenta cómo se construyeron las dos piezas y qué aprendimos de ver a la gente jugar con ellas.
Una terminal de verdad, no un mockup
La sección «Bajo el capó» es un intérprete de comandos escrito en vanilla JS: historial con ↑↓, autocompletado con Tab (con texto fantasma), chips de acceso rápido y una secuencia de boot con guiño incluido: humo comercial… [not found]. Los comandos responden con contenido real: servicios, casos con enlaces, stack, contacto.
El detalle que más gusta es el easter egg: escribe matrix y una lluvia digital en cobalto/cyan (con glifos de INTERVOLUTIONS colados) toma la pantalla durante unos segundos. Canvas 2D, cero librerías, y pausado en cuanto sales del viewport.
Astro scopea los estilos por componente, pero las líneas que crea el JS en runtime no llevan ese scope. Solución: estilos globales con prefijo .term-*. Veinte minutos de depuración que te regalamos aquí gratis.
El presupuestador: marketing que se juega
El CTA clásico («¿hablamos?») pedía fe. El nuevo pide 30 segundos de juego: eliges qué construyes, le sumas poderes y un panel en vivo monta tu plan: fases que se encienden, semanas y horquilla con interpolación numérica, y un medidor de ambición que va de MVP ágil a Buque insignia.
La gracia está en el cierre del bucle: «Quiero este plan» llega al formulario de presupuesto con el plan ya escrito en el mensaje. El visitante juega, se compromete sin darse cuenta y aterriza con el trabajo hecho. Fricción negativa.
- Números con tween y pop: los cambios se sienten, no se leen
- Chispas de partículas en cada clic (5 nodos DOM, 600ms de vida)
- Gauge SVG con stroke-dashoffset: barato y suave
- Todo respeta prefers-reduced-motion
La mejor prueba de que sabemos hacer productos interactivos es que nuestra web lo sea.
Nota interna del proyecto
