TMM World

The client envisioned an [[Awwwards]]-level agency website — wanting an expressive, dynamic digital presence that stands out with bold motion, high visual flair, and immersive layout transitions.

The Challenges

• No prior benchmark: I hadn't built an Awwwards-style experimental website before, which meant stepping far outside standard web design patterns
• Performance bottlenecks: Heavy scroll effects and multi-element animations caused significant lag and frame drops during early tests
• Cohesion vs. complexity: Balancing distinct interactive sections without making the overall experience feel cluttered or unoptimized

Modular Deconstruction

• Designed the core layout and typography systems in Figma before touching code
• Divided the entire experience into self-contained sections, individual pages, and targeted animation layers — building each component in isolation before stitching them together
• Rebuilt layout flows using Next.js and Tailwind CSS for crisp component architecture

Performance Optimization

Visual Impact

• Combined bold agency typography with deliberate pacing and high-contrast dark aesthetics to deliver the ambitious visual identity the client wanted.

Technical & Creative Growth

• Break down the complex: Tackling an ambitious Awwwards-level brief becomes straightforward when broken into atomic parts and assembled step by step
• Performance is part of design: Stunning animations fail if they lag — optimizing render pipelines and animation lifecycles is just as crucial as visual styling
• Confidence with high-end motion: Proved that stepping into unfamiliar creative territory leads to significant jumps in frontend capability

Future Enhancements

• Experiment with WebGL and interactive shader backgrounds for deeper agency immersion
• Introduce custom cursor trail interactions for desktop viewports