The making of
one gram.

The concept

Crocus Fields makes the visitor perform a product story as labour. The page opens before direct sun reaches a saffron field and leads with people bent over the crop, not a jar or sales claim. Field notes, picker names, row numbers, grading codes and recipe counts make beauty credible through evidence.

The premise is tactile: saffron feels expensive only after a thumb counts what one gram requires. Gather 1 flower, remove 3 stigmas, then watch the ledger move by just one hundred-and-fiftieth. That nearly invisible movement is the argument.

The visual machinery

Pick, carry, pluck

makeField() in main.js plants 22 accessible buttons at deterministic points over SVG furrows. pickFlower() parts the petals, sends a CSS bloom toward the macro panel and locks the field. Captured Pointer Events give mouse, pen and touch the same drag path; keyboard activation calls pluckStigma() directly.

completeBloom() applies flowers ÷ 150, updates the ARIA progress value, the cross-panel readout and a 150-notch tally. “Next furrow” replants the field without erasing the session.

Dawn, cloth & thread

Local field.jpg receives indigo veils and a gold horizon line. Holding #lightProof adds .is-daylight, warming and bleaching that same frame to show why the harvest outruns direct sun. The remaining visuals are CSS or inline SVG: macro petals, basket weave, scale pans, fingerprint ridges, glass vials and a crimson timeline.

Generated image, local delivery

The establishing frame was created with GPT Image 2 through Higgsfield. The collection’s motion workflow carries the locked still into Kling 3.0 for a matching ambient loop, then stores exports locally beside the site. This room’s supplied /assets/gen/saffron/field.jpg is loaded directly, with declared dimensions and no outside request. Every other visual remains code-generated.

The fraud test

The water button toggles .is-testing on #testBench. CSS plumes make dyed fibre flood quickly while genuine threads release gold slowly and stay red. The timer stops when the page is hidden; prefers-reduced-motion collapses ambient movement.

Palette & type

Indigo is structural cloth. Crocus violet carries petals; dawn rose softens transitions; crimson marks consequential actions; gold belongs to weighing, proof and warm water.

Instrument Serif carries agricultural romance in asymmetric italics. Manrope keeps facts, controls and lot codes unambiguous. Both are self-hosted.

Reproduce this

Give an AI agent a material, a real conversion ratio and one bodily action that reveals it. Require a dominant dark field, one botanical colour, one narrow accent and code-built evidence. Name exact responsive widths, accessibility constraints and reduced-motion behaviour before polish.