Coming-soon countdown — a wide Solari split-flap board for Acme 2.0 where the headline, name, and live days/hours/minutes/seconds all live inside the grid as a single hero section. Flaps track the host light/dark tokens and blank cells recede into the page so the board sits without a bezel, with mechanical flips on power-up and every second as digits change. New projects only (shadcn init --template next).
@uiception
import type { Metadata } from "next"
import { GeistMono } from "geist/font/mono"
import { GeistSans } from "geist/font/sans"
import type { ReactNode } from "react"
import { site } from "../lib/site"
import "./globals.css"
export const metadata: Metadata = {
title: `${site.headline} ${site.name}`,
description: `${site.headline} ${site.name}`,
}
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html
lang="en"
className={`${GeistSans.variable} ${GeistMono.variable} h-full antialiased`}
suppressHydrationWarning
>
<body className="flex min-h-svh flex-col bg-background font-sans text-foreground">
{children}
</body>
</html>
)
}
New Next.js project only (same flow as https://ui.shadcn.com/create): npx shadcn@latest init --template next -y "https://uiception.com/r/landing-page-v3.json"
This scaffolds Next.js + shadcn, then installs the full site.
Edit the headline, name, unit labels, and countdown targetDate in lib/site.ts — every field renders as flaps on a fixed 23-module board, nothing floats outside it. The headline is the alignment origin; the name and each countdown row (number, empty flap, label) hang off the same word-gap column (see lib/board.ts). Flaps mix from the host light/dark tokens; blank cells recede so the board needs no bezel. Anatomy in styles/solari.css.
Preview at /view/landing-page-v3.
