Sextante · Relojería de autor
ProComercio · Estudios creativos
La pieza
Qué hace y dónde encaja
SERA es una marca ficticia de sérum de noche en blanco puro, negro y un azul cobalto. La portada es una escena fijada: un frasco cuentagotas flota sobre blanco con el titular partido en esquinas opuestas y, a medida que bajas, una secuencia de 150 fotogramas pintada en canvas cuenta la acción entera: el cuentagotas sale, el frasco se inclina, el gel cae en un hilo espeso, salpica en una corona brillante y se extiende en un charco, mientras el titular se abre y entra «Una sola gota. Basta.» justo con la salpicadura. Después llegan una macro de gel nocturna que se deforma como un líquido con el cursor, tres ingredientes en órbita, la gota sobre la piel, tres tarjetas de gama y un cierre negro con el nombre gigante. Incluye la secuencia en dos tamaños, nueve imágenes originales, movimiento reducido y fallback sin WebGL. Encaja en cosmética, cuidado de la piel y producto DTC.
Encaja bien en webs de
- Prompt
- ≈16.384 tokens · con Lite
- Librerías
- gsap · three · lenis
- Demo
- 42,1 KB · medio
- Prueba en frío
- pendiente
Antes de copiar
Tu marca, dentro del prompt
Cambia lo que quieras y copia: el prompt sale ya con el nombre, los colores y los textos de tu cliente. Lo que dejes en blanco se queda como en la demo.
Mete tu marca y tus colores en el prompt
Con Pro o con tu llave de regalo. Esto es lo que puedes cambiar:
- Marca
- Primera palabra del titular
- Segunda palabra del titular (en color)
- Frase de portada
- Color de acento
- Email de contacto
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Parámetros fijos
- 03Librerías y esqueleto (copiar literal)
- 04Tokens de diseño y CSS (copiar literal)
- 05Estructura y contenido (copiar literal)
- 06Mapa de escenas
- 07Movimiento
- 08Código clave
- 09Interacción
- 10Adaptación a móvil y tablet
- 11Accesibilidad y movimiento reducido
- 12Rendimiento y fallback
- 13Personalización
- 14Recursos
- 15Comprobación final
- Completo
- 6.479 palabras · ≈16.384 tokens
- Lite
- 1.414 palabras · ≈2.439 tokens
- Librerías
- gsap 3.15.0 · three 0.186.1 · lenis 1.3.26
- Peso de la demo
- 42,1 KB (medio)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
- Alternativa sin WebGL
- sí
Tokens estimados para español (≈3,6 caracteres por token): sirven para orientarte, no son exactos.
prompt.md Pro
El prompt está en Pro
6.479 palabras en el Completo y 1.414 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
La prueba en frío
Aún sin publicar para esta pieza
En la prueba en frío pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos lo que genera con la demo. Cuando esté hecha, aquí verás la captura, el veredicto y la fecha.
Paso a paso
Cómo usarlo en 4 pasos
- 01
Personaliza
Rellena el formulario de arriba con el nombre, los colores y los textos de tu cliente. Se meten en el prompt al copiar. - 02
Copia el Completo o el Lite
El Completo, para Claude, ChatGPT, Gemini o Cursor. El Lite, más corto, para Lovable, Bolt o v0, que aceptan menos texto. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Que el derrame dure más: alarga la sección a 520svh y deja la pausa final igual.»
- «Cambia la marca y el titular manteniendo la portada en 25 palabras como máximo.»
- «Haz que «Basta.» aparezca un poco antes, con la primera gota que toca el suelo.»
- «Cambia los precios y los textos de las tres tarjetas de la gama.»
- 04
Publica
Guarda el resultado como HTML (o en tu proyecto) y súbelo a Vercel, Netlify o tu hosting de siempre. Tienes los pasos en la guía.
Licencia en claro
Qué puedes hacer con esta pieza
Todas las piezas incluyen licencia de uso comercial. Usa el resultado tal cual en tus productos, encargos freelance o webs de clientes, sin atribución.
Puedes
- Usarlo en tus webs y en las de tus clientes, también si cobras por ellas.
- Cambiarlo todo lo que quieras.
- Publicar el resultado sin citarnos.
No puedes
- Revender o regalar el prompt, la demo o el código como plantilla o biblioteca.
- Compartir tu cuenta Pro.
Es la misma licencia para lo gratis y lo Pro. La tienes entera en licencia de uso.
Preguntas frecuentes
Lo que suele preguntarse
¿Se incluyen el vídeo y las imágenes?
Sí. La secuencia del derrame va en 150 fotogramas WebP para escritorio (1280×720, unos 2,5 MB) y otros 150 recortados para móvil (unos 2,3 MB), más nueve imágenes originales (frasco, textura, piel, tres ingredientes y tres tamaños). Sus condiciones están en assets/LICENCIA.txt.
¿Puedo poner mi propio vídeo?
Sí. Sirve cualquier clip de 8 a 12 segundos sobre fondo blanco: el prompt explica cómo extraer los 150 fotogramas con ffmpeg, blanquear el fondo, pasarlos a WebP y hacer el recorte para móvil. Si usas otro número de fotogramas, cambia N y vuelve a cuadrar el momento de «Basta.».
¿Qué pasa en móvil y con movimiento reducido?
En móvil se cargan los fotogramas recortados, que siguen al líquido, y la escena mide 360svh. Con movimiento reducido no hay escena fijada: la portada muestra el primer fotograma con el titular y el texto de la gota va debajo. Sin WebGL solo cambia la textura, que enseña su foto.
¿La compra y el formulario funcionan?
Son de demostración: «Comprar» muestra un aviso y el formulario valida el email sin enviarlo. Conéctalos a tu tienda o a tu herramienta de email antes de publicar.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈16384 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2439 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.1 · publicada el 01-10-2026
Otras plantillas
Todas las plantillas
Silíceo · chips de inferencia de 3 nm
GratisTecnología · Estudios creativos
Almagra · Carrés de seda con física real
ProComercio · Estudios creativos
Boreal GT-01 · gran turismo eléctrico hecho de viento
ProComercio · Tecnología
Hotel Salitre · Punta Ceniza, mar de fondo
ProHostelería · Eventos
Cumbre de Costalba · Nueve residencias
ProInmobiliaria · Arquitectura
Ritmo · Landing minimalista de app de entrenamiento
ProDeporte · Salud y estética
Caldera · Casas al límite, un travelling del paisaje al interior
ProArquitectura · Inmobiliaria
