// loading-pattern.jsx
// Trillic loading / branded motion: pattern-unlock animation that traces
// "Trillic" on a 3x3 grid, with celestial circles. Themed via design-system
// CSS variables (--brand-gold, --brand-gold-50, etc).
const { useMemo } = React;
// Read brand tokens off :root so the animation re-themes with the design system
// (light/dark, future palette swaps). Falls back to brand book values.
function readToken(name, fallback) {
if (typeof window === 'undefined') return fallback;
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
return v || fallback;
}
const THEME = {
bg: readToken('--background', '#FAF5EC'),
bgDeep: readToken('--brand-gold-50', '#FAF5EC'),
ink: readToken('--brand-gold', '#CDA973'),
inkBright: readToken('--brand-gold-300', '#D9BC83'),
inkSoft: 'color-mix(in oklab, ' + readToken('--brand-gold', '#CDA973') + ' 25%, transparent)',
inkLine: 'color-mix(in oklab, ' + readToken('--brand-gold', '#CDA973') + ' 40%, transparent)',
};
// ── Grid geometry ────────────────────────────────────────────────────────
const NODE_XY = (i) => ({ col: i % 3, row: Math.floor(i / 3) });
// Letter paths in upright (unrotated) grid space.
// 0 1 2
// 3 4 5
// 6 7 8
const LETTERS = [
// T: trace top row 0->1->2, retrace 2->1, then down spine 1->4->7
{ ch: 'T', path: [0, 1, 2, 1, 4, 7] },
// lowercase r: stem up the left column 6->3->0, then across top to 2
{ ch: 'r', path: [6, 3, 0, 1, 2] },
// capital I: top serif 0->1->2, retrace 2->1, spine 1->4->7, bottom serif 7->6, retrace 6->7->8
{ ch: 'I', path: [0, 1, 2, 1, 4, 7, 6, 7, 8] },
{ ch: 'L', path: [0, 3, 6, 7, 8] },
{ ch: 'L', path: [0, 3, 6, 7, 8] },
{ ch: 'I', path: [0, 1, 2, 1, 4, 7, 6, 7, 8] },
{ ch: 'C', path: [2, 1, 0, 3, 6, 7, 8] },
];
// ── Polyline helpers ─────────────────────────────────────────────────────
function polyMeta(path) {
const segs = [];
let total = 0;
for (let i = 0; i < path.length - 1; i++) {
const a = NODE_XY(path[i]);
const b = NODE_XY(path[i + 1]);
const len = Math.hypot(b.col - a.col, b.row - a.row);
segs.push({ from: a, to: b, len, t0: total, t1: total + len });
total += len;
}
segs.forEach((s) => { s.t0 /= total; s.t1 /= total; });
return { segs, total };
}
function pointAt(meta, f) {
if (f <= 0) return { x: meta.segs[0].from.col, y: meta.segs[0].from.row };
if (f >= 1) {
const last = meta.segs[meta.segs.length - 1];
return { x: last.to.col, y: last.to.row };
}
for (const s of meta.segs) {
if (f >= s.t0 && f <= s.t1) {
const local = (s.t1 === s.t0) ? 0 : (f - s.t0) / (s.t1 - s.t0);
return {
x: s.from.col + (s.to.col - s.from.col) * local,
y: s.from.row + (s.to.row - s.from.row) * local,
};
}
}
const last = meta.segs[meta.segs.length - 1];
return { x: last.to.col, y: last.to.row };
}
function partialPoints(path, meta, f) {
if (f <= 0) return [];
const pts = [{ x: NODE_XY(path[0]).col, y: NODE_XY(path[0]).row }];
if (f >= 1) {
for (let i = 1; i < path.length; i++) {
pts.push({ x: NODE_XY(path[i]).col, y: NODE_XY(path[i]).row });
}
return pts;
}
for (const s of meta.segs) {
if (f >= s.t1) {
pts.push({ x: s.to.col, y: s.to.row });
} else if (f > s.t0) {
const local = (f - s.t0) / (s.t1 - s.t0);
pts.push({
x: s.from.col + (s.to.col - s.from.col) * local,
y: s.from.row + (s.to.row - s.from.row) * local,
});
break;
}
}
return pts;
}
function visitedNodes(path, meta, f) {
const visited = new Set();
if (f <= 0) return visited;
visited.add(path[0]);
for (let i = 0; i < meta.segs.length; i++) {
if (f >= meta.segs[i].t1 - 1e-6) visited.add(path[i + 1]);
}
return visited;
}
// ── Persistent grid (the 9 dots — always visible) ────────────────────────
function PersistentGrid({ cx, cy, cell }) {
const toX = (gx) => cx + (gx - 1) * cell;
const toY = (gy) => cy + (gy - 1) * cell;
return (
{/* outer frame ticks */}
{[[-1, -1], [1, -1], [-1, 1], [1, 1]].map(([sx, sy], i) => {
const x = cx + sx * (cell + 50);
const y = cy + sy * (cell + 50);
const len = 18;
return (
);
})}
{/* base 9 dots */}
{Array.from({ length: 9 }).map((_, i) => {
const { col, row } = NODE_XY(i);
return (
);
})}
);
}
// ── Pattern stroke (drawn line + visited halos + head) ───────────────────
function PatternStroke({ cx, cy, cell, progress, path, opacity = 1 }) {
const meta = useMemo(() => polyMeta(path), [path]);
const pts = partialPoints(path, meta, progress);
const head = pointAt(meta, progress);
const visited = visitedNodes(path, meta, progress);
const toX = (gx) => cx + (gx - 1) * cell;
const toY = (gy) => cy + (gy - 1) * cell;
const linePts = pts.map((p) => `${toX(p.x).toFixed(2)},${toY(p.y).toFixed(2)}`).join(' ');
return (
{/* visited node halos (overlay on top of base grid) */}
{Array.from(visited).map((i) => {
const { col, row } = NODE_XY(i);
const x = toX(col), y = toY(row);
return (
);
})}
{/* stroke */}
{pts.length >= 2 && (
)}
{/* head */}
{progress > 0 && progress < 1 && (
<>
)}
);
}
// ── Celestial circles (gold on cream) ────────────────────────────────────
function CelestialField({ cx, cy, time }) {
const orbits = [
{ r: 380, w: 0.18, br: 7, op: 0.55, phase: 0.0 },
{ r: 470, w: -0.11, br: 4, op: 0.42, phase: 1.1 },
{ r: 560, w: 0.07, br: 11, op: 0.6, phase: 2.3 },
{ r: 640, w: -0.05, br: 3, op: 0.32, phase: 3.7 },
{ r: 740, w: 0.04, br: 16, op: 0.7, phase: 0.8 },
{ r: 820, w: -0.03, br: 5, op: 0.4, phase: 4.2 },
{ r: 910, w: 0.022, br: 24, op: 0.78, phase: 2.9 },
];
return (
{orbits.map((o, i) => (
))}
{orbits.map((o, i) => {
const ang = o.phase + time * o.w;
const x = cx + Math.cos(ang) * o.r;
const y = cy + Math.sin(ang) * o.r * 0.92;
return (
);
})}
{Array.from({ length: 60 }).map((_, i) => {
const a = (i * 137.5) % 360 * (Math.PI / 180);
const r = 240 + ((i * 53) % 760);
const x = cx + Math.cos(a) * r;
const y = cy + Math.sin(a) * r;
const tw = 0.4 + 0.6 * Math.abs(Math.sin(time * 1.3 + i));
return ;
})}
);
}
// ── Letter slot (just the stroke; no labels) ─────────────────────────────
function LetterSlot({ start, drawDur, holdDur, exitDur, idx, cx, cy, cell }) {
return (
{({ localTime }) => {
let progress = 0, op = 1;
if (localTime < drawDur) {
progress = Easing.easeInOutCubic(clamp(localTime / drawDur, 0, 1));
} else if (localTime < drawDur + holdDur) {
progress = 1;
} else {
progress = 1;
op = 1 - Easing.easeInQuad(clamp((localTime - drawDur - holdDur) / exitDur, 0, 1));
}
return (
);
}}
);
}
// ── HUD letter readout (rotates with the world, but fights it visually) ──
// We stamp the current letter outside the rotated layer so it's readable.
function CurrentLetterReadout({ time, introDur, perLetter }) {
// Determine current letter index based on time in the letter sequence.
let idx = -1;
let phase = '';
const seqT = time - introDur;
if (seqT >= 0) {
const i = Math.floor(seqT / perLetter);
if (i < LETTERS.length) {
idx = i;
const local = seqT - i * perLetter;
phase = local < 0.95 ? 'DRAW' : local < 1.13 ? 'HOLD' : 'FADE';
}
}
if (idx < 0) return null;
return (
{LETTERS[idx].ch}
{`GLYPH 0${idx + 1} / 0${LETTERS.length} · ${phase}`}
);
}
// ── Main scene ───────────────────────────────────────────────────────────
function TrillicScene() {
const time = useTime();
const W = 1600, H = 900;
const CX = W / 2, CY = H / 2;
const CELL = 130;
// Per-letter durations (total lifecycle = drawDur + holdDur + exitDur).
// `cadence` is the start-to-start gap between successive letters; letting
// it be SHORTER than the full lifecycle means each letter starts drawing
// while the previous is still fading out — smoother, less gappy.
const drawDur = 0.85;
const holdDur = 0.10;
const exitDur = 0.55;
const perLetter = drawDur + holdDur + exitDur; // 1.50 — full lifecycle
const cadence = drawDur; // 0.85 — start-to-start
const introDur = 0.5;
const finaleStart = introDur + cadence * LETTERS.length;
const finaleDur = 2.2;
return (
);
}
window.TrillicScene = TrillicScene;