that is a DIRECT child of
// .xp-prism (same preserve-3d trick as StackWireframe — wrapping in
// an intermediate div flattens child translateZ in Chrome). The div
// has a translateZ applied so it floats at its depthPct during pick.
//
// sizeT ∈ [0..1] (Hero may stop short of 1 via `HERO_SCROLL.spotSizeTEnd` so
// spots never fully tile before the blob fade).
// zCompress ∈ [0..1]:
// 1 — full stack depth (pick): z = -STACK_DEPTH × depthPct.
// 0 — flat (flatten+untilt): z = 0, all spots coplanar on top page.
//
// `strength` is spot opacity (0..1). Hero multiplies geometric phase by
// (1 − spotBlobFade) so pink/blue dissolves into final copy instead of
// holding on a solid tiled field.
// ============================================================
function SpotField({ strength, sizeT, zCompress, flat = false }) {
if (strength <= 0.001) return null;
return (
{PAGE_SPOTS.map((s, i) => {
// Spots are positioned within the TEXT block (not the full prism),
// so they always appear over the words — never in the margins.
// (xCenterPct, yCenterPct) is a percentage inside the TEXT_W×TEXT_H
// rectangle, which is centered at (TEXT_OFFSET_X, TEXT_OFFSET_Y)
// relative to the prism center.
const xCenterPct = s.xPct + s.wPct / 2;
const yCenterPct = s.yPct + s.hPct / 2;
const xPx = TEXT_OFFSET_X + (xCenterPct / 100) * TEXT_W - TEXT_W / 2;
const yPx = TEXT_OFFSET_Y + (yCenterPct / 100) * TEXT_H - TEXT_H / 2;
const zPx = -STACK_DEPTH * s.depthPct * zCompress;
const flatDepth = STACK_DEPTH * s.depthPct * zCompress;
const fullW = (s.wPct / 100) * TEXT_W;
const fullH = (s.hPct / 100) * TEXT_H;
const w = lerp(PICK_SPOT_W, fullW, sizeT);
const h = lerp(PICK_SPOT_H, fullH, sizeT);
return (
);
})}
);
}
// ============================================================
// PageStack — depth as a growing deck of real skill pages.
// The top sheet (user's skill) sits at z = 0.
// 8 alternative-skill pages sit behind at z = -LAYER_SPACING × i
// for i ∈ 1..8 (i.e. -28.5, -57, … -228).
// Each layer is a 360×460 page rendered at its own z, with a short
// YAML-frontmatter hint of an alternative skill. As pStack grows,
// `depth` sweeps from 0 → STACK_DEPTH; layers fade in once `depth`
// crosses their plane, so the box appears to extrude page by page.
//
// Rendering: each layer is a DIRECT child of .xp-prism (via
// React.Fragment). Same reason as StackWireframe — a wrapping
// preserve-3d div flattens child z translations in Chrome and
// the deeper layers all collapse onto z = 0.
// ============================================================
function PageStack({ depth, alpha, flat = false }) {
// 8 unique drafts reused twice: layers 1+9, 2+10, … 8+16 render
// the same SKILL.md. Two of the eight are "dense" (release-notes,
// changelog-drafter) so every fourth visible page reads as a
// solid rectangle of text rather than a half-page triangle.
const altSkills = window.ALT_SKILLS || [];
const uniqueCount = altSkills.length || 1;
const layers = [];
for (let idx = 0; idx < LAYER_COUNT; idx++) {
layers.push(altSkills[idx % uniqueCount]);
}
// Layer i (1..16) enters when `depth` reaches its z plane, then
// eases up to full strength over a small window. Slight overlap
// gives a smooth, page-by-page reveal instead of stepped pops.
const layerAlpha = (i) => {
const planeZ = LAYER_SPACING * (i - 0.5);
return ease(clamp01((depth - planeZ) / 10));
};
return (
{layers.map((skill, idx) => {
if (!skill) return null;
const i = idx + 1;
const op = layerAlpha(i) * alpha;
if (op <= 0.001) return null;
// Each deeper page reads slightly dimmer to suggest atmospheric
// falloff and to keep the top sheet visually dominant.
const dim = 1 - 0.035 * idx;
const visibleDepth = Math.min(depth, LAYER_SPACING * i);
const flatX = visibleDepth * FF_DEPTH_X;
const flatY = visibleDepth * FF_DEPTH_Y;
return (
{skill.draft.map((L, li) => (
{L || '\u00A0'}
))}
);
})}
);
}
window.Hero = Hero;
