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 editandopublic/artworks.jsony tirando archivos apublic/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
#/manifestopara 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 placeholdersDeploy
- Live: https://obra-gris.changeable-change.workers.dev
- Worker:
obra-gris· Cuenta: Changeable Change (account_idya fijado en wrangler.json). npx wrangler deploy(reconstruye antes connpm run buildpara que el nombre/account_id del dist se actualicen).
Reemplazar por arte real (próximos pasos)
- Poner las imágenes reales en
public/obra/(o URLs). - Editar
public/artworks.jsoncon títulos/detalles/auctionLink reales. - Ajustar tipografías propias si se quieren las exactas (Haas Grot / Items Condensed).