The Ordinary — A clinical, ingredient-led skincare landing page with masked-line type, a working cart and search, and product-level structured data.
Client
The Ordinary
Role
Frontend engineering
Stack
Next.js 16, React 19, TypeScript, Lenis, JSON-LD
Year
2026

01Challenge

Skincare marketing is noisy. The page had to feel scientific and honest while still moving product.

Typography and restraint had to carry the argument, not stock claims.

02Approach

Slow masked-line headline reveals and clip-path image wipes are driven by a single IntersectionObserver, keeping the motion quiet and consistent.

A working cart with a count badge, a search bar, and drawer panels for menu, account, and cart — all with scroll lock — handle the commerce side.

Product-level JSON-LD with real pricing and a generated Open Graph image make the page richer in search results.

03Outcome

A landing page that reads as credible first, promotional second.

The science earns the sale.