Aiman Uddin

Posted on May 20

I built a cinematic dark luxury coffee shop template with Next.js, GSAP & Three.js — here's how (and it's on Gumroad)

#showdev #webdev #javascript #nextjs

Why I built this

Most coffee shop websites look the same — a hero image, a menu, a contact form.

I wanted to build something different. Something that feels like walking into a dimly lit, jazz-filled espresso bar at midnight.

So I built Noir Espresso — a cinematic, dark-luxury coffee shop template using Next.js, Tailwind CSS, GSAP, and Three.js.

🔗 Live demo: https://noir-espresso.vercel.app
🛒 Get it on Gumroad ($29): https://4701123641931.gumroad.com/l/fkrwq

What's inside the template

Here's what makes Noir Espresso different from a generic coffee shop template:

1. Three.js animated background

Instead of a static hero image, the homepage features a subtle 3D scene built with Three.js. It adds depth and atmosphere without killing performance.

// Minimal Three.js setup used in the hero section
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

2. GSAP scroll animations

Every section reveals with smooth, cinematic GSAP animations triggered on scroll. No janky CSS transitions — everything feels intentional.

gsap.from(".hero-text", {
  scrollTrigger: ".hero-text",
  y: 60,
  opacity: 0,
  duration: 1.2,
  ease: "power3.out"
});

3. Next.js App Router + Tailwind CSS

The entire project uses the Next.js App Router for clean routing and Tailwind CSS for rapid, utility-first styling. The dark palette is built around custom Tailwind config.

// tailwind.config.js (excerpt)
extend: {
  colors: {
    noir: {
      bg: "#0a0a0a",
      accent: "#c9a96e",
      text: "#f5f0e8",
    }
  }
}

4. Fully responsive

Tested on mobile, tablet, and desktop. The cinematic feel holds even on small screens.

Tech stack

Tool	Purpose
Next.js 14	Framework (App Router)
Tailwind CSS	Styling
GSAP + ScrollTrigger	Scroll animations
Three.js	3D hero background
Vercel	Deployment

Who is this for?

This template is perfect for:

Freelancers building sites for coffee shops, bars, or luxury brands
Developers who want a premium-looking starter for client projects
Anyone learning how to combine GSAP + Three.js with Next.js in a real project

What's included ($29)

Full Next.js source code
GSAP + Three.js integration
Custom Tailwind dark theme
App Router structure
Responsive design
MIT License — use it in client projects

What I learned building this

Combining GSAP and Three.js inside a Next.js app requires some care:

Three.js needs "use client" — the renderer depends on window, so keep it in a Client Component.
GSAP ScrollTrigger needs cleanup — always return a cleanup function in useEffect to avoid duplicate triggers.
Tailwind + dark themes — extend the config with semantic color names (like noir-bg) so you're not writing bg-zinc-950 everywhere.

DEV Community