wehub-resource-sync
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import styles from "./Primitives.module.css";
|
|
|
|
const CARDS = [
|
|
{
|
|
glyph: "01",
|
|
title: "HOOKS",
|
|
text:
|
|
"12 AUTO-CAPTURE HOOKS PIPED INTO EVERY CODING AGENT. EVERY TOOL CALL, EVERY PROMPT, EVERY STOP BECOMES A COMPRESSED OBSERVATION.",
|
|
},
|
|
{
|
|
glyph: "02",
|
|
title: "RECALL",
|
|
text:
|
|
"TRIPLE-STREAM RETRIEVAL — BM25 + VECTOR + KNOWLEDGE GRAPH. RERANKED ON DEVICE. P50 UNDER 20MS ON A LAPTOP.",
|
|
},
|
|
{
|
|
glyph: "03",
|
|
title: "CONSOLIDATE",
|
|
text:
|
|
"HOURLY SWEEPS COMPRESS RAW OBSERVATIONS INTO SEMANTIC MEMORIES. DUPLICATES MERGED. STALE ROWS DECAYED. AUDIT ROW EMITTED EVERY DELETE.",
|
|
},
|
|
];
|
|
|
|
export function Primitives() {
|
|
const gridRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
if (reduce || !gridRef.current) return;
|
|
const cards = gridRef.current.querySelectorAll<HTMLElement>(
|
|
"[data-tilt]",
|
|
);
|
|
const handlers: Array<[HTMLElement, (e: MouseEvent) => void, () => void]> =
|
|
[];
|
|
cards.forEach((card) => {
|
|
const onMove = (e: MouseEvent) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const px = (e.clientX - rect.left) / rect.width - 0.5;
|
|
const py = (e.clientY - rect.top) / rect.height - 0.5;
|
|
card.style.transform = `translateY(-4px) rotateX(${(-py * 4).toFixed(
|
|
2,
|
|
)}deg) rotateY(${(px * 4).toFixed(2)}deg)`;
|
|
};
|
|
const onLeave = () => {
|
|
card.style.transform = "";
|
|
};
|
|
card.addEventListener("mousemove", onMove);
|
|
card.addEventListener("mouseleave", onLeave);
|
|
handlers.push([card, onMove, onLeave]);
|
|
});
|
|
return () => {
|
|
handlers.forEach(([el, m, l]) => {
|
|
el.removeEventListener("mousemove", m);
|
|
el.removeEventListener("mouseleave", l);
|
|
});
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section className={styles.wrap} id="stack" aria-labelledby="prim-title">
|
|
<header className="section-head">
|
|
<span className="section-eyebrow">THE STACK</span>
|
|
<h2 id="prim-title" className="section-title">
|
|
THREE LAYERS.
|
|
<br />
|
|
NO FRAMEWORK TAX.
|
|
</h2>
|
|
<p className="section-lede">
|
|
BUILT ON THE iii ENGINE — EVERY MEMORY OPERATION IS A WORKER, A
|
|
FUNCTION, OR A TRIGGER. NO REDIS. NO KAFKA. NO POSTGRES. THE ENTIRE
|
|
RUNTIME IS ONE PROCESS.
|
|
</p>
|
|
</header>
|
|
<div className={styles.grid} ref={gridRef}>
|
|
{CARDS.map((c) => (
|
|
<article key={c.glyph} className={styles.card} data-tilt>
|
|
<div className={styles.glyph}>{c.glyph}</div>
|
|
<h3 className={styles.title}>{c.title}</h3>
|
|
<p className={styles.text}>{c.text}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|