Rucs0/nocturne-ember: Ember — a free, dark-first Next.js 16 + Tailwind v4 starter with a full motion system and zero image assets. MIT.

Ember — a free, dark-first Next.js 16 + Tailwind v4 starter with a full motion system and zero image assets. MIT. - Rucs0/nocturne-ember

Summary

Ember is a free, MIT-licensed Next.js 16 starter template focused on dark-mode design and motion primitives. It bundles Tailwind v4 with a CSS-first token system and ships a single demo page that exercises scroll reveals, count-up numbers, a cursor-following spotlight card, and a CSS marquee. The project is explicit about being image-asset-free, building visual interest entirely from CSS and data.

What it is useful for

Ember fits engineers who want a production-shaped foundation rather than the typical demo-heavy Next.js starter. It is useful when you want motion built in from the start (Framer Motion plus CSS animations), with prefers-reduced-motion already respected both by the CSS animations at the bottom of globals.css and by the Motion components via useReducedMotion.

It also suits projects that need a centralized design system: every brand color lives in app/theme.css as oklch() values, and changing the --brand* hues propagates to gradients, glows, and accents. The included primitives cover the small UI surface most landing pages need — a Radix-based accordion and button, and a next-themes dark/light toggle with no flash on load.

The animated status board is a notable example of the asset-free approach: the README describes it as built entirely from CSS and data, which is useful for teams that want to avoid licensing image assets for placeholder content.

How engineers can use it

The README documents a three-command quick start:

git clone https://github.com/Rucs0/nocturne-ember.git
cd nocturne-ember && npm install && npm run dev

There are no environment variables. Production builds use npm run build and npm run start; npm run lint runs ESLint.

To customize, the README recommends, in order of impact: edit lib/site.ts (product name, tagline, nav, footer, CTAs), then app/theme.css for the brand palette, then app/layout.tsx for fonts via next/font. Section content lives in components/sections/; each section is self-contained and app/page.tsx is just a list of them, so deleting unwanted sections is safe.

Two documented gotchas matter when customizing. In Tailwind v4, gradient text must use the background-image: longhand because the minifier merges the background: shorthand and resets background-clip: text, silently breaking gradient headlines — the .text-gradient-brand class in globals.css shows the working pattern.

The README also flags a clear content limitation: the company, the customer names in the logo marquee, and the numbers on the status board are all invented, with an explicit warning not to ship invented social proof. Replace the copy or delete those sections before going live.