Guía · cómo se hizo

Neon Whisper, paso a paso

Este sitio concepto lo diseñó, escribió y programó Claude Fable 5.2 dentro de Claude Code, a partir de una lámina de marca y de la oferta real del producto. Aquí está el proceso tal como pasó, para que lo repitas con tu marca.

01El concepto

Noche, neón, software. En el logotipo de Vocelle la doble “l” son dos barras de sonido. Esa idea manda en todo el sitio: las barras son el objeto principal de la escena 3D, laten como un medidor de voz, y la cámara viaja desde ellas hasta la casa mientras bajas por la página. El recorrido completo cuenta lo que vende el producto: del formulario a la cita.

Paleta: #05060F, #0A0F2C, #FF4D6D, #FFB3C1 y #B8A1FF. Tipografías: Gabarito para títulos y cronómetros, Onest para texto y DM Mono para etiquetas.

02Herramientas

03El flujo

1. Lámina de marca primero. Antes de escribir código hubo una lámina generada con GPT Image: logotipo, paleta, tipografía y maquetas. Sirvió de brújula, no de plantilla.
2. El texto sale de la oferta. Planes, precios, garantía y lo que no se hace vienen del documento de la oferta. No hay testimonios, logos ni cifras inventadas.
3. La escena 3D se escribe a mano. Las barras son cápsulas con un shader propio. El piso es un mar de unos 32 mil puntos que ondula en el shader de vértices. Los hilos de luz, los marcos con forma de casa y la ciudad (190 edificios en una sola llamada de dibujo, con ventanas hechas en el shader) completan el camino. La posición de la cámara depende del scroll.
4. La historia de los 120 segundos. Una sección fijada con ScrollTrigger: un teléfono en CSS 3D cambia entre 5 pantallas (formulario, llamada entrante, conversación, calendario y aviso) mientras corre el cronómetro.
5. Assets generados, pocos y con intención. Dos fotos nocturnas y un video corto. La foto del penthouse se ve a través de dos ventanas con la forma de las barras; la casa con alberca es el fondo del cierre.
6. Versión ligera para teléfono. Menos puntos, sin bloom (cada barra lleva su propio halo), tarjetas sin desenfoque de fondo y la escena en pausa cuando la pestaña no se ve. Si alguien pide menos movimiento, la historia se muestra como lista y la escena queda fija.
7. Revisión con capturas. Un navegador sin pantalla recorrió el sitio a 1440, 834 y 390 px de ancho, y cada captura se revisó con lupa. El detalle está en la sección 05.
8. Publicación. Sitio estático, sin paso de compilación. Sección 06.

04Los prompts de los assets

Foto 1, penthouse (GPT Image, 16:9, 2K):

Cinematic wide architectural photograph at night of a luxury penthouse living room, floor-to-ceiling glass walls overlooking a distant city skyline with tiny lights, the interior lit only by a warm coral-red neon glow (hex FF4D6D) from a hidden cove light strip and one sculptural lamp, deep blue-black shadows (hex 05060F), faint lavender reflections on a polished dark stone floor, low minimalist sofa, one large leafy plant silhouette, light haze in the air, no people, no text, no logos, no signage, moody high dynamic range, 35mm lens, very dark overall exposure with rich blacks

Foto 2, casa con alberca (GPT Image, 16:9, 2K):

Cinematic night exterior photograph of a modern two-story glass and concrete house on a hillside, interior rooms glowing coral-red and warm pink (hex FF4D6D and FFB3C1), a long dark infinity pool in the foreground reflecting the glow, a distant city skyline with small violet and pink lights under a deep navy-black sky (hex 05060F), subtle lavender rim light, no people, no text, no logos, no signage, very dark exposure with rich blacks, wide 28mm lens, calm, premium, atmospheric haze

Video (Kling 3.0 Turbo, 5 s, 720p, con la foto 2 como cuadro inicial):

Locked-off tripod shot, almost still. The pool water ripples gently and the coral reflections shimmer, distant city lights twinkle softly, thin haze drifts slowly across the scene. Very subtle slow push-in. No people, no new objects, no text. Calm, seamless ambient loop feel.

Para que el video no brinque al repetirse, ffmpeg lo pega con su copia en reversa (ida y vuelta) y lo deja en 618 KB:

ffmpeg -i casa-kling.mp4 -filter_complex "[0:v]split[a][b];[b]reverse[r];[a][r]concat=n=2:v=1,scale=1280:-2,fps=24[v]" -map "[v]" -an -c:v libx264 -crf 27 -movflags +faststart casa.mp4

05La pasada de revisión

Con la primera versión completa, el sitio se recorrió entero en capturas de escritorio, tableta y teléfono. Esto fue lo que salió y lo que se cambió:

Y para subir el nivel:

• Pulso de confirmación. Cuando la cita se agenda, una onda cruza el mar de puntos y los marcos se encienden. También pasa si haces clic en el inicio.
• Entrada de cámara. Al cargar, la cámara llega desde atrás en vez de aparecer quieta.
• Subrayado de voz. La línea bajo “2 minutos” es una onda viva, no un trazo fijo.
• El faro. Dos barras gigantes esperan al fondo de la ciudad y se van acercando en las últimas secciones.

06Publicarlo en Cloudflare Pages

No hay compilación: la carpeta se sube tal cual. Necesitas una cuenta de Cloudflare y Node instalado.

1. Instala wrangler e inicia sesión (abre el navegador para autorizar):

   npm install -g wrangler
   wrangler login

2. Crea el proyecto una sola vez. El nombre será parte de la dirección:

   wrangler pages project create vocelle-neon --production-branch main --force

   Con wrangler 4.155, sin --force este comando publica la carpeta como Worker en una dirección workers.dev que lleva el nombre de tu cuenta. Con --force se crea un proyecto de Pages clásico, con dirección pages.dev. Solo hace falta la primera vez.
3. Publica desde la carpeta del sitio:

   wrangler pages deploy . --project-name vocelle-neon --branch main

4. La ruta /guide es solo una carpeta guide/ con su index.html. El archivo _headers le dice a Cloudflare cuánto guardar en caché los assets.