// ─────────────────────────────────────────────────────────────
// Section E · Viral leaves.
//
// The brief: a separate view inside Forests that surfaces "viral
// leaves" — high-velocity replies across forests. Think reddit/hn
// but in forest grammar. The challenge: leaves are *deep* — they
// only make sense in context (forest → tree → branch → leaf).
//
// Three variants:
// E1 · Velocity feed — chronological by velocity, full-card
// "branch in context" with root tease.
// E2 · Compact cards — denser hn-style list with quick votes
// (sunlight) and inline reveal of context.
// E3 · Galaxy view — leaves drawn as glowing nodes orbiting
// forest-rings, sized by velocity. Tap a
// node opens its card.
//
// All three are reachable from the Forests tab as a sibling view
// (toggle in the header) or a new bottom-nav slot in some variants.
// ─────────────────────────────────────────────────────────────
// ─── Shared header for the viral feed ───
function ViralHeader({ sort = 'velocity', onSetSort, onBack }) {
return (
);
}
// ──────────────────────────────────────────────────────────────
// E1 · Velocity feed
// Full cards. Each shows the root above (compressed) and the actual
// branch/leaf that's getting sunlight, with a forest pip and live
// activity. Sunlight count animates as you watch.
// ──────────────────────────────────────────────────────────────
function ViralE1_VelocityFeed({ onBack }) {
const [sort, setSort] = React.useState('velocity');
return (
{/* Live ticker just below the header. The pulse of the whole feed. */}
{/* First card gets a "new" bloom — simulates a fresh leaf landing */}
{VIRAL_LEAVES.slice(1).map((v, i) => (
))}
);
}
function ViralCard({ v, isNew, rank }) {
const hot = v.signal === 'hot' || v.signal === 'rising';
// Parse the +N/h number so the velocity badge can pulse with intent.
const velNum = parseInt(String(v.velocity).replace(/[^0-9]/g, ''), 10) || 5;
return (
{v.signal === 'hot' && }
{/* Forest header pip */}
{rank && (
{rank}.
)}
{v.forest}
{isNew && }
{/* Root tease */}
{v.rootHandle} · root
"{v.rootSnippet}"
{/* Growing spur — dashes flow like sap toward the branch */}
{/* The viral branch itself */}
{v.branchHandle}· {v.branchAge}
{v.branch}
{v.branches}
· {v.leaves} leavesBranch →
);
}
// Velocity badge — sparkline + the +N/h number. The sparkline gives
// the velocity number a *shape*, not just a value.
function VelocityBadge({ velocity, seed, velNum }) {
return (
{velocity}
);
}
// ──────────────────────────────────────────────────────────────
// E2 · Compact cards
// Denser HN-style. Each row is one branch; tap reveals root + thread
// tease inline. Designed for quick scanning of dozens at once.
// ──────────────────────────────────────────────────────────────
function ViralE2_Compact() {
const [sort, setSort] = React.useState('velocity');
const [open, setOpen] = React.useState('v1');
// Fake position-change so the list reads as alive.
const deltas = [3, -1, 5, 0, -2, 0];
const isNew = (i) => i === 0;
return (
);
}
// ──────────────────────────────────────────────────────────────
// E3 · Galaxy view
// Visual mode — leaves drawn as glowing dots orbiting their forest's
// ring. Size = sunlight; brightness = velocity; tap reveals the
// branch card. This is the "signature" view the brief asked for.
// ──────────────────────────────────────────────────────────────
function ViralE3_Galaxy() {
const [selected, setSelected] = React.useState('v1');
const sel = VIRAL_LEAVES.find(v => v.id === selected);
return (
{/* Galaxy canvas */}
leaves catching sun
tap a node →
{/* Selected card */}
{sel && (
)}
);
}
function GalaxySvg({ selected, onSelect }) {
const W = 362, H = 360;
const cx = W / 2, cy = H / 2;
// Group leaves by forest, lay each forest on a ring at radius based on
// forest activity. Within a forest's ring, leaves are spread by angle.
const forests = {};
VIRAL_LEAVES.forEach(v => {
if (!forests[v.forest]) forests[v.forest] = [];
forests[v.forest].push(v);
});
const forestNames = Object.keys(forests);
const rings = forestNames.map((name, i) => ({
name, r: 80 + i * 35, leaves: forests[name],
}));
return (
);
}
Object.assign(window, {
ViralE1_VelocityFeed, ViralE2_Compact, ViralE3_Galaxy,
});