Elementis Awwwards Rebuild

Year

2025

Tech & Technique

Next.js 15, React 19, Motion, Lenis, Tailwind CSS 4, TypeScript

Description

A full rebuild of the Awwwards-winning Elementis skincare brand website, focusing on cinematic video hero sections, masked text reveals, and physics-based smooth scrolling.

Key Features:

🎬 Cinematic Hero: Fullscreen video player with parallax and scroll-driven reveals
✍️ Masked Text Animations: Line-by-line clip-path text reveals and responsive marquees
🧲 Premium UX Details: Custom cursor, animated sidebar navigation, and Lenis buttery smooth scrolling

My Role

Frontend & Motion Developer

✅ Recreated the award-winning layout and scroll experience from scratch with Next.js 15 and React 19
✅ Built the motion system (Motion variants, useScroll, useTransform) and Lenis integration
✅ Engineered responsive Server/Client component splits for optimal streaming performance