48hAI Chat template is free for a limited time. Grab it now →

Introduction

Everything you need to know to get started with Opale UI.

What is Opale UI?

Opale UI is a collection of production-ready Next.js templates designed for developers who care about craft. Each template is a complete, standalone app you can download, customize, and deploy in minutes.

Available Templates

  • Remind: Electron desktop app with AI chat, activity briefings, and mesh gradient design system
  • Flux: Agency landing page with WebGL liquid simulation hero and scroll-linked text reveals
  • Mugen: Minimal agency site with persistent canvas layers and scroll-triggered text morphing
  • OCI: Premium consultancy site with 3D parametric wireframe hero and halftone overlays
  • Tiwis: Strategy consulting page with aurora background and smooth Lenis scrolling
  • Forge: B2B SaaS landing page with sharp typography and conversion-focused layout
  • OpenClaw: AI product page with WebGL fluid simulation and terminal aesthetics
  • Sentinel: Defense-tech SaaS with command radar, interactive 3D globe, and binary matrix
  • AI Chat: Full AI chat interface with thinking indicators and agent step timelines
  • Folio: Developer portfolio with living card system, 3D tilt, and scroll-driven animations
  • Intention: Personal brand site with 3D noise field, text scramble, and magnetic interactions

Browse all templates and live previews on the templates page.

Tech Stack

Every template is built with:

  • Next.js 16 with App Router and Server Components
  • React 19 with TypeScript (strict mode)
  • Tailwind CSS v4 with CSS-first configuration
  • anime.js v4 for interruptible, physics-based animations
  • Three.js / React Three Fiber for 3D and WebGL effects
  • Geist font family (sans + mono)

Design Philosophy

Every template follows a strict craft standard inspired by the best in interface design. Animations are interruptible and physics-based, never decorative CSS transitions. Hover states are gated behind @media (hover: hover). Colors use a 12-level gray scale with WCAG AA contrast. Scroll reveals use staggered entry with follow-through easing.

Getting Started

Getting Help