Registro del concepto
Fecha del registro: 22 de mayo de 2025. La tecnología y las capturas describen el prototipo según quedó documentado en esta fecha. Cualquier observación de rendimiento corresponde al mismo registro puntual. No se implica que exista una implementación actual para un cliente.
Ink Noir es un portfolio de estudio de tatuajes de lujo oscuro diseñado como una experiencia web inmersiva de un solo archivo. Construido para una estética editorial de alta gama, Rick Owens meets galería curada, prioriza animaciones de scroll cinematográficas, interacciones táctiles y una arquitectura zero-backend que se despliega en cualquier lugar.
El sitio apunta a uso de portfolio y demo, mostrando cómo se puede entregar una experiencia de marca premium sin framework o paso de build. Cada animación, transición y decisión de layout refuerza el posicionamiento del estudio: solo con cita, maestría artesanal y selectivo sin disculpas.
- Crear una presencia de portfolio que se sienta como un salón privado, no una tienda de commodity
- Entregar storytelling de scroll cinematográfico sin overhead de framework pesado
- Asegurar que visitantes móviles sientan que están usando una app nativa
- Mantener carga inicial menor a 100KB a pesar de visuales ricos y animaciones
Aspectos Destacados de la Experiencia
- Héroe inmersivo con fondo de viewport completo, revelados escalonados de titular, indicador de scroll-down con hover magnético y un CTA que usa una animación de dibujo de borde dorado personalizado.
- UX móvil de app nativa incluyendo un rail de navegación inferior fijo, safe-area insets, sensación de pull-to-refresh vía momentum scroll de Lenis y touch targets listos para haptic feedback.
- Showcase de artista como un carrusel Swiper habilitado para touch con profundidad parallax, indicador de progreso dorado y transiciones de slide sincronizadas a timelines de GSAP.
- Sección de servicios con textura de fondo difuminada, revelados escalonados de tarjetas, reglas de acento dorado y animaciones de lift impulsadas por hover.
- Narrativa de proceso anclada por una toma cinematográfica de proceso con parallax y una sección de CTA de reserva con la misma imagen con overlay oscuro y acento de borde dorado.
- Grid de galería con 33 imágenes de portfolio curadas, filtrado por categoría (All / Blackwork / Japanese / Fine Line / Traditional) y un lightbox a pantalla completa con navegación por teclado, swipe y zoom.
- FAQ accordion con animaciones suaves de altura, iconos de chevron rotativos y tipografía editorial que mantiene el tono de lujo incluso en contenido utilitario.
- Sección de contacto con un formulario con acento dorado, inputs de floating label y una animación de foco de borde dorado en el botón de enviar.
- Arquitectura de un solo archivo, un único index.html con CSS y JS embebidos, cero paso de build, desplegable en cualquier host estático o CDN.
- GSAP + ScrollTrigger para animaciones de grado de producción impulsadas por scroll: revelados de sección, parallax, texto escalonado y transiciones de héroe fijadas.
- Lenis smooth scroll para scrolling con momentum buttery tanto en desktop como móvil, con fallbacks de reduced-motion.
- Swiper 11 para el carrusel de artistas y cualquier contenido deslizable futuro, configurado con paginación personalizada y profundidad parallax.
- Sistema de diseño de propiedades CSS personalizadas con escala de tipo fluida vía clamp(), tokens de acento dorado y una paleta near-black que mantiene el foco en la imaginería.
- Responsivo sin breakpoints, la mayoría del espaciado y tipografía usan valores fluidos de clamp(), con solo media queries estratégicas para cambios de layout (columna única móvil, grid desktop).
- Carga performance-first, imagen de héroe precargada con fetchpriority="high", imágenes de galería lazy-loaded y todos los assets de terceros diferidos.
Accesibilidad y Rendimiento
- Respeta prefers-reduced-motion desactivando timelines de GSAP y Lenis cuando la preferencia está configurada.
- HTML semántico con jerarquía de headings apropiada, etiquetas aria en elementos interactivos y lightbox de galería navegable por teclado.
- Touch targets dimensionados a mínimo 48px para navegación inferior móvil y controles de galería.
- Meta tags de theme-color y apple-mobile-web-app para comportamiento tipo PWA cuando se agrega a la pantalla de inicio.
- Construido desde una especificación de diseño detallada (build.md) y prompts de assets generados por IA (image-prompts.md), luego ensamblado a mano en la experiencia de un solo archivo.
- Las 33 imágenes de galería y 7 assets editoriales optimizados a WebP y referenciados vía paths relativos para máxima portabilidad.
- Desplegado en hospedaje estático Dockploy en un subdominio personalizado con nginx sirviendo el único punto de entrada index.html.
Ink Noir demuestra que una experiencia digital de lujo no requiere un framework pesado o backend. El sitio carga rápido, hace scroll bellamente y convierte la curiosidad en solicitudes de cita a través de un formulario de reserva e integración de WhatsApp. Ahora sirve como pieza de portfolio para negocios de servicios de alta gama que quieren que su sitio web se sienta tan intencional como su artesanía.
Ver Proyecto
