NURI ATELIER — a cinematic site for an independent perfume house

A cinematic brand site for an independent perfume atelier in Seongsu-dong, Seoul. Perfume brands often collapse into product grids. This project does the opposite: before selling a bottle, it has to carry the air and the time of the workshop.

The problem

Niche perfume sites usually stop at product shots and note lists. What only an own site can do is bind the tasting ritual, the reason for small-batch making, and a visit booking into one world. The scroll-as-film structure of Yebisu was translated for a perfume house.

Design approach

Burgundy, gold and ink black set the palette, with an English serif display against Korean sans-serif. The home is six sections — hero, slogan, story, secret slides, atelier, visit CTA. On desktop it is a sticky scroll film; on mobile the same copy stacks vertically.

Art direction when the imagery does not exist

There is no real atelier to photograph, so every still was generated with Grok Imagine. Hero, four signature bottles, the compounding bench, the tasting room and the wordmark share one lighting and amber-glass tone. The footer states that no real people or places are depicted.

Signature interactions

• Lenis smooth scroll — duration 1, updated in the same loop as GSAP ScrollTrigger.
• Slogan gold fill — SplitType breaks lines, then scroll scrub fills the type.
• Secret slides — on desktop a ~500vh sticky section pushes the title away and snaps three scents vertically.
• Custom VIEW MORE cursor — only on fine pointers, hidden below 1024px.
• Visit form — explicitly a demo; nothing is sent.

Engineering

Next.js 16 static export, React 19, GSAP, Lenis, SplitType, deployed to Cloudflare Pages as ononc-nuri-atelier. Motion uses transform and opacity only, and autoplay stops under prefers-reduced-motion.

Result

Live demo: ononc-nuri-atelier.pages.dev

This is a fictional-brand demo built by ononc to show production quality. It is not a real business, and the forms do not send anything. The photography is generative-AI imagery created for this fictional brand; the site footer states that no real people or places are depicted.