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

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:

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

Links

• Live demo: https://noir-expresso.vercel.app/
• Buy on Gumroad ($29): https://4701123641931.gumroad.com/l/fkrwq
• GitHub: https://github.com/Aiman03-del/Noir-Expresso

Also launching today on Product Hunt — would love your support! 🚀

Drop any questions in the comments — happy to help you customise it for your next project.