Chromatic. Built from one prompt.

Fashion-week teaser — split-flap color panels cycling behind razor-thin type.

Free to start — make it yours in the chat afterwards.
Chromatic, built with Atomix
The exact prompt
Build a one-screen fashion-week teaser for a label "CHROMATIC" using React, TypeScript, Vite, Tailwind CSS. The stage: a full-bleed 4-panel color field whose panels cross-fade through a fixed palette on a timed cycle.

FONTS: "Tenor Sans" and "Manrope" (300, 500) from Google Fonts; utilities `.font-tenor` and `.font-manrope`.

COLOR FIELD (fixed inset-0 z-0, grid grid-cols-2 md:grid-cols-4): four full-height panels. Palette array (8 colors): ["#e8e4dc", "#0f0e0c", "#c33d2e", "#2b45c4", "#e0b73d", "#d8a1b8", "#274a3a", "#efece5"]. Each panel shows palette[(cycle + i * 2) % 8] where `cycle` advances by 1 every 2.8 seconds via useState + setInterval; panels transition with `transition: background-color 1.2s ease`. Panels 2 and 4 are hidden on mobile (the md: breakpoint restores them).

OVERLAY TYPE (relative z-10, h-screen, flex flex-col justify-between, mix-blend-difference text-white):
- Top bar (flex justify-between px-6 sm:px-10 pt-8, font-manrope `text-[11px] tracking-[0.45em] uppercase`): "CHROMATIC" left, "AW27 — SHOW 09" right
- Center (self-center text-center px-6): "COLOR IS" / "THE COLLECTION" on two lines in `font-tenor text-[clamp(2.6rem,9vw,7.5rem)] leading-[1.02] tracking-[0.08em] uppercase`
- Bottom bar (flex flex-col sm:flex-row justify-between items-center gap-3 px-6 sm:px-10 pb-8, font-manrope `text-[11px] tracking-[0.35em] uppercase`): left "PALAIS DE LUMIÈRE, PARIS", center "MARCH 6 — 20:00 SHARP", right an RSVP link "RSVP@CHROMATIC.STUDIO" with underline underline-offset-4

A thin progress line at the very bottom (fixed bottom-0 inset-x-0 h-[3px] z-20, bg-white/20): an inner bar `bg-white` whose width animates 0% → 100% over each 2.8s cycle (`@keyframes cycle-bar { from { width: 0%; } to { width: 100%; } }`, restarted by keying the element on the cycle number).

Type arrives with `@keyframes razor { from { opacity: 0; transform: scaleY(0.6); } to { opacity: 1; transform: scaleY(1); } }` 0.7s cubic-bezier(0.22,1,0.36,1), center first, bars 0.3s later. Single App.tsx + src/styles.css. No images, no routing.

fashioncolor-fieldminimal