Chiaro UI

Chiaro is a Framer template for perfume houses, candle makers, jewellers and other luxury studios that sell atmosphere as much as product. It takes its name from chiaroscuro, the painter's art of light against dark. Every page is lit by one warm light in a field of shadow. The type is high-contrast Bodoni, and nothing on the page is a stock photo.

What makes it feel alive:

- A bottle made of 12,000 lights. The hero is a Three.js particle sculpture. Its points drift into a perfume bottle and part around the cursor.

- Scroll that tells a story. On Home the sculpture stays pinned while you scroll, morphing from citrus to rose to smoke as the notes change from top to heart to base.

- Candle smoke on the GPU. A WebGL shader draws drifting smoke lit by a flickering candle that follows the pointer. It sits behind the page headers, the CTA and the 404.

- Tabs that reshape the scene. The Harvest, Distil, Age and Bottle tabs each morph the particles into a new form.

- A quiet finish. Headlines reveal letter by letter, lists fade in as you scroll, a ticker of ingredients drifts by, and the FAQ opens smoothly.

What's included

- 8 pages: Home, Collection, Fragrance (CMS detail), Maison, Journal, Article (CMS detail), Atelier and a custom 404.

- 2 CMS collections:

- 2 configurable code components:

- Particle Sculpture: shapes, cycle, scroll or static mode, point count, colours and cursor interaction.

- Candle Smoke: colours, speed, density, light radius, flicker and cursor follow.

- 8 reusable components with variants:

- Nav, with a full-screen phone drawer

- Footer

- Button, in 3 styles

- Fragrance Card

- Journal Card

- Process tabs

- FAQ Item

- Submit Button, with pending and success states

Perfect for: niche perfume and fragrance brands, candle and home-scent studios, jewellery and watch ateliers, wine and spirits houses, skincare, and boutique hotels or restaurants with a moody identity.