Hace unos meses me encontré grabando un tutorial técnico. Tenía el guion perfecto, la cámara lista, las luces configuradas… pero no podía recordar todo el contenido sin sonar robótico.
Probé varios teleprompters:
- Opción 1: $29/mes. Demasiado para algo que usaría ocasionalmente.
- Opción 2: Gratis pero con anuncios cada 5 minutos. Inaceptable.
- Opción 3: Funcional pero con una UI de los 90s que me hacía llorar.
La Decisión
“¿Qué tan difícil puede ser hacer un teleprompter?”
Spoiler: No tan difícil, pero tampoco trivial.
El Proceso
Semana 1: MVP
Empecé con un MVP simple: una ventana que muestra texto y hace scroll. 200 líneas de código. Funcionó.
// Literalmente así de simple al inicio
function scroll() {
textElement.style.top = position + "px";
position -= speed;
requestAnimationFrame(scroll);
}Feo, pero funcional. Principio de “ship early, iterate often”.
Semana 2-3: El Modo Notch
La idea surgió viendo a YouTubers profesionales. Todos tienen esos teleprompters caros montados alrededor de la cámara. ¿Y si simplemente pones una ventana pequeña cerca de la webcam?
Boom. Modo notch.
El desafío técnico fue interesante:
- Ventana siempre al frente (pero no molesta)
- Scroll vertical en espacio reducido
- Controles mínimos pero accesibles
- Arrastrable desde la barra de botones
Semana 4: La Protección de Captura
Un cliente me pidió grabar un pitch con información confidencial. “¿Puedes hacer que no se pueda capturar la pantalla?”
Electron tiene APIs para esto. Pero hay un catch: solo funciona en Windows.
// Una línea. Literalmente.
mainWindow.setContentProtection(true);A veces las soluciones son más simples de lo que esperas.
Semana 5-6: El Scroll Inteligente
Intenté implementar control por voz. Pasé 3 días en ello, pero no funcionó como quería.
Lección aprendida: A veces la solución simple (control manual) es la mejor. No todo necesita IA.
Semana 7-8: Polish
Esta fase tomó tanto tiempo como todo lo anterior. Detalles que importan: atajos de teclado, temas, animaciones suaves y un sitio web sólido. El 80% del tiempo se va en el último 20% del producto.
Decisiones Técnicas
¿Por qué Electron?
Elegí Electron porque ya conocía el stack (JS/HTML/CSS), tiene un ecosistema maduro y me permitió un tiempo de desarrollo extremadamente rápido.
¿Por qué Vanilla JS?
No usé frameworks. Quería performance puro para un scroll de 60fps, minimalismo en el tamaño del bundle y, honestamente, quería refrescar mis bases de JS puro.
Lecciones Aprendidas
- Ship Early, Iterate Often: La v1.0 era básica. El feedback real dictó las features.
- El 80/20 es Real: El Modo Notch + Scroll suave es el 80% del valor.
- Gratis ≠ Sin Valor: Lo hice gratis porque es bueno para el portfolio y ayuda a otros, pero es un producto profesional que resuelve un problema real.
Pruébalo
Si creas contenido en video, dale una oportunidad:
👉 propromter.kometa.cl
Es gratis, sin anuncios, sin suscripciones. Solo descarga y usa.
Sobre mí: Desarrollador full-stack, fundador de Kometa.cl, adicto al café, y ocasionalmente hago cosas útiles.