Atomic

Role: Solo design and front-end developmentTimeline: 2024-2025Type: Marketing / landing page

React 19

Vite

Tailwind CSS 4

GSAP

Locomotive Scroll

Framer Motion

Swiper

Atomic hero image

Atomic is the landing page for a SaaS analytics product built around one promise: you always know what's happening in your business. The page has a single, difficult job. It has to convince a visitor, in one scroll, that the product feels modern and worth signing up for. I built it as a one-page experience where each section animates into place as you move down, and the whole thing ends on social proof.

I owned this one end to end: layout, visual design, copy structure, and the animation. Instead of scattering effects across the page, I treated the whole scroll as a single choreographed sequence and built each section to reveal itself at the right moment. The rule I kept coming back to was that motion had to serve the pitch. It should pull the eye to the headline first, then the product, then the proof, not decorate for its own sake.

FrameworkReact 19 with Vite

StylingTailwind CSS 4

AnimationGSAP (ScrollSmoother, ScrollTrigger, SplitText), Framer Motion, Locomotive Scroll

UISwiper for the testimonial carousel, lucide-react for icons

Inertia-based smooth scrollingthrough GSAP ScrollSmoother, which gives the whole page a weighted, deliberate feel.

Scroll-triggered section revealsincluding staggered card animations that fade and rise in sequence as each block enters the viewport.

Line-by-line headline animationwith GSAP SplitText, so headers assemble themselves as you arrive.

A spring-physics scroll-progress indicatorthat tracks how far down the page the visitor has gone.

A testimonial carouselfor social proof, built with Swiper.

A fully responsive layoutwith touch-scroll behaviour tuned separately from desktop.

Atomic screen 1

Atomic screen 2

Coordinating three animation systems was the other challenge. GSAP's smooth-scroll engine, Framer Motion's progress bar, and Locomotive all want to own the scroll position. I made GSAP ScrollSmoother the single source of truth and layered the others on top of the values it produced, which kept everything in sync. On touch devices I deliberately dialled the smooth scrolling back so phones stayed responsive instead of feeling laggy.

All projects Next projectMeridian Dental

Overview

TheProblem

MyRole&Approach

TechStack

KeyFeatures

Gallery

Challenges&Solutions

Outcome