Terra & Table. Built from one prompt.

A slow-burn supper-club page — ember gradient, engraved serif, ritual copy.

Free to start — make it yours in the chat afterwards.
Terra & Table, built with Atomix
The exact prompt
Build a one-screen reservation teaser for a twelve-seat supper club "TERRA & TABLE" using React, TypeScript, Vite, Tailwind CSS.

FONTS: "Cormorant" (500, 600 italic) and "Jost" (300, 400) from Google Fonts; utilities `.font-corm` and `.font-jost`.

EMBERSCAPE: page `bg-[#140d0a]`; a fixed bottom glow `fixed inset-x-0 bottom-0 h-[55vh] z-0` with `background: radial-gradient(58% 90% at 50% 100%, rgba(255,116,53,0.34) 0%, rgba(179,58,20,0.18) 45%, transparent 75%)`. Above it, 18 ember particles: tiny divs (`w-[3px] h-[3px] rounded-full bg-[#ffb27a]`) rising on `@keyframes ember { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-58vh); opacity: 0; } }` — per ember set inline left = `(i * 53 % 100)` %, duration `(6 + (i % 5))` s, delay `(i * 0.7)` s, infinite.

CENTER (relative z-10, h-screen flex flex-col items-center justify-center text-center px-6, text-[#f2e6d8]):
- Small mark: "EST. MMXXIV — TWELVE CHAIRS" in `font-jost text-[10px] sm:text-[11px] tracking-[0.5em] uppercase opacity-60`
- Wordmark: "Terra & Table" in `font-corm italic text-[clamp(3rem,10vw,7.5rem)] leading-none tracking-[-1px] mt-6`
- Divider: a 1px, 120px-wide horizontal rule `bg-[#f2e6d8]/25 mt-8`
- Ritual copy: "One table. One fire. Fourteen courses decided the morning of, by what the tide and the market surrender." in `font-jost font-light text-sm sm:text-base max-w-md mt-8 leading-loose opacity-80`
- Sitting details (mt-8, font-jost `text-[11px] tracking-[0.4em] uppercase opacity-60`): "FRI + SAT — ONE SEATING — 19:30"
- CTA (mt-10): "Request a chair" in `font-jost text-[13px] tracking-[0.3em] uppercase border border-[#f2e6d8]/30 rounded-full px-9 py-3.5 hover:bg-[#f2e6d8] hover:text-[#140d0a] transition-colors duration-300`

CORNER DETAILS (fixed z-10, font-jost `text-[10px] tracking-[0.35em] uppercase opacity-40`, all four corners with p-6): top-left "N 55.6761°", top-right "MENU Nº 41", bottom-left "DOWN A LANE OFF GRÅBRØDRETORV", bottom-right "NO PHONES AT THE TABLE".

Everything materializes slowly: wordmark with `@keyframes engrave { from { opacity: 0; letter-spacing: 10px; filter: blur(8px); } to { opacity: 1; letter-spacing: -1px; filter: blur(0); } }` 1.6s ease-out; other blocks fade in sequence 0.3s apart. Single App.tsx + src/styles.css, no routing.

restaurantemberserif