Clon galería “ryokan.mannay.art” → “Obra Gris” para @obragris

Contexto: clon del sitio de galería NFT ryokan.mannay.art (Locomotive Scroll horizontal + intro + lista de artworks con info panel, progress bar y cursor personalizado), adaptado como galería muestra para la artista @obragris. Built en el template vite-react-template (Vite + React 19 + Cloudflare Workers).

Decisiones tomadas

  • Serie: “Obra Gris” (tema brutalista / concreto crudo), elegido por el usuario. Estética de hormigón: gradientes grises, paneles de encofrado, agujeros de tensores.
  • Imágenes: 10 obras + 3 detalles c/u = 40 SVGs placeholders generados por scripts/generate-placeholders.mjs (seeded, deterministas). Reemplazables por los NFTs reales editando public/artworks.json y tirando archivos a public/obra/.
  • Scroll horizontal: implementación propia (wheel → translateX con lerp + drag pointer), sin depender de locomotive-scroll/GSAP. Desktop ≥1080px horizontal; móvil scroll vertical nativo.
  • Tipografías: Inter (grotesk, ≈ Neue/Haas) + Oswald (condensada, ≈ Items) vía Google Fonts, con fallbacks de sistema. Local-first: se pueden quitar los y usar Helvetica/Arial Narrow.
  • Rutas: hash #/manifesto para el manifiesto (original en español, no copia de Mannay). Galería es la vista default.
  • Datos: public/artworks.json (id, title, type, dimensions, print, printDetails, printDimensions, image, printImages[], auctionLink). auctionLink apunta a https://x.com/obragris como placeholder.

Archivos clave

  • src/react-app/App.tsx — componentes (HorizontalScroll, Intro, Artwork, ArtworkMobile, Manifesto, CustomCursor).
  • src/react-app/index.css — todo el lenguaje visual (colores f5f5f5, vh units, botones mix-blend).
  • public/artworks.json + public/obra/*.svg.

Comandos

npm run dev      # dev local
npm run build    # tsc + vite build
npm run deploy   # wrangler deploy (Cloudflare Workers)
node scripts/generate-placeholders.mjs  # regenerar placeholders

Deploy

  • Live: https://obra-gris.changeable-change.workers.dev
  • Worker: obra-gris · Cuenta: Changeable Change (account_id ya fijado en wrangler.json).
  • npx wrangler deploy (reconstruye antes con npm run build para que el nombre/account_id del dist se actualicen).

Reemplazar por arte real (próximos pasos)

  1. Poner las imágenes reales en public/obra/ (o URLs).
  2. Editar public/artworks.json con títulos/detalles/auctionLink reales.
  3. Ajustar tipografías propias si se quieren las exactas (Haas Grot / Items Condensed).