The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Successfully converted a complex, modern Figma design into a fully functional, high-performance web application. The core focus of this project was translating a premium UI/UX concept into pixel-perfect, interactive code while ensuring fluid responsiveness and advanced behavioral animations.
By leveraging a modern frontend stack, I engineered a highly visual and seamless digital experience designed to work flawlessly across all device layouts.
Key Contributions & Features:
Component-Driven Architecture: Built the entire platform from scratch using React, ensuring modular, clean, and reusable code for maintainability.
Pixel-Perfect Utility Styling: Utilized Tailwind CSS to map individual design tokens directly from Figma, creating a highly accurate, fully responsive grid layout and adaptive typography.
Cinematic Visual Effects: Implemented GSAP (GreenSock Animation Platform) to orchestrate complex timeline-based scroll triggers, entry transitions, and dynamic micro-interactions that elevate user engagement.
Smooth Inertial Scrolling: Integrated Lenis Scroll to decouple natural browser scrolling from rendering, delivering a silky-smooth, premium user experience that pairs perfectly with the GSAP animations.
Cross-Browser Optimization: Refactored layout rendering to maintain uniform performance, consistent asset delivery, and fast loading speeds across various browsers and viewports.
Tech Stack:
HTML, React, Tailwind CSS, GSAP, Lenis Smooth Scroll
Skills: figma to react, Front-End Development, +7 skills
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
Custom liquid interaction built in Framer.
Turning a static hero into a responsive visual surface through cursor-driven distortion.
How do you adapt the cursor-driven effect for touch screens?
Created a motion for Rekann using Astra 6 + After Effects + Figma - exploring a faster workflow from storyboard to an editable motion foundation.
The 404 was treated as a proper page rather than a fallback state.
The number is constructed as an architectural drawing. The 4 and the 0 are formed from walls at true thickness, with furniture laid out inside the resulting rooms and dimension strings running along both edges. It sits inside the same drafting system as the rest of the site rather than borrowing a display typeface.
The error message then repeats. Instead of a single dialog, identical windows cascade back across the canvas, each one carrying the same 404 notice. It reads as a system throwing an unresolved warning over and over, which is the exact behaviour Heron is built to prevent inside a model.
Error pages are never in the brief. They're a good measure of whether a team understood the product or just styled it.
Treating a 404 as an actual page instead of a dead end is such a good instinct, where did the architectural drawing idea come from, personal interest bleeding into the work?