Popshot

Sobre el producto

Popshot convierte una captura en bruto en algo que puedes poner en una landing, un changelog o un post de lanzamiento. Pegas o sueltas una imagen y Popshot le pone un fondo que combina, la enmarca y la ajusta al tamaño de cada plataforma. La anotas, tapas lo que no se debe ver y exportas. Corre entero en el navegador y no necesita cuenta para probarlo. El nivel gratuito es una herramienta de verdad, no una prueba; sus exportaciones llevan una pequeña marca de agua de popshot.app.

Por qué lo construí

Cada producto que lanzo necesita lo mismo y nada de eso es el trabajo interesante: una captura que no parezca una captura. Un marco de ventana, un fondo que no sea gris, una flecha apuntando a lo que hay que mirar, y una exportación que no pese 4 MB.

Las herramientas que existen resuelven esto, pero la mayoría quiere una cuenta antes de dejarte ver el resultado, y varias ponen los buenos fondos detrás de una suscripción a la que tienes que comprometerte antes de saber si la herramienta te sirve. Es mucha fricción para una tarea de cuarenta segundos.

Así que construí la versión que yo quería: la abres, pegas, exportas. Decides después si te importa lo suficiente como para pagar.

El problema

Una captura es evidencia, no un visual. Recién salida del sistema operativo trae la proporción equivocada, un escritorio distrayendo al fondo, la notificación que llegó en el peor momento, y ninguno de los recursos de encuadre que le dicen al lector dónde mirar.

Arreglar eso a mano implica una herramienta de diseño, un archivo de mockup, un recorte manual, una sombra que ajustas a ojo, y un preset de exportación que vuelves a deducir cada vez. Es un trabajo de cinco minutos que haces una y otra vez sin volverte más rápido, porque nada de eso es reutilizable.

Cómo lo construí

React 18, TypeScript, Vite, Tailwind y shadcn/ui, con Zustand para el estado del editor. El lienzo es Konva, que es lo que hace que la composición con varias imágenes, los marcos de dispositivo y el zoom se comporten como un editor de verdad y no como una pila de transformaciones CSS. Supabase maneja autenticación y permisos, Stripe la facturación, Vike renderiza las páginas de marketing como HTML estático para búsqueda, PostHog cubre la analítica, y todo se despliega en Vercel.

La exportación era la parte que tenía que ser exacta. Todo se compone en canvas y se descarga localmente, así que nada de lo que pegas se sube a ningún servidor.

Qué está en producción

Todo lo siguiente está en vivo en popshot.app:

• Pegar, soltar o subir, y copiar el resultado de vuelta al portapapeles
• 30 presets de lienzo al tamaño exacto de cada plataforma, y en Pro todos los tamaños de una vez en una sola descarga: LinkedIn, X, Instagram, Product Hunt y vistas previas de enlaces
• 19 mockups de dispositivo entre teléfonos, tablets, portátiles, pantallas y relojes
• Marcos de navegador y sistema, con Arc, Safari, Card y Stack como marcos premium en Pro
• Fondos: sólido, degradado y mesh, con muestreo de la propia paleta de la captura; fondos de vidrio e imagen en Pro
• Estilos: Minimal, Glass, Soft Shadow, Gradient, Dark y Borderless, con los premium en Pro
• Anotación: flechas, cajas, elipses, líneas, texto, resaltador, pasos numerados, recorte, desenfoque para tapar datos, y comparación antes/después; foco, lupa, flechas curvas y globos en Pro
• Layouts con varias imágenes y zoom
• Exportación a PNG, JPG y WebP a 1×, 2× y 3×, PNG transparente, y 4× en Pro
• Looks guardados: 3 con una cuenta gratuita, ilimitados en Pro
• Una pequeña marca de agua de popshot.app en las exportaciones gratuitas; Pro la quita o pone tu propio logo en su lugar
• Español completo, con selector de idioma dentro de la app
• Sin registro para probar; Pro con Stripe a 9 USD al mes o 79 al año

En qué punto está

El producto está construido y funcionando. La brecha honesta es la distribución, no las funcionalidades: la analítica muestra que el muro es el tráfico y no la conversión, así que el trabajo actual es que se encuentre: renderizado estático para búsqueda, listados en directorios, y una extensión de navegador para juntar capturar y embellecer en un solo paso.

Esa es la parte de lanzar en solitario que nadie pone en el caso de estudio. Construirlo fue la mitad fácil.