0 / 0 pages shipped · hover a tile
Every page, designed then built
A static site that uploads anywhere, plus four clickable prototypes on one set of sample data, ready to become the real app.
Mission debrief · 01 / 05
Topicweave
Your expertise, built into your site and yours to keep: one shared vocabulary in your own words ties every service, project, article and answer together, so visitors, search engines and AI assistants can follow your expertise. An optional app and a Voice Kit keep it growing, and nothing publishes without you.
/briefing
The objective
AI answers reward sites that connect the dots, and most expert sites don’t: services on one page, case studies on another, a blog nothing links to. Tracking tools can tell you you’re missing; they can’t build what’s missing. Topicweave installs the missing structure on the site you already have. Name your ideas in your own words, tag each page once, and topic pages, related reading and structured data build from those tags. An optional app reports on your topics, suggests what to write next and lets you capture ideas from your phone, with every draft waiting for your OK. Launch pricing isn’t set yet, so the site invites a few beta sites instead. This mission is that product site, live at topicweave.com, plus its prototypes.
Ten pages custom coded after an ideation board and wireframes, sharing one look layer: data attributes on the root element pick the accent, typeface, corners and glass, so a design decision is one switch. The signature is a canvas loom: up to 1,700 threads on desktop and 620 on phones that weave the mark, then take a different shape for every section, paused offscreen and a still frame under [[Reduced motion]]. On phones, page changes knit a cloth from the link you tapped and unravel it on the next page. Four clickable prototypes (a dashboard with 17 views, a phone capture app, a CMS tagging panel and the monthly email) run on one set of sample data. No framework.
Mission parameters
/systems · 6 deployed
Systems deployed
Open a system to see what it does, why it matters and, in Engineer mode, how it works.
SYS-01
The loom
Canvas · performance
What it does
Colored threads weave the logo, then take a new shape for every section: scattered pieces, a ring of topics, a map, a finished cloth.
Why it matters
A signature image people remember, and one that explains the product before a word is read.
Under the hood
One canvas, drawn by hand. The thread count follows the screen (620 on phones, up to 1,700 on desktop), the pixel budget is capped on 4K screens, it pauses offscreen and in hidden tabs, and [[Reduced motion]] gets one still frame.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
One switch per decision
Look layer
What it does
Every page and every prototype shares one look: lilac accent, Fraunces headlines, square corners, glass panels.
Why it matters
The look was chosen by trying options side by side, so each choice had to stay a single switch in one place.
Under the hood
The settled choices live as data attributes on the root element and one stylesheet keys off them, the same idea as [[Variables]] in Webflow. Changing the accent or the corners everywhere is one value.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
A cloth between pages
Canvas · transitions
What it does
On a phone, tapping a link knits a cloth of threads out from your finger, and the next page unravels it.
Why it matters
Page changes are often where a site feels cheap on a phone, so this one carries the brand instead.
Under the hood
The woven cloth repeats every four cells, so it’s one small tile drawn once and filled across every settled cell in a single call; only threads still in flight are drawn one by one. Bigger screens get a plain fade.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Reports in your own topics
Dashboard · prototype
What it does
The app groups search data by the vocabulary you signed off, so you see which ideas are growing and which have no proof yet.
Why it matters
Owners can read a report sorted by their own topics; a wall of URLs tells them nothing.
Under the hood
Seventeen dashboard views on hash routes, one shared sample data file, light and dark. The health score shows its weights on screen, so it’s never a mystery.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Nothing publishes without you
Voice Kit · phone
What it does
Talk for a minute on your phone. It comes back as a draft in your words, tagged, and Publish stays locked until you approve it.
Why it matters
The fear with AI writing is that it sounds generic and goes out on its own. The lock answers both.
Under the hood
The phone prototype walks record, review and publish. Approving flips the button to Publish; there is no path that skips it.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Tag once, connected everywhere
CMS → site + JSON-LD
What it does
Tag an entry with the ideas it proves and publish: the topic page, related reading and the structured data all update from that one field.
Why it matters
“Tag once, linked everywhere” is abstract until you see one field turn into ten links.
Under the hood
The links are written into the CMS as real references, not painted on by a script. [[JSON-LD]] is built from the same tags, so what search engines read always matches the page.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
/impact · 5 problems solved
Problems solved
What the site does for the people who run it and the people who visit it.
SolvedFor visitors
Build what trackers only report
Before
AI-visibility trackers tell expert businesses they’re missing from the answers, then leave them to fix it.
Now
An install that builds the missing structure on the site they already have: a vocabulary, tagged pages, topic pages and structured data.
Result
The site gets clearer with every entry you publish.
Under the hood
Tags are native CMS references, so the links survive without any script.
SolvedFor visitors
Make the mechanism obvious
Before
Vocabularies, tagging and structured data sound like a developer project.
Now
The loom draws the idea section by section, from scattered pieces to a finished cloth, and the tag-once demo shows one field becoming ten links.
Result
The idea lands in seconds, with no jargon on screen.
Under the hood
Every section names the shape it wants; the loom reads it and re-forms as you scroll.
SolvedFor visitors
Keep it in their voice
Before
Owners expect AI drafts to sound generic, and worry something will publish without them.
Now
A Voice Kit filled in about 15 minutes from their own writing and a short recording, and a review queue where Publish stays locked until they approve.
Result
Drafts start from their own sentences, and they stay the author.
Under the hood
Every piece moves Draft → In review → Approved; there is no auto-publish setting to turn on.
SolvedFor visitors
Earn trust by not overselling
Before
Most “get found by AI” pitches promise rankings and citations nobody can guarantee.
Now
“AI visibility, honestly”: two signals shown as signals, sample data labeled in every prototype, and no promised outcomes.
Result
The site reads like an expert explaining the work.
Under the hood
No logos, testimonials, customer counts or rankings anywhere; every simulated screen says so.
SolvedFor visitors
A beta instead of a guess
Before
Launch pricing isn’t set, and a price list would have been a guess.
Now
A beta: a few sites get the install now, by hand, far below the launch price, for honest feedback. Every call to action says Join the beta, and a public roadmap shows what’s coming.
Result
Early sites get a fair deal, and the product meets real sites before it launches.
Under the hood
Pricing shows the packages with TBD and a time calculator, so the value is clear before the price is.
/manifest · what shipped
Mission manifest
Everything this mission delivered, planned and mocked up in Figma first, then built.
Mission · planet
Role
Strategist + designer + developer
Platform · Year
CMS collections
Collections
Mission type
Disciplines
Drag the tags
Mission parameters
Parameters met
Status
Live
Where it lives
/telemetry
By the numbers
30
terms: your expertise, in your own words, signed off by you
–60
6
categories hold the whole vocabulary
10
minutes to fill the Voice Kit, so every AI draft starts in your voice
–15
12
a month saved by editing your own CMS instead of emailing a developer
hrs
/stack · 0 tools
Tools in orbit
Every tool this mission ran on. Pull one out of orbit and let go; it finds its way back.
Hover a tool
Tools in orbit
This project demonstrates
/observatory · from this mission