// ───────────────────────────────────────────────────────────── // Forests v2 · brainstorm board. // // Lays out every section as a DesignCanvas, with phone frames for // each variant and trade-off notes alongside. Sections: // 0 · Premise — what we're solving, why the v1 doesn't scale. // A · Landing — discovery & search variants. // B · Create — plant a new forest. // C · Join — open / moderated / referral. // D · Folk + DM — the profile-with-letters integration. // E · Leaves — viral feed. // F · Motion — the animation kit applied consistently. // Z · If I had to pick — composition recommendation. // ───────────────────────────────────────────────────────────── const PHONE_W = 390; const PHONE_H = 760; // ─── Small shared note card ─── function Note({ title, accent = '#76AB78', children, width = 320, height = PHONE_H }) { return (

{title}

{children}

); } function TradeOff({ pros = [], cons = [] }) { return (

+ Bets on

− Risks

); } function App() { return ( {/* ───── 0 · Premise ───── */}

The v1 Forests screen carries:

Your personal forests — including direct messages, which masquerade as 2-member "forests" at the top. This conflates DM and group.
Your public forests — the ones you've already joined.
Discover — a peek at four public forests, with two different join-modes (Request / Join) stacked inline.
Search — there's no surface for it. Tens of thousands of forests, no way to find them.
Create / join with code — buried as a footer link.

At brand-promise scale (~12k public forests, 10s of letters in your inbox), each of these gets buried in the next. The list becomes a wall and you stop scanning.

The screenshot's marina_k row is a letter, not a forest. That's the central reorganization: move DMs to Folk where they belong, and let Forests be about forests.

Five questions this board answers

A · How do you find a forest among 12k? (Landing)
B · How do you plant a new one? (Create)
C · What does joining feel like, three ways? (Join)
D · Where do DMs live so they stop crowding Forests? (Folk)
E · How does virality work in tree-structured posts? (Leaves)

{/* ───── A · Landing ───── */}

Three modes, three states. Yours is small and stable; Discover is filterable by topic; Search is a real surface, not an icon.

Cleanest visually — but tab-switching makes you forget what was one screen ago. Tax on cross-mode comparison.

Single scroll. Yours sits at the top compact (max 3); Discover owns the rest, with sticky filter chips that pin to the top as you scroll. Closest to the v1 — the smallest jump.

Search lives in the top input only; tap-to-focus pushes Yours off the screen.

Discover is anchored geographically. The compass card shows forests around you right now as glowing nodes; the list below sorts walking-distance first, then by interest.

Most aligned with the brand promise ("conversations where you stand") — but only works if you've shipped a location backend. Has fallback to interest-based for desktop / online.

Mirrors the Folk-tab search in vocabulary and bucket shape:

In your forests — solid bg, "Member" capsule. Private forests keep the bark-stripe.
Discoverable — dashed border (the same "haven't met yet" signal the Folk search uses for forest-folk), inline Join / Request button.
Across the canopy — muted glyph, "No overlap" label, blurb omitted per privacy.
Matching leaves — quoted branch text with forest + handle + sunlight count. Highlights the match in sunlight.
Plant a forest called "…" — the equivalent of folk's Trade handles in person tile. Always at the bottom; a stable destination when search comes up dry.

Idle state: recent queries + "trending in your area" forests. Never an empty void.

Highlighting uses Sunlight at 18% alpha — the same accent used for "new activity." It reads as "this is the bit you cared about" without being a hammer.

{/* ───── B · Create ───── */}

Everything on one screen. Living preview at the top updates as you type. Plant or cancel.

The fastest path. Privileges experienced users; doesn't help a first-time creator decide what kind of forest to make.

Step 1 picks a vibe (Study Hall, Plaza, Salon, Campfire), which carries opinionated defaults for join-mode, moderation, and copy. Step 2 names it. Step 3 watches the glyph draw itself in.

Onboards better at the cost of a longer flow. The vibe metaphor is also a content-shaping nudge — a Salon won't accept a Plaza's volume of strangers by default.

{/* ───── C · Join ───── */}

Every flow opens with the same Forest preview hero: glyph, name, blurb, live counter, members strip with mutual folk surfaced. Then it diverges:

Open — one tap. The "you're in" beat is the only animation that gets to be loud (sunlight ripple + a folded check). It runs ~700ms then dims.
Moderated — two-tap, with optional note. Pending state is a dashed-canopy card that lives in your Sunlight tab until a decision arrives. Decline is silent — no rejection notification, just absence.
Referral — pre-revealing the four-mark builds delight before commitment. The forest "reveals" only when the code is valid.

Across all three: arrived members start as Stranger. The "Who's in" strip uses your folk's avatars first; strangers fall to "+ 1.8k strangers." That alone may answer the "should I join" question.

The moderator-side view is non-optional; without showing it, we can't actually evaluate the request-to-join experience.

{/* ───── D · Folk + DMs ───── */}

Tap a Folk row → grows down to show the last two messages, a quick-reply, and three profile tiles. No modal. No screen change. Folk list never loses scroll position.

The existing ConnectSheet evolves — now tabs between Letters and Profile. Letters is the default when there are unread; profile lives one tap away.

Closest to the v1 mental model. Easiest engineering. Less novel, but the most reliable port for an existing user base.

Leftward swipe reveals the last letter behind the row, in place. Tap-to-open still works; swipe is a power-user shortcut.

The most delightful. Hidden discoverability is the trade.

{/* ───── E · Viral leaves ───── */}

Each card shows the root tease above (italicized, indented) and the branch itself below (bold, normal column). A spur curve connects them — this is where the dense DM-tree vocabulary is finally allowed to fire, because each card is bounded.

"Pull sunlight" is the native upvote — a soft sun pulse, not an arrow. Velocity (+38/h) lives in a sun-pill, top-right.

Numbered list, HN-style. Each row carries the branch in full, metadata below; tap reveals the root tease + actions inline (open the tree, branch from here, hide).

Leaves drawn as glowing nodes orbiting their forest's ring. Size = sunlight; brightness pulse = velocity; tap a node → the velocity card materializes below. Visual mode for "what's the forest feeling right now" without parsing a feed.

{/* ───── F · Motion ───── */} {/* ───── Z · Recommendation ───── */} ); } // ─── Legacy screen — a faithful render of the v1 screenshot ─── function LegacyForestsScreen() { return (

YOUR FORESTS

2 spaces growing

Personal

private + New

marina_k dm 14h

marina_k: Maecenas tempus, tellus eget con…

519

Public

Philosophy

8 members · Thinking out loud about ideas, ethics, …

Discover See all

{[ { name: 'Software & Web', members: 3, blurb: 'Verified developers and…', cta: 'Request' }, { name: 'Indie Film', members: 2, blurb: 'Referral required.', cta: 'Request' }, { name: 'Long-distance Cycling', members: 2, blurb: 'Open to anyone with two w…', cta: 'Join' }, { name: 'Slow Cooking', members: 2, blurb: 'Recipes, kitchens, weekend…', cta: 'Join' }, ].map(f => (

{f.name}

{f.members} members · {f.blurb}

{f.cta === 'Join' ? {f.cta} : {f.cta}}

))}

+ Have a referral code?

); } // ─── Motion kit display ─── function MotionKit() { return (

{[1, 2, 3, 4].map(i => (

leaf · {i}

))}

); } function MotionCell({ title, desc, children }) { return (

{title}

{desc}

{children}

); } function PersistentSunRipple() { // Auto-loops every 2.6s const [n, setN] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setN(v => v + 1), 2600); return () => clearInterval(id); }, []); return (

); } function DrawInRings() { // Replay every 3s const [k, setK] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setK(v => v + 1), 3000); return () => clearInterval(id); }, []); return ( ); } // ─── Embed backdrop: same gradient the brainstorm board uses, sized to // wrap a single Phone with a thin border of gradient visible. ─── function EmbedBackdrop({ children }) { return (

{children}

); } // ─── Router: ?board= renders one artboard; no param renders the full // DesignCanvas as the prototype was originally authored. ─── function EmbedOrApp() { const board = new URLSearchParams(location.search).get('board'); switch (board) { case 'a1': return ; case 'a-search-idle': return ; case 'a-search-typing': return ; case 'a-search-leaf': return ; case 'a-search-empty': return ; default: return ; } } ReactDOM.createRoot(document.getElementById('root')).render();