MOONRACCOON Case Study · Design & Development
We build Moonraccoon as a live coming-soon splash. Three visual variants, an original mark, and cursor parallax that turns off for reduced motion.
The product is not shipped, so the page holds the domain and a visual system. Three variants let us try them on real visitors.
The public site is live at moonraccoon.xyz. moonraccoon.org redirects to it. Each request picks order, log, or decal at random unless you pin one with a query string. The order variant is deep navy and brass, Cinzel and Hanken Grotesk, the same pair we use here. Log and decal bring their own type.
How it's built
There is no backend on this page, and it is not a Radix product yet.
The route is force-dynamic. Each request gets a random variant unless you pin one with ?v=order, log, or decal.
A client component nudges the raccoon-in-the-moon mark toward the pointer. prefers-reduced-motion skips the listener.
next/font loads Cinzel, Hanken Grotesk, Libre Caslon Text, DM Mono, and Anton. No layout shift from a late Google Fonts stylesheet.
Canonical .xyz on Vercel. .org redirects. Nameservers on Cloudflare. A 1200×630 OG image ships with the app.
Next.js 15 · TypeScript · next/font · cursor parallax · reduced-motion · Vercel.
What this shows
The brand system and the motion are live. It is not a Radix product yet.
We design the brand system and ship the page.
