Atomic
Un sitio web de marketing orientado al movimiento para un producto de analítica SaaS, concebido para contar una historia conforme se desplaza la página.
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
Descripción general
Atomic es la landing page de un producto de analítica SaaS creado bajo una única promesa: saber siempre qué ocurre en tu negocio. La página tiene un objetivo claro y exigente: convencer a quien la visita, en un solo desplazamiento, de que el producto se percibe moderno y merece la pena registrarse. Lo construí como una experiencia de una sola página donde cada sección se anima al descender, culminando en la prueba social.
El problema
Una landing page se juzga en sus primeros segundos. La mayoría de las plantillas de marketing resultan estáticas e intercambiables, y en cuanto un equipo busca una animación "premium", el desplazamiento se vuelve tosco y los tiempos de carga se disparan. El objetivo era alcanzar el punto que la mayoría de los sitios web no logra: un movimiento que resulte genuinamente cinematográfico sin entorpecer la navegación del usuario ni ocultar el mensaje.
Mi rol y enfoque
Asumí la responsabilidad integral de este proyecto: maquetación, diseño visual, estructura de textos y animación. En lugar de dispersar efectos por la página, traté todo el desplazamiento como una única secuencia coreografiada y estructuré cada sección para revelarse en el momento preciso. La premisa constante fue que el movimiento debía servir al mensaje comercial: debía dirigir la mirada primero al titular, luego al producto y después a la prueba de valor, sin caer en la mera decoración.
Stack tecnológico
Características clave
Galería
Desafíos y soluciones
La sincronización de la animación del texto fue la parte más compleja. SplitText mide un titular y lo divide en líneas, pero si se ejecuta antes de que las fuentes web terminen de cargarse, el diseño se altera y la división falla. Condicioné cada animación de texto a document.fonts.ready, de modo que la división solo ocurre cuando las fuentes reales están listas. Eso eliminó el parpadeo y los saltos de maquetación.
Coordinar tres sistemas de animación fue el otro reto. El motor de desplazamiento suave de GSAP, la barra de progreso de Framer Motion y Locomotive intentan controlar la posición del scroll. Convertí ScrollSmoother de GSAP en la única fuente de verdad y superpuse los demás sobre los valores generados por este, lo que mantuvo todo sincronizado. En dispositivos táctiles reduje deliberadamente el desplazamiento suave para que los móviles respondieran con agilidad en lugar de sentirse lentos.
Resultado
El resultado es una página de destino rápida con una coreografía de scroll de nivel de producción, el tipo de movimiento que muchos sitios de marketing intentan y pocos logran limpiamente. Funciona como una página de producto real y como una pieza de referencia para la animación front-end avanzada que no compromete el rendimiento.
¿Tienes un problema de producto similar?
Comparte el producto actual, el resultado que necesitas y las limitaciones que ya existen en el camino. Usaré eso para definir un primer hito razonable.
Servicios de desarrollo de aplicaciones web