FernhollowObjects for slow rooms.Stoneware, walnut, and linen made in runs of forty, restocked once a season.Shop the collectionStoneware mug · $32Walnut serving board · $58Washed linen apron · $74

Demo brand · a small-batch ceramics and homeware shop in a converted textile mill

CommerceTier: Premium

Living Catalog

An image-first commerce direction where the grid itself feels alive and every product keeps room to breathe.

Feeling: Browsing feels like walking a well-lit shop floor, not scanning a database.
Composition: Seasonal statement → living product grid → single product focus → material story → shop action.
Motion: Grid tiles settle into place, one tile at a time draws focus, and product media crossfades on attention.
Guardrail: Do not compress products into dense identical cards or animate the grid while someone is trying to shop.
Best for: Independent retail · Homeware and objects · Apparel collection · Maker commerce
Tier: Premium tier. This direction has a hand-built Builder template, so Builder renders its own composition, and it carries an extended build spec: section-by-section requirements, a type scale, an alternate palette and a motion spec.

Capability sources

magicui
motion-primitives
shadcnspace

The prompt works in any AI tool. Build this in Irie hands this direction’s agreement to Builder through a short-lived link, and Builder shows you what it imported before it generates. If that link cannot be created, Builder still opens with the prompt on your clipboard. The agreement is a structured irie.direction.v1 file you can also keep or feed to any tool that reads it.

Premium build spec

What premium means here.

Living Catalog has a hand-built Builder template, so Builder renders this composition instead of the shared generic one. It also carries the build spec below, which travels inside the downloadable agreement.

Seasonal statement
One or two lines naming what this collection is and when it is, with a single image at generous scale.
Most often goes wrongIt becomes a headline about the brand rather than about what is on the shelf this month.
Living product grid
Six to twelve products in a deliberately varied grid — one large, several medium — each showing its name and its real price without hover.
Most often goes wrongUniform tiles at identical size, which stops being a shop floor and becomes a database view.
Single product focus
One product at full scale with two or three detail crops and its material facts.
Most often goes wrongThe focus product does not appear in the grid above, so the moment reads as an advert rather than a closer look.
Material story
Where it comes from, who makes it, and what it is made of — supplied facts only.
Most often goes wrong“Crafted with care” occupies the space where a material name belongs.
Shop action
One route into buying, plus the shipping and returns truth beside it.
Most often goes wrongA discount invented to close the page.

Type scale

Display: Deliberately quiet: 2-3.25rem (32-52px) at most. In this direction the photograph is the display element, and type that competes with it flattens the whole page into a poster.
Body: 16-17px at line-height 1.6.
Meta: Product name 15px and price 15px in tabular figures, sharing a baseline. The price is never smaller or lighter than the name — typography that hides a price reads as a shop that is uncomfortable with it.

Alternate palette — Cold studio

Canvas#EFF1F0
Ink#15181A
Signal#2E5E52

Use when the goods are technical or cool-surfaced — tools, glass, steel, electronics. Bronze on warm paper makes every object look like linen, which flatters ceramics and misrepresents hardware.

Motion spec

Trigger: Tiles: IntersectionObserver at 25% visibility, once per tile. Media crossfade: pointerenter on a fine pointer, or an explicit tap. Never on scroll.
Property: Tile: opacity 0 to 1 with translateY(12px to 0). Focus media: opacity crossfade only, with no transform, so the product does not appear to shift size between shots.
Duration: Tile 420ms with a 60ms stagger across a row; crossfade 300ms.
Easing: cubic-bezier(0.22, 0.61, 0.36, 1) — the tile arrives and stops, the way a thing put down on a table stops.
Never moves: Prices, the grid's layout after it has settled (no reflow, ever), and any tile the pointer is currently resting on. Nothing animates while someone is reading a price.

Anti-patterns

Prices revealed only on hover.
Infinite-scroll tile loading that shifts the layout under a thumb mid-tap.
A carousel in the place where a grid would have shown more.
Sale banners or struck-through prices with no supplied original price behind them.
Uniform 1:1 crops applied to products of visibly different shapes.
Ambient motion that continues after the grid has settled, so the shop feels restless while someone is trying to choose.

Direction film

Watch it move.

An eight-second pass through Living Catalog — the palette, the composition, and the motion language the prompt asks for.

Living CatalogLiving Catalog

What premium means here.

Seasonal statement

Living product grid

Single product focus

Material story

Shop action

Type scale

Alternate palette — Cold studio

Motion spec

Anti-patterns

Watch it move.

Related directions.

Drop Day

Open House

First Harvest

Crate Digger

Living Catalog