I received a static design in Figma, along with animation references from my design partners.

The fully responsive, pixel-perfect website was built in four weeks, followed by one week of debugging.

Current time display. The current time is displayed in HH:MM:SS format in the GMT+0 timezone.

3D Particle Sphere. A stunning 3D sphere composed of 30,000 shimmering particles, with increased distribution at the poles. The sphere moves toward the user on scroll, creating an immersive depth effect.

Step-by-Step Animation: Animated circles illustrating a step-by-step card progression synced with progression bar.

Performance Issues on Older Machines. Some animations were jumpy because certain frames were skipped by the browser. Solution: Debugged animations using Chrome Developer Tools, identified performance bottlenecks, and optimized animation code.

Heavy Use of Animation Libraries. Multiple libraries increased load times before the site was fully rendered. Solution: Implemented asynchronous and lazy loading for libraries to improve performance.

Large Number of Assets Slowing Down Loading Speed. Solution: Compressed assets, saved static images in .WebP format, and enabled lazy loading for assets on scroll.

Grid Gallery Responsiveness: Converting the grid gallery into a slider for smaller screens. Solution: Used JavaScript to initialize the slider gallery dynamically based on viewport width.

Webflow

Three.js

GSAP (animation library)

Slick.js

Check out the live website.