Cargando
Demos en vivo

Prompt del día ·

Tres móviles en 3D, con pantallas vivas, solo con CSS

Lo que hace el prompt, grabado tal cual salió

Un abanico de tres mockups de móvil cuyas pantallas son HTML de verdad: un calendario, un chat donde entran mensajes nuevos y unas barras que crecen. Todo el abanico se inclina hacia el cursor. Sin three.js y sin imágenes.

Make one index.html, no libraries, CSS 3D only. Full-screen page, background #0b0c14 with a violet glow behind the center. Three phone mockups (9:19.5, 40px corners, thin dark bezel) stand in a fan, all fully in view on a phone: each is min(38vw, 26vh) wide, the middle one in front, the side ones rotated ±28° on Y, pushed back 140px and out 70% of a phone's width. Each screen is HTML/CSS in white and violet #7c6cff on #15162a: a week calendar, a chat inbox, a stats card with bars. Perspective 1100px, preserve-3d: the whole fan tilts with the cursor (or a finger), up to 18°, eased. The screens are alive: the bars grow in a loop and a new chat bubble pops in every 2 s. A faint mirror reflection of the phones on the floor. 60 fps on a phone.

748 caracteres · Hecho con HTML + CSS 3D · salió a la primera

Para qué sirve

  • La portada de una app o de un SaaS, antes de tener capturas reales.
  • Una sección de «cómo funciona»: un móvil por paso.
  • Una página de lanzamiento o de lista de espera.

Variantes para probar

Añade la línea al final del prompt. Estas no las hemos grabado: pruébalas tú.

  • Tus capturasInstead of HTML screens, show my three images app-1.png, app-2.png, app-3.png, object-fit cover.
  • Versión claraBackground #f3f2f8, screens white with #111 text, a soft grey shadow under each phone instead of the reflection.
  • Un solo móvil que giraOnly the middle phone; on scroll it turns 360° on Y and the screen changes at the back.

Cómo usarlo

  1. Copia el prompt.
  2. Pégalo en Claude, ChatGPT, Cursor o Lovable y pide un solo archivo index.html.
  3. Guarda el archivo y ábrelo en el navegador. Para publicarlo, súbelo a cualquier hosting estático (Cloudflare Pages es gratis).

¿Lo quieres acabado, con tus fotos y tus textos?

El kit App es la versión completa de esta idea: una web entera, que rellenas en el navegador y te descargas.Ver el kit App · 500 €

O te la montamos nosotros: nos mandas textos y fotos y la publicamos en tu dominio en 48 horas laborables.

Te la montamos · 750 €

Preguntas

¿Dónde pego este prompt?
En cualquier asistente que escriba código: Claude, ChatGPT, Cursor, Lovable o Claude Code. Pide el resultado como un solo archivo index.html, guárdalo y ábrelo en el navegador. Usa HTML + CSS 3D.
¿Puedo usarlo en mi web?
Sí. El prompt es gratis y el código que te devuelva el asistente es tuyo. Si prefieres la versión acabada, con tus fotos y tus textos y lista para publicar, está el kit relacionado.
¿El vídeo es lo que sale de verdad?
Sí. Es la página que salió del prompt, grabada sin tocar el código a mano, a la primera. Cada asistente escribe código distinto, así que tu resultado puede variar un poco.