Behind the Build: Designing the ANNEX Showcase Platform

At ANNEX, we build digital products for clients every day. But when it came to redesigning our own showcase platform, we faced a unique design challenge: how do you build a website for an agency whose primary marketing value is engineering excellence? The platform could not look like a standard template. It needed to load instantly, demonstrate cinematic motion design without stutters, and present our case studies in an interactive, responsive layout.

In this article, we share the engineering and design decisions behind building the ANNEX Showcase platform. We will review our technology selection, detail how we optimized animations for 120Hz displays, and look at our serverless database architecture.

The Architectural Stack: Next.js + Supabase + Tailwind CSS

For the core framework, we chose Next.js. The App Router allows us to statically render our case studies at build time, ensuring fast load times. For data storage, we chose Supabase. This gives us a fully managed PostgreSQL database that handles schema relationships and executes queries rapidly. Tailwind CSS was selected for styling, allowing us to keep CSS bundle sizes to a minimum.

Optimizing Animations for Smooth Interaction

High-end websites often suffer from animation stutters, especially on mobile devices or high-refresh-rate displays. To avoid this, we followed strict performance rules. We offloaded all animations to the GPU using CSS transitions and transforms rather than modifying layout properties (like height, margin, or absolute positions). We also used GSAP's ScrollTrigger with throttle hooks, ensuring smooth scroll-driven reveals without degrading responsiveness.

Responsive Layout and Grid Design

For presenting our project portfolio, we structured a flexible bento-style grid. This allows us to display varying card sizes, highlighting featured projects with large mockups while displaying standard corporate profiles in clean layouts. Each card adapts to the user's viewport, switching from a multi-column grid on desktop to a single-column flow on mobile.

Database Schema and Real-Time Sync

To keep content fresh, we configured Supabase's real-time replication on the showcase tables. When we update a project's metrics or add a testimonial inside our admin panel, the changes sync to our frontend client viewports instantly, without requiring manual builds or page reloads.

Design is the silent ambassador of your brand. Keep it clean, make it fast, and ensure it works perfectly.

— ANNEX Engineering Team

Key Performance Metrics Reached

• ✓
  Under 400ms First Contentful Paint (FCP) globally.
• ✓
  100/100 Mobile Performance score on Lighthouse audits.
• ✓
  Zero layout shifts (CLS Score = 0) during page load transitions.
• ✓
  Fully responsive layouts from 320px to 2560px displays.
• ✓
  Secure database architecture with RLS policies enabled.