Concept website for the Razer Blade 16, built to demonstrate cinematic scroll-driven web experiences for premium hardware brands.
The goal was to create a product site that feels like a film — not a catalog. Every section was designed to build tension and release through scroll, typography, and motion.
Built with GSAP 3.12 + ScrollTrigger for all animations, Canvas API for video frame scrubbing on the hero, and Lenis for smooth inertia scroll. Prototyped with Google Antigravity + Stitch.
What's inside:
— Cinematic hero with gamer character, glassmorphism card, live HUD data
— Scroll scrubbing hero — notebook rotates frame by frame with scroll
— Hardware section with flashlight cursor effect and parallax
— OLED section with stats and motion
— Specs comparison with horizontal scroll gallery
— Full CTA and footer
Concept only — not affiliated with Razer Inc.:
0
102
Same brand. Different world.
Took HandSkill's website from outdated to premium — without changing who they are.
The old site had the right ingredients: strong brand colors, real product photography, clear navigation. But it felt stuck in 2015. No hierarchy, no conversion focus, no visual confidence.
The redesign kept the identity and elevated everything else:
→ Editorial hero layout with product staging
→ Typography that commands attention
→ Social proof bar above the fold
→ Clear CTA that actually converts
Built with HTML, CSS, and AI-assisted design — delivered fast, without sacrificing craft.
Before → After. Swipe.
What do you think — which element made the biggest difference, the typography or the product staging?"
#webdesign #redesign #brandidentity #beforeandafter #landingpage #uidesign #cosmetics
3
1
113