Sextante · Relojería de autor
ProComercio · Estudios creativos
La pieza
Qué hace y dónde encaja
ORREN es una marca ficticia de gran turismo eléctrico en negro puro, blanco y un único rojo que solo vive en las luces del coche. La portada es una foto de estudio pintada en WebGL casi a oscuras: una banda horizontal de luz la recorre cada cinco segundos, el cursor lleva un foco de borde líquido que revela la carrocería y, en la intro, una línea roja cruza la pantalla y enciende la firma del morro con bloom. Al bajar, la banda barre el coche, el perfil cruza por delante del nombre gigante dejando una estela roja con desenfoque de movimiento, dos detalles se encienden bajo el cursor, un manifiesto se ilumina palabra a palabra, la carretera nocturna late y el habitáculo se mueve en profundidad. Cierra con el coche iluminado, formulario de reserva y el nombre recortado. Encaja en automoción, movilidad y cualquier producto oscuro con luz propia.
Encaja bien en webs de
- Prompt
- ≈19.286 tokens · con Lite
- Librerías
- three · gsap · lenis
- Demo
- 46,3 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
- Titular, arriba a la izquierda
- Titular, abajo a la derecha (en gris)
- Frase de portada
- Microdato sobre el titular
- Titular de la silueta
- Titular de la silueta, segunda línea (en gris)
- Cifra 1
- Unidad de la cifra 1
- Etiqueta de la cifra 1
- Cifra 2
- Unidad de la cifra 2
- Etiqueta de la cifra 2
- Cifra 3
- Unidad de la cifra 3
- Etiqueta de la cifra 3
- Titular del cierre
- Titular del cierre, segunda línea (en gris)
- Frase del cierre
- Color de las luces
- Email de contacto
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Recursos
- 04Tokens de diseño
- 05Estructura y contenido
- 06CSS completo (copiar literal)
- 07Movimiento
- 08Código clave (copiar literal)
- 09Interacción
- 10Adaptación a móvil y tablet
- 11Accesibilidad y movimiento reducido
- 12Rendimiento
- 13Personalización
- 14Parámetros fijos
- 15Comprobación final
- 16Recursos: tokens y URL
- Completo
- 9.221 palabras · ≈19.286 tokens
- Lite
- 1.119 palabras · ≈1.981 tokens
- Librerías
- three 0.186.1 · gsap 3.15.0 · lenis 1.3.26
- Peso de la demo
- 46,3 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
9.221 palabras en el Completo y 1.119 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 la banda de luz recorra el coche más despacio: bucle de 8 s en vez de 5.»
- «Haz el foco del cursor más grande y suave (radio 0,45) en el hero.»
- «Que la estela roja de la silueta sea el doble de larga y más gruesa.»
- «Cambia las tres cifras (variables cifra, unidad y etiqueta) por las de una moto eléctrica y reescribe los textos libres de detalles, noche e interior.»
- 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 las fotos del coche?
Sí. Seis imágenes originales en WebP (hero, perfil con alfa, piloto, rueda, carretera e interior), cada una con versión de 960 px para móvil y por debajo de 220 KB. Sus condiciones están en assets/LICENCIA.txt.
¿Puedo usar las fotos de mi propio producto?
Sí, si son oscuras, en 16:9 y con la luz propia del producto en el color de acento: el shader trata como emisivo el exceso de rojo, así que con otro acento cambia también las luces de las fotos. El perfil necesita alfa limpio y el morro a la izquierda; el prompt explica qué dos puntos medir (piloto trasero y suelo).
¿Qué pasa en móvil, sin WebGL o con movimiento reducido?
En móvil se cargan las fotos de 960 px; el hero encuadra con zoom el morro, la firma y la rueda delantera (más de la mitad del alto) y el foco de luz se mueve solo si no tocas. Sin WebGL o con movimiento reducido cada escena es una foto fija con todos los textos, sin pines ni animaciones.
¿El formulario de reserva funciona?
Es de demostración: valida nombre y email y responde en la misma línea sin enviar nada. Conéctalo a tu CRM o a tu herramienta de email antes de publicar.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈19286 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1981 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · 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
