Caso práctico · Interactivo Y2K · En línea
Una marca de residuos y reciclaje que no quería parecerlo. La portada es un contenedor que gira, en el que haces clic y desciendes. La página de servicios es una memory card de PlayStation 2. Las páginas de proyectos son YouTube en 2007. Todo es real, nada es un filtro por encima.
Junky Solutions trabaja en residuos, reciclaje y arreglos locales. Todos los competidores del sector tienen el mismo sitio: un degradado verde, una foto de banco de imágenes con una hoja y un formulario de contacto. Es un sector que ha aceptado ser invisible.
El encargo era hacer algo que la gente se enviara de verdad entre sí. Eso significaba comprometerse del todo con una estética en vez de insinuarla, y aceptar que un sitio que premia la curiosidad tiene que ser realmente interactivo y no estar solo decorado.
La portada es un único objeto 3D: un contenedor que gira, cubierto de pegatinas de Junky, con una banda que dice «local fixes, global habits». Haces clic, la tapa se abre y la cámara desciende dentro en un solo movimiento continuo, hasta llegar a cinco objetos colocados sobre la basura. No hay imagen de portada ni bloque de titular.
La página de servicios es un navegador de memory card de PlayStation 2: una rejilla de iconos por la que te mueves, y cada servicio se abre en una ventana de sistema retro. Siete servicios, cada uno enlazado con los proyectos relacionados, así que recorrer la oferta y recorrer el portfolio son la misma acción.
Cada proyecto es una página de reproducción con la maquetación antigua de YouTube, y el índice es una página de resultados de búsqueda con filas y listas por etiqueta. El vídeo abre todos los carruseles porque el trabajo es sobre todo vídeo. El formato hace el trabajo de navegación gratis: todo el mundo sabe usarlo.
La página de contacto es un cuadro de diálogo de sistema operativo con un formulario que funciona. La tienda es una rejilla de productos en el mismo lenguaje. El estilo de época llega hasta los componentes en vez de quedarse en una envoltura, y ahí está la diferencia entre una plantilla y un desarrollo.
Entrar y salir del contenedor tiene que caer exactamente en el mismo encuadre siempre, o la página parece rota. Conseguirlo obligó a reconciliar el rig de cámara con los controles de órbita para que nada salte al salir. Esta es la parte poco lucida del 3D, y es la mayor parte del trabajo.
El catálogo de proyectos y la lista de servicios son archivos de datos únicos que sirven de referencia, así que añadir un proyecto es un cambio de datos y no crear una página. Los medios se sirven desde almacenamiento de objetos en vez de desde el repositorio, lo que mantiene los despliegues rápidos.
Next.js con App Router y TypeScript, React Three Fiber y Three.js para la escena 3D, y Motion para la animación de interfaz. Los medios están en el almacenamiento de objetos Cloudflare R2. El despliegue es en Vercel, limitado a propósito a un proyecto y un despliegue en línea para que nunca haya duda sobre cuál es la URL real del sitio.
El 3D es la parte técnica interesante, pero la decisión que conviene señalar es lo que se mantuvo convencional. El enrutado, los datos y el contenido son simples y aburridos, para que las partes que tienen que ser raras puedan permitírselo.
El sitio está en línea y es público en junky-alpha.vercel.app, ahora mismo en su segunda ronda de comentarios del cliente, con una tienda preparada que espera las credenciales de comercio antes de abrir.
Concepto, dirección de arte, 3D, desarrollo front-end y despliegue salieron de este estudio. Si tu marca está en un sector donde todos los sitios se parecen, eso es un argumento a favor de un proyecto así, no en contra. Cuéntanos en qué estás trabajando, o mira el otro extremo del rango en The Muuls, una tienda de una página mucho más contenida.