Moto Card — El sitio de una tarjeta por invitación, hecho como un film de producto en 3D
Moto Card es una tarjeta de pago metálica solo para miembros. El sitio está más cerca de un film de producto que de una landing: un escenario oscuro, un objeto que se revela de a poco y, al final, un único camino: la solicitud.
El reto
Sobre el papel, una tarjeta premium es un producto más: todo su valor está en cuán exclusiva y bien hecha se siente. La fotografía sola aplana una tarjeta metálica, y una lista de funciones convencional la habría dejado en el mismo casillero que cualquier programa de puntos masivo.
El enfoque
Montamos la tarjeta en 3D sobre un escenario oscuro y atamos la revelación al scroll: el objeto gira y atrapa la luz a medida que uno avanza por la página. La entrada es angosta a propósito: una sola acción, «solicitar acceso», y como único enlace en competencia, las condiciones de membresía.
Construir un escenario, no una página
Todo el sitio vive sobre un negro casi absoluto. Un único pedestal sostiene la tarjeta bajo una luz dirigida, y todo lo demás —navegación, textos, la única llamada a la acción— está compuesto con bajo contraste alrededor para que nada le robe el foco al objeto.
La contención es el mecanismo: cuando hay pocos elementos en la página, el producto se lee como algo escaso.
Movimiento atado al scroll
La tarjeta no es un video en bucle, sino un objeto 3D en tiempo real renderizado con Three.js y coreografiado con GSAP. La posición del scroll controla la rotación y la luz, así que el visitante conduce la revelación y examina el producto en lugar de solo verlo.
Como es geometría y no metraje, el mismo recurso sirve para cada tamaño de pantalla y cada color sin volver a renderizar.
Una puerta que solo acepta solicitudes
No hay formulario de registro ni tabla de precios. Una acción —solicitar acceso— y al lado un enlace a las condiciones de membresía. Esa es toda la superficie de conversión, y hace más por el posicionamiento que cualquier texto sobre exclusividad.
Desarrollo
El sitio está hecho en Webflow, con GSAP conduciendo la línea de tiempo del movimiento, Three.js renderizando la tarjeta y una capa de scroll suave que mantiene estable la animación entre navegadores. Webflow deja los textos y las imágenes editables por el cliente sin tocar el código de la animación.
Qué entregamos
- Tarjeta en 3D en tiempo real con Three.js sobre un escenario oscuro
- Revelación guiada por el scroll y coreografiada con GSAP
- Un único camino de conversión: la solicitud
- Hecho en Webflow para que el cliente edite el contenido
Preguntas frecuentes
Una tarjeta metálica se juzga por su acabado y su peso, y eso lo pierde la fotografía plana. Renderizarla en tiempo real permite girarla bajo una luz en movimiento, y un solo recurso cubre todos los tamaños de pantalla y todos los colores.
Sí. La revelación está atada a la posición del scroll y no a una línea de tiempo fija, y la capa de scroll suave la mantiene estable entre navegadores; la geometría es la misma en cualquier pantalla.
Porque la tarjeta es solo por solicitud. Una tabla de precios o un formulario de registro contradirían el posicionamiento, así que toda la superficie de conversión es una única acción para solicitar acceso.
Por dentro del sitio
«El sitio se siente más como una experiencia de producto que como una landing normal. La animación 3D de la tarjeta era una parte importante de lo que queríamos, y Sakura la ejecutó de forma impecable.»