Puerto Vallarta · Claude Code · Next.js
Webs que se sienten como película.
Video con IA que se mueve con tu scroll, 3D real y los datos de tu negocio. Construido con Claude, no con plantillas.
Desliza para ver la historia
01 — La idea
Todoempiezaconunaconversación:tunegocio,tusfotos,tutono.
02 — Claude escribe
Referencias,imágenesyvideogeneradosconIA,dirigidospornosotros.
03 — La pieza 3D
RendersrealesenBlenderoWebGLenvivo.Nadagenérico.
04 — La web viva
EnlíneaenVercel,probadaenmóvilymedida.
Nuestra versión del método, con Claude
Lo mismo que hacen los tutoriales con Antigravity y Runable, pero con nuestro kit, nuestras reglas y sin inventar datos.
- 01VERDADES.md
Brief y verdades
Investigamos tu huella digital y anotamos cada dato con su fuente. Lo que no se confirma no se pinta.
- 02kf1 → kf4
Cuadros clave con IA
Cuatro imágenes con el mismo estilo, a partir de tus fotos o de referencias. Runable, Higgsfield o Nano Banana.
- 031 shot · 15 s
Video de 15 segundos
Un solo plano continuo que recorre los cuadros. Seedance 2.5 o Kling. Sin audio: la música es tuya.
- 04Secuencia.tsx
Cuadros que obedecen al scroll
El video se convierte en 96 cuadros WebP y un canvas los recorre con tu dedo. Adelante y atrás, sin lag.
- 05Cycles · R3F
3D de verdad
Blender con materiales reales para la pieza firma, o WebGL en vivo para girarla. Un GLB de Tripo solo si pasa inspección.
- 06premium-web-kit
Claude Code arma el sitio
Sobre nuestro kit: panel del dueño, SEO técnico, seguridad, ES/EN, WhatsApp. Doce capas, siempre.
- 07QA
Pruebas como visitante
Playwright con rueda real en 1440 y 375 px, y TestSprite para pruebas de punta a punta generadas.
- 08Vercel
Vista previa y entrega
Vercel, dominio, firewall y un handoff escrito. Los cambios de gusto esperan tu sí.
Piezas reales de la flota
Renders hechos en Blender para sitios de Puerto Vallarta. Cada uno se arma con el scroll.
La chela que se sirve al tocarla
The Sports Bar PV · líquido, espuma, escarcha y condensación.
Hamburguesa capa por capa
The Sports Bar PV · seis rellenos que caen uno por uno.
Mueve el cursor.
Dos imágenes y una máscara que sigue al puntero. Cero WebGL, cero peso.
Mueve el cursor sobre la imagen
3D en vivo, en tu pantalla.
Este es el logo del estudio armado en LEGO, un modelo GLB real corriendo en WebGL. Arrástralo.
Modelo 3D real del sitio de Gallo AI Systems
Los prompts que usamos con Claude
Copia, pega y adapta. Son los mismos que armaron esta página.
01Cuadros clave (imagen)
Genera 4 imágenes keyframe en 16:9, misma resolución y EXACTAMENTE el mismo estilo (luz, lente, paleta). Sin texto ni logos. Nómbralas kf1..kf4. kf1: [escena inicial]. kf2: [transición]. kf3: [pieza]. kf4: [final]. Entrégamelas para revisar antes del video.
02Video continuo (Seedance 2.5 / Kling)
Single continuous shot, 15 s, 16:9, sin audio. Usa kf1→kf4 como keyframes secuenciales. CAMERA: un solo movimiento por tramo (push-in → travel → orbit → pull-back). Movimiento suave y estable al reproducir adelante y atrás (se usará scrubeado por scroll). Sin cortes, sin morph, sin texto. Mismo estilo y sujeto en todo el recorrido.
03Cuadros que obedecen al scroll (Claude Code)
Convierte el video a 96 cuadros WebP con alfa (ffmpeg fps=96/duración). Crea un canvas sticky en una sección de 260vh que mapee el progreso del scroll al índice del cuadro con lerp, precarga primero cada décimo cuadro, respeta DPR ≤ 1.5 y prefers-reduced-motion (último cuadro fijo). Escribe dataset.prog para QA. No animes por tiempo: solo por scroll.
04Capítulos sincronizados
Sobre el canvas, capítulos HTML (no texto horneado en el video): etiqueta con línea fina que crece, titular palabra por palabra con máscara y desenfoque, metadatos en etiquetas de vidrio. Cada capítulo aparece en su rango de progreso [a,b] y se va antes de que la cámara llegue al sujeto. Parallax de pocos píxeles entre texto y video.
05Hover reveal
Sobre la imagen base, una capa con la imagen de revelado y una máscara radial de 260 px con borde suave que sigue al cursor con lerp. pointer-events:none en la capa. Fuera del contenedor, oculta el revelado. Solo CSS mask-image + una variable --x/--y.
06Pruebas como visitante
Con Playwright: rueda real hasta el último píxel del pie (nunca scrollTo con Lenis), 1440 y 375 px, sin desborde horizontal, H1 en 2 líneas, nav en 1, CTAs ≥ 48 px y ninguno tapado por el flotante (elementFromPoint), dataset.prog del 3D en tres puntos. Luego TestSprite CLI: “Use TestSprite CLI to test this project and fix what fails”.
Preguntas frecuentes
¿Qué tan rápido está una web así?
El video con IA y los cuadros salen en horas. La pieza 3D en Blender toma de una a tres horas de render. El sitio completo, con panel, SEO y pruebas, se entrega en vista previa para tu sí.
¿Usan mis fotos o inventan?
Tus fotos y tus datos. Lo generado con IA se etiqueta como ilustrativo y lo que no podemos confirmar se deja vacío, nunca inventado.
¿Qué incluye siempre?
Panel del dueño, WhatsApp, español e inglés, SEO técnico, cabeceras de seguridad, legales, pruebas en móvil y despliegue en Vercel.
¿Y si no me gusta algo?
Los cambios de gusto van a vista previa y esperan tu aprobación. Lo verificable (velocidad, enlaces, seguridad) se corrige sin preguntar.
Tu negocio, con una web que se siente como película.
Escríbeme y te digo qué le queda y cuánto cuesta, sin vueltas.
Quiero una web asíGallo AI Systems · Puerto Vallarta · @elgallitonegro7
Video de introducción generado con IA (Runable · Seedance) a partir de cuadros clave dirigidos por el estudio. Renders 3D en Blender. Sitio construido con Claude Code sobre el premium-web-kit.