SALMI&COMPANY
Afghani OilBrand & commerce

From the bottleto the storefront.

A botanical hair-care brand, brought to life through product imagery, original films and a working Shopify store.

Visit the store Live on Shopify
Brand directionShopify developmentProduct films
buyafghanioil.com
Afghani Oil storefront, with the original green bottle and terracotta dropper beside its product introduction
The actual storefrontDesktop capture · 7 October 2026
01The brand

Forest green.Terracotta. Stone.

The original bottle sets the palette: matte green, a terracotta dropper and a palm emblem. That same identity carries through the oil, the ampoule protocol and the storefront.

Original bottle macro Higgsfield · October 2026
One identity, across every detail

A close study of the bottle in warm light, followed by the source product photographs. The shape, dropper and lettering stay consistent across the presentation.

Front view
Three-quarter
Label
Protocol box
Original product references · 50 ml oil and ampoule protocol
02The live storefront

Made to browse.Ready to choose.

Explore the products, compare the rituals and select an offer. These recordings show the real storefront on desktop and mobile, including the product and button changing with each selection.

Choose a ritualDesktop · recorded 8 October 2026
The mobile storeOriginal homepage
Find your ritualLive offer selection
Original Hair Oil product page
The oil, in detailDesktop product page · 20 September 2026
Ampoule protocol product gallery
The companion protocolTablet product page · 20 September 2026
Explore buyafghanioil.com Dated store captures. Customer reviews and photographs are omitted; displayed prices belong to the captured version.
03Design and implementation

An approved design,a live site, both dated.

Two genuine, separately dated artifacts. In September, a Claude Design homepage redesign was approved as the reference for the chapters below the hero: “Feed the scalp. The rest follows.” The owner's binding brief kept the existing hero as it was. The storefront shows the same product identity and arch composition with its own October copy.

Approved Claude Design reference · SeptemberDesktop 1440 artboard. The ranking and guarantee lines visible in the reference are historical copy, not verified claims.
Published storefront · OctoberThe live hero, kept by the owner's brief. Same bottle, same arch, October copy.
July
Campaign stills and the first film. Twenty-five stills selected; film AO-VIDEO-01 approved on 23 July, a Seedance 2.0 production through Higgsfield.Dated asset map · approved film
8–10 August
Claude Code on the storefront. A design transfer audit; a motion runtime, scrub.js; a one-line guard, if (!this.heal()) return;, added to an animation tick that previously checked only this.dead; ao-fx.js with reduced-motion and Shopify lifecycle handling.Recorded actions · owner direction: “DO NOT rebuild the Shopify implementation from scratch.”
11 August
A live-first hybrid. The owner rejected a full visual migration and asked for the live site to lead, with design brought in below it.Owner decision
September
Design v5 approved. The Claude Design homepage redesign, desktop 1440 and mobile 390, one narrative, approved for the chapters below the existing hero. Product-page QA captures on 20 September.Approved reference · hero explicitly kept
October
Captures and the macro. Storefront recordings on 7–8 October; the approved macro shot on 8 October.Real captures · one paid generation, 18 credits
Owner direction · 8 August 2026
“Preserve desktop, mobile, interactions, animations, live HTML copy, and placeholders.”
Claude Code

Retrieved the design and wrote a transfer audit before touching the storefront.

Recorded repair · 9 August 2026
if (!this.heal()) return;
Claude Code

Added to an animation tick that previously checked only this.dead. The recorded change is the one line; no performance claim is made for it.

Who did what: Claude Design for the September exports; Claude Code for the August transfer, motion runtime and repair; Codex and the Shrine commerce foundations for the storefront's commerce layer and later integration; Higgsfield for the July film and the October macro. No single tool made the store.

04Creative production

One object.An entire world.

The July film and the campaign stills built the brand's world around a single bottle: stone, raking light, a ritual at the mirror. The environments are generated; the product layers are the real photographs, locked. The people in the stills are illustrations, never customers.

Ritual
Concern
Protocol
Monolith
Ampoule
Plan

July film: Seedance 2.0 through Higgsfield, 8 s, approved 23 July · stills: generated environments with locked supplied product layers · synthetic people are illustrations, not testimonials · the mobile film was rejected and is not used

Visit live website → buyafghanioil.comBuilding with Claude →