Arko · Landing con Higgsfield MCP

Landing de Arko, un restaurante de cocina nikkei en el Eixample de Barcelona. Al hacer scroll das un paseo en vídeo por el local, de la puerta a la barra. Los vídeos se generaron con el MCP de Higgsfield desde Claude Code a partir de seis fotos del restaurante.

🌐 Demo: arko-sushi.midudev.workers.dev

[!NOTE] Es una demo, no la web oficial del restaurante. Los textos, platos y precios salen de arkorestaurant.com y los botones de reserva llevan a su sistema real.

Qué tiene

• Scroll world: el recorrido tiene seis paradas y cada una tiene su bloque de texto. El scroll mueve la cámara con un único ScrollTrigger en modo scrub, así que el vídeo nunca se queda quieto ni da saltos.
• Vídeo generado con IA: cinco tramos de Kling 3.0 (foto N → foto N+1) unidos con ffmpeg, más dos cinemagraphs en bucle (pétalos cayendo en la entrada y en el reservado).
• Escenario en arco: el vídeo 9:16 va fijo a la derecha y, detrás del arco, un ambilight se genera a partir del fotograma actual. En móvil el vídeo ocupa toda la pantalla y el texto pasa por encima.
• Pensada para móvil: el vídeo se carga después del load, el CSS va en línea, las fuentes están recortadas a latín y las fotos se sirven en AVIF y WebP con <Picture>.
• Accesible: con prefers-reduced-motion no se reproduce vídeo y las fotos cambian con un fundido.
• Mapa en SVG hecho con las calles de OpenStreetMap, sin iframes, además de FAQ y una página 404 propia.

Stack

Cómo se hizo

En PROMPTS.md están, en orden, los prompts que se usaron con Claude Code y el MCP de Higgsfield: el brief, el recorte de las fotos, la generación de los vídeos en lote, la web y el pulido final.

La landing se diseñó con el skill landing-page-design, que está en .agents/skills/.

Estructura

/
├── public/
│   ├── fonts/            # Fuentes woff2 recortadas a latín
│   ├── photos/           # Fotos originales del local y de los platos
│   └── video/
│       ├── recorrido.mp4     # Recorrido completo, escritorio (720×1280)
│       ├── recorrido-m.mp4   # Recorrido completo, móvil (480×854)
│       └── paradas/          # Cinemagraphs de la primera y la última parada
├── src/
│   ├── assets/arko/      # Fotos que optimiza astro:assets, logo y mapa SVG
│   ├── components/       # Header, Stage, Stop, Faq, Footer…
│   ├── data/arko.ts      # Todos los textos de la web
│   ├── layouts/
│   ├── pages/            # index y 404
│   ├── scripts/world.ts  # Motor del recorrido (scroll → currentTime)
│   └── styles/
├── PROMPTS.md
└── wrangler.jsonc

Desarrollo

Necesitas Node.js 22.12 o superior y pnpm.

pnpm install
pnpm dev

Despliegue

La web es estática. Cloudflare Workers sirve dist/ como assets, sin código de Worker, y usa la 404 de Astro para las rutas que no existen (ver wrangler.jsonc). Cada push a main se despliega con Workers Builds.