Concept · Digital product · Fitness · 2026

Adam Yu: his transformation, told as you scroll.

An English-language landing page to sell the Aesthetics Blueprint, Adam Yu’s training guide: his story told through the scroll, the guide’s six modules, the app, his clients’ results and the purchase.

Client: Adam Yu
What we did: Creative direction, design and development
Technology: GSAP and ScrollTrigger
Language: English

A scroll through the landing page, recorded on desktop

The challenge

Adam sells a digital training guide. His best argument is his own story: what changed between ages 13 and 20, training naturally.

The challenge was to make that story land in seconds and to point everything to one place: the purchase, without relying on a link in his social media bio.

The idea: the number leads

White, black and a wide, heavy typeface, like a sports magazine. The number on the scale is the hero headline, and it changes as you scroll.

Then, what you’re buying: the guide’s modules, the app and results from people already using it. The buy button is always within reach.

The moments

Landing page hero: the number 186 set large with Adam behind it and the timeline above — Hero · the number changes as you scroll

Adam Yu in sunglasses below the title Aesthetics Blueprint — The product · Aesthetics Blueprint

Bio with three figures: plus 100 pounds, 7 years of training and from age 13 to 20 — His story, in three figures

The guide’s modules on large numbered cards that scroll horizontally — The six modules, side-scrolling

The «Built for simplicity» section with the guide open on a phone — The app · web, tablet, iOS and Android

The «Fast track your path to aesthetics» closing section with the buy button — The purchase

On mobile

What’s included

01A hero where Adam’s weight and photo change as you scroll, from age 13 to today.
02A bio with three figures you take in at a glance.
03The guide’s six modules in a horizontal carousel.
04The app: which devices it runs on and what it looks like inside.
05Results from his clients and the video of his transformation.
06A sticky buy button and a closing section that leads to the purchase.

Key technique

01The story is the scroll
A scrubbed timeline: as you scroll, the number counts and the photo changes, so you see the transformation instead of reading about it.
02Horizontal inside vertical
The modules pin to the screen and slide sideways while you keep scrolling down.
03A single file
All 19 photos are embedded as WebP: 1.1 MB in total, with no server dependency.

Photos, copy and results: Adam Yu. Landing page design and development: xstdio.

Selling a program or a guide? Here’s how yours could look.

Creator websites