Obsidian
Maison de joyería de lujo en oro sobre negro, con hero tipo puerta de bóveda y piezas en JSON
- Plantilla
- Obsidian
- Sector
- Luxury Jewellery
- Año
- 2026
- Hecho con
- Astro 6, React 19, Tailwind CSS v4
- Páginas
- 10
Obsidian es una plantilla oscura con pan de oro para una maison de joyería de lujo o un atelier de alta gama. Diez rutas cubren el home, un índice de colecciones y sus páginas individuales, fichas de pieza con panel de specs sticky (metal, piedra, peso, dimensiones, precio), una página de craftsmanship en cuatro pasos, una línea de tiempo de heritage, un journal con post destacado, una página de contacto solo con cita previa y un 404. Cuatro colecciones de contenido tipadas, collections, pieces, journal y testimonials, lo alimentan todo desde JSON: añadir una pieza es añadir un archivo. El hero ocupa 200vh: la macro fotografía se recorta hacia dentro como una puerta de bóveda que se cierra mientras un enorme wordmark OBSIDIAN en contorno emerge detrás. Los contadores en oro suben con el scroll, una grilla bento asimétrica rompe el hábito del grid de cards y un borde shimmer con conic-gradient anima el CTA principal.
Qué incluye
- 10 rutas, Inicio, Colecciones, Detalle de colección, Ficha de pieza, Craftsmanship, Heritage, Journal, Post de journal, Contacto, 404
- Hero puerta de bóveda, sección sticky de 200vh donde la foto se recorta a inset(40%) con scrub de 1.5 mientras su imagen contra-escala a 1.3
- Wordmark OBSIDIAN gigante en contorno que aparece y escala detrás de la foto del hero como revelado inverso
- 4 colecciones de contenido tipadas, 5 colecciones, 8 piezas, 4 posts de journal, 4 testimonios, todo JSON con schemas Zod
- Grilla bento asimétrica de colecciones, spans de 7 / 5 / 12 columnas con imágenes que escalan en hover y marcas de esquina, nunca una fila simétrica de cards
- Barra de contadores GSAP, año de fundación, horas por pieza, generación y número de artesanos animan desde cero con ScrollTrigger, una sola vez
La firma
El hero es un escenario sticky de 200vh. Al hacer scroll, la macro fotografía de joyería se recorta desde inset(0%) hasta inset(40%) con un scrub de 1.5, una puerta de bóveda cerrándose, mientras la imagen interior contra-escala a 1.3 para que el encuadre se cierre en vez de encogerse. Detrás, un wordmark OBSIDIAN colosal dibujado solo con un trazo dorado de 1px aparece desde escala 0.8: cerrar la fotografía es justo lo que revela el nombre de la casa.
Verlo en vivo
La demo es pública: https://fpsjago.github.io/obsidian/. 10 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.