Back to work

Live Product

CLO AI

HeyClo / CLO AI - Animated Product Landing Page

Developed an animated landing page experience for HeyClo.com with smooth scrolling, responsive layouts, polished interaction design, and a loading experience tested across devices.

View Live Site
HeyClo / CLO AI - Animated Product Landing Page preview
ImpactA fully animated product landing page with smooth scrolling and premium storytelling.

Problem

The product needed a premium animated landing experience that stayed smooth, responsive, and performance-conscious across screen sizes.

Project read

HeyClo / CLO AI was built as a product landing page where motion, responsiveness, and page quality mattered as much as the visual direction. The work focused on turning the product story into screen-friendly sections with smooth scroll behavior and polished interaction design.

01

What I delivered

The work stayed focused on the real product surface: layout, motion, responsiveness, and launch quality.

Developed the fully animated landing page experience.

Built responsive layouts and screen-friendly sections.

Created smooth scrolling and polished interaction behavior with Framer and Lenis.

Tested responsiveness, animation behavior, loading experience, and Lighthouse performance.

02

How it was built

The implementation choices were shaped around clarity, controlled interaction, and a page that holds together across screen sizes.

Used Framer for interaction and section motion so the page could feel premium without becoming random.

Used Lenis to make scrolling feel fluid and controlled across the landing flow.

Checked the page across devices so the animation system did not break the responsive layout.

Improved page quality toward 80-90+ Lighthouse scores across key checks.

Challenges

The parts that needed judgment.

These are the design and implementation decisions that kept the page useful, responsive, and polished instead of just animated.

01

Motion without breaking usability

The page needed a fully animated product story, but the motion still had to stay readable and screen-friendly.

Response

I kept the animation tied to section pacing, smooth scrolling, and interaction states instead of adding disconnected decoration.

02

Responsive animation behavior

Animations that look polished on desktop can easily feel cramped or unstable on mobile.

Response

I tested responsiveness and animation behavior across devices, then adjusted the sections to stay usable on smaller screens.

03

Performance quality

A motion-heavy page still needed strong Lighthouse and loading behavior.

Response

I tested loading experience and Lighthouse performance, improving the page quality to the 80-90+ range across key checks.

Outcome

What the work left behind.

A fully animated product landing page with smooth scrolling and premium storytelling.

Delivered a live animated product landing page.

Created a smooth scrolling product storytelling experience.

Improved responsiveness, animation behavior, loading quality, and Lighthouse checks.