Petrichor

Inspiration

Most product pages just show a static photo of a bottle. We wanted a perfume site that felt like walking into an actual boutique — where you could pick up a flacon, turn it in the light, and watch it release its scent. "Petrichor" — the smell of rain on dry earth — felt like the right name for something built entirely out of light, glass, and motion.

What it does

Petrichor is an immersive 3D showcase for a fictional perfume house, featuring four fragrances: Aube (rose, peony, dawn), Violette Noire (violet, suede, smoke), Solstice (honey, amber, resin), and Verdance (fig leaf, moss, rain).

• The hero bottle tilts as you move your cursor and can be dragged to spin freely
• Each bottle on the collection shelf tilts toward your cursor, lifts, and glows with its own signature color
• Hovering a bottle releases a cloud of gold particles along with its named ingredients, drifting outward like scent itself
• A custom OKLCH color palette, serif/sans font pairing, and animated background layers (aurora, veil, grain) tie the whole thing together into one cohesive, boutique aesthetic

How we built it

Built with React 19, TanStack Start, Vite, and Tailwind CSS v4, with shadcn/ui (Radix primitives) for accessible base components. All the "3D" motion is achieved with pure CSS 3D transforms — perspective, rotateX/rotateY, translateZ — driven by pointer position in React state. No WebGL or 3D engine was used, which kept the site fast and lightweight while still feeling tactile and dimensional.

We used Lovable, an AI-assisted app builder, to iterate quickly on the design and interactions, which the hackathon rules explicitly welcome.

Challenges we ran into

Getting the hover "ingredient cloud" to feel organic rather than mechanical took a lot of tuning — particle count, stagger delays, and drift distance all needed hand-adjusting until it read as scent rather than confetti. Deployment was also a

Built With

• css3
• radix-ui
• react
• shadcn-ui
• tailwindcss
• tanstack-start
• typescript
• vite