PARTI — CASE STUDY
PROJECT TYPE
Self-initiated concept build on the Okoro Vale (Parti) Framer template. Fictional studio and project.
MY ROLE
Design engineer · Content modeling · Interaction design · Code direction · Device QA
TOOLS
Framer (CMS, breakpoints, code components) · React · TypeScript · Framer MCP API · Headless Chrome · AI image generation
SCOPE
Map layers · Project timeline · Material pages · Journal covers · Phone layouts
View live website ↗
Yucca Valley House project page, desktop and phone.
THE BRIEF
The template shows finished buildings well. It had no way to show site analysis, community process, or material choices, which is where landscape, urban, and sustainability work actually lives. Everything had to be additive: no existing field renamed or removed, and projects that don’t use the new sections had to render exactly as before.
01
Map Layers
Name, description, transparent overlay image, color, and order. Drives a site plan visitors can switch layers on and off.
02
Timeline Events
Title, date, phase (Listening, Design, Construction, Occupancy), description, and image.
03
Materials
Name, slug, deck, photo, source, why chosen, how it ages, and a sustainability note, each with its own detail page.
04
Self-hiding sections
Each section is a collection list filtered by the project’s reference field, and hidden when that field is empty.
Tradeoff: timeline events are referenced from Projects rather than pointing back, so hiding an empty section is one binding, at the cost of editors linking events from the project side.
THE LAYER TOGGLE
A Framer code component can’t read a CMS multi-reference list as a prop, so one component can’t receive all of a project’s layers. The collection list stays the data source; a LayerOverlay and a LayerChip sit inside each repeated item, and a tiny LayerStore module (a Set plus useSyncExternalStore) keeps chips and overlays in sync. Chips use aria-pressed and a 44px minimum hit area; overlays fade over 250ms.
All layers on
Two layers toggled off
Timeline, single column on phone
Verified on the live site in headless Chrome at 390px with touch emulation: tapping two chips set aria-pressed to false and dropped those overlays to opacity 0, while the third stayed on.
Known limits: layer state resets on reload, and the phase label uses four conditional text layers because an option field can’t bind to text directly.
Site plan with topography, water flow, and planting overlays on desktop.
THE EXPERIENCE
Timeline. Date, text, and image rows grouped by phase.
Material tiles. Kicker, headline, two-line deck, and Read more, with the whole tile as the link.
Material page. Kicker back to the project, deck, byline, full-bleed photo, and a More materials list that excludes the current item.
Journal. Cover images added to every entry.
ITERATION + RESPONSIVE
On an iPhone, material labels were 14px and body 17px, so the hierarchy was inverted, and tiles had no sign they were links. I rebuilt both in a news-app editorial pattern inside the template’s own fonts and colors: new Kicker and Card headline text styles, tracked section heads, a pull quote, and tiles that become list rows with a thumbnail and chevron on phone, with hover and press states.
Before: material page on iPhone
After: editorial material page
After: tappable list rows
BUILD
Framer CMS with three new collections and three multi-reference fields on Projects, two React/TypeScript code components plus a shared store module, dedicated Tablet and Phone breakpoints, and CMS-driven page titles.
AI-DIRECTED WORKFLOW
I made the product and design calls; an AI agent executed them through Framer’s API: reading the tree, writing collections, wiring bindings, writing components, generating imagery, and running device checks. The loop that mattered was critique, precise brief, verified change.
QUALITY REVIEW
Checked on the published site, not just the editor: chip taps and aria state, 44px targets, a 350×121px tile hit area at 390px, and page titles. No performance metrics are claimed.
OUTCOME
Three opt-in sections (map layers, timeline, materials) that cost nothing for projects that don’t use them.
A reusable pattern for CMS lists that need shared interactive state across separate list instances.
An editorial material detail template, journal covers, and project imagery, live in production.
Next: persist layer state in the URL so a view can be shared, replace AI imagery with real project material, and run Lighthouse and an accessibility audit before publishing numbers.
I design and build CMS-driven Framer sites with custom components.
Start a conversation
View live website ↗
Okoro Vale Architects and the Yucca Valley House are fictional. All imagery and example content are AI-generated, and the build was directed with an AI agent.