+ );
+ })}
+
+ {/* Links between related fragments (drawn BEHIND the docs). */}
+
+
+ {/* The relevant fragment RAG failed to retrieve. */}
+
+
+
+ {content.labels.relevantNotFound}
+
+
+ {missedChunk.text}
+
+
+
+ {/* Takeaway. */}
+
+
+ {content.labels.ragNote}
+
+
+
+ );
+};
+
+// Intro beat: the SAME corpus RAG saw, laid out as a tidy 4×3 scatter across the
+// graph area. Wikontic then unites them all (converge to centre + text fades) and
+// the graph grows out of the merged mass. Reuses `corpus` text so it visibly reads
+// as "same documents, handled differently".
+const DOC_COLS = [70, 490, 910, 1330];
+const DOC_ROWS = [40, 235, 430];
+const DOC_W = 320;
+
+// Clean, evenly-spaced layout tuned for this wide canvas (1180x470) so bubbles
+// never overlap. Overrides only x/y; node identity/labels stay from the data.
+const wikonticLayout: Record = {
+ requirements: {x: 0.08, y: 0.14},
+ year: {x: 0.3, y: 0.14},
+ project: {x: 0.05, y: 0.5},
+ complex: {x: 0.265, y: 0.5},
+ buildings: {x: 0.5, y: 0.14},
+ monitoring: {x: 0.5, y: 0.5},
+ parking: {x: 0.5, y: 0.86},
+ networks: {x: 0.735, y: 0.5},
+ risks: {x: 0.95, y: 0.5},
+};
+const GRAPH_W = 1740;
+const GRAPH_H = 560;
+
+const GRAPH_CY = GRAPH_H / 2;
+
+// The dot squashes onto — and unfolds from — where the first graph node (проект)
+// will render, so the handoff reads as a single seamless motion.
+const PROJECT_SX = wikonticLayout.project.x * GRAPH_W;
+const PROJECT_SY = wikonticLayout.project.y * GRAPH_H;
+const DOT_SCALE = 0.05;
+const DOT_HALF = (DOC_W * DOT_SCALE) / 2;
+
+const WikonticPhase: React.FC<{content: Animation2Content}> = ({content}) => {
+ const frame = useCurrentFrame();
+ const corpus = buildCorpus(content);
+ const docScatter = corpus.map((box, i) => ({
+ text: box.text,
+ x: DOC_COLS[i % 4],
+ y: DOC_ROWS[Math.floor(i / 4)],
+ }));
+ const wikonticGraphNodes = content.ragVsGraphNodes.map((node) => ({
+ ...node,
+ ...(wikonticLayout[node.id] ?? {}),
+ }));
+ const headerIn = progress(frame, 6, 40);
+ const docsIn = progress(frame, 24, 96); // same corpus appears, scattered & grey
+ const uniteIn = progress(frame, 124, 192); // all docs converge + squash to a single dot
+ const graphIn = progress(frame, 200, 286); // the dot unfolds into the graph, проект first
+ const pathIn = progress(frame, 300, 420);
+ const internalIn = progress(frame, 320, 410);
+ const answerIn = progress(frame, 510, 558); // answer box slides up from the bottom
+ const pathOut = progress(frame, 510, 552); // path box slides out downward
+ const visiblePathCount = Math.ceil(answerPathEdgeIds.length * pathIn);
+ // The dot fades out fully BEFORE the проект node ramps up, so the node always
+ // fades in over clean white and the dot never bleeds through it.
+ const docsGone = progress(frame, 192, 204);
+ return (
+
+ {/* Header: Wikontic title + the question, mirroring the RAG slide. */}
+
+
+
+
+
+ Wikontic
+
+
+
+ {content.labels.question}
+
+
+
+
+
+
+ {/* Intro: the same corpus RAG saw, scattered — then squashed to a dot.
+ Sits BEHIND the graph layer so the проект node unfolds over it. */}
+ {docsGone < 1 && (
+
+ {docScatter.map((doc, i) => {
+ const itemIn = clamp(docsIn * 1.3 - i * 0.05);
+ const u = ease(uniteIn);
+ // Converge + squash onto the проект node's spot, collapsing to a dot.
+ const left = lerp(doc.x, PROJECT_SX - DOT_HALF, u);
+ const top = lerp(doc.y, PROJECT_SY - DOT_HALF, u);
+ const scale = lerp(1, DOT_SCALE, u);
+ const textOpacity = clamp(1 - uniteIn * 2.4);
+ // Borders blend toward a single united block, then round into a dot.
+ const united = uniteIn;
+ const cornerRadius = lerp(12, 80, united);
+ return (
+
+ {doc.text}
+
+ );
+ })}
+
+ )}
+
+ {/* Caption that narrates the unite beat, fading out as the graph forms. */}
+
+ {content.labels.uniteDocuments}
+
+
+
+ 0.05}
+ />
+
+
+
+ {/* Bottom slot: the path box, then the answer box slides up to replace it. */}
+
+ {/* Path-to-answer box */}
+
+
+ {content.labels.pathToAnswer}
+
+
+
+
+ {/* Answer box — slides up from the bottom to replace the path box */}
+
+ 
+