Pieza web cinematografica sobre el BMW 318is Coupe Pack M (E36, Hellrot 314). La experiencia muestra portada con video, siete escenas verticales con scroll bloqueado, posters instantaneos, gestos tactiles, teclado, deep links y cierre de motor con capo abierto.

Live: https://e36.vercel.app

• Experiencia 9:16 optimizada para mobile.
• Portada con video E36, logo BMW y paleta BMW Motorsport: #4599FE, #001E49, #E00405, #FFFDFE, #2D4046, #B8CAD1.
• Siete transiciones: prologo, presencia, M-Technic, interior, motor, carretera y capo abierto.
• Nuevo cierre con capo abierto, logo BMW en las transiciones y ficha del M44B19.
• Posters JPG por escena para evitar pantalla negra antes del video.
• Video final recortado/reencodado para ocultar marca de agua y reducir peso.
• Gestos tactiles con swipe vertical y horizontal.
• Deep-linking por escena con #scene=7.
• PWA instalable con manifest.webmanifest y sw.js.
• Control de audio compacto y accesible.
• Pagina legal: /legal.html.
• Vercel Functions minimas:
  • GET /api/health
  • POST /api/track

• HTML, CSS y JavaScript sin framework.
• Vercel Functions Node.js.
• Service Worker de compatibilidad para purgar caches antiguas y evitar HTML/assets obsoletos.
• Playwright + axe-core para QA renderizado.
• ffmpeg-static para regenerar posters y optimizar video.

npm ci
npm run dev

Abre http://localhost:5173/.

Para probar las Functions localmente:

npm run vercel:dev

npm run dev              # servidor estatico local
npm run vercel:dev       # entorno Vercel local con /api/*
npm run validate:html    # valida index, legacy redirect y legal
npm run check:js         # valida sintaxis JS
npm run audit:public     # escaneo de rutas locales, agentes y secretos
npm run seo:audit        # valida canonical, sitemap, robots, Google e IndexNow
npm run indexnow:dry     # muestra el payload que se enviaria a IndexNow/Bing
npm run indexnow:submit  # avisa a IndexNow/Bing de URLs publicas actualizadas
npm run test:rendered    # Playwright + axe
npm run check            # HTML + JS + auditoria publica
npm run build:posters    # regenera posters desde videos
npm run vercel:deploy    # preview Vercel
npm run vercel:prod      # produccion Vercel

npm ci
npm run check
npm run test:rendered
npm audit --audit-level=moderate

GitHub Actions ejecuta validacion, auditoria publica, tests renderizados y audit de dependencias en main y pull requests.

La web esta preparada para indexacion limpia en Google y Bing:

• Canonical absoluto en / y /legal.html.
• robots.txt publico con Sitemap: https://e36.vercel.app/sitemap.xml.
• sitemap.xml con URLs absolutas, lastmod y la imagen social principal.
• Metadata Open Graph, Twitter Card y datos estructurados Schema.org.
• Archivo de verificacion de Google Search Console en la raiz.
• IndexNow preparado para Bing y otros buscadores compatibles con el archivo de clave publico.
• /api/* queda fuera del indice mediante robots.txt y X-Robots-Tag.

Para avisar a Bing/IndexNow tras un deploy:

npm run indexnow:submit

La verificacion de Bing Webmaster Tools se puede hacer importando la propiedad desde Google Search Console o anadiendo el token msvalidate.01 que Bing entregue en el panel.

El proyecto esta preparado para Vercel:

vercel link
vercel deploy
vercel deploy --prod

vercel.json define headers de seguridad, cache inmutable para assets/videos, Accept-Ranges: bytes para los videos y no-store para /api/*.

Los binarios de media (assets/ y videos/) son recursos de despliegue y no se versionan en el repo publico. Para publicar una version completa con video hay que desplegar desde el workspace local que contiene esas carpetas o subir la media a un storage/CDN equivalente y actualizar las rutas.

Smoke tests de produccion:

curl -I https://e36.vercel.app
curl -I https://e36.vercel.app/legal.html
curl -I https://e36.vercel.app/videos/01.mp4
curl https://e36.vercel.app/api/health

api/                     Vercel Functions
assets/                  recursos de media locales, ignorados por Git
videos/                  videos MP4 9:16 locales, ignorados por Git
tools/                   utilidades de QA y media
tests/                   tests renderizados Playwright + axe
index.html               experiencia principal
E36 - Scroll Cine.html   redirect legacy a /
legal.html               aviso legal fan/no oficial
manifest.webmanifest     PWA manifest
sw.js                    service worker
vercel.json              config de deploy

/api/track recibe eventos anonimos de experiencia y Web Vitals. No guarda datos personales ni persiste en una base de datos por defecto.

E36 Scroll Cine es una experiencia fan-made sobre el BMW 318is Coupe Pack M (E36). No es un sitio oficial de BMW AG y no esta afiliado, patrocinado, aprobado ni respaldado por BMW AG. Consulta NOTICE.md y /legal.html.

Codigo bajo licencia MIT. Los nombres, marcas y assets de terceros permanecen bajo sus respectivos titulares.