s, so we control individual
+ pixel colors / glow / animations. Original blocky design (no copyrighted mark). */
+// 7 wide × 9 tall chunky glyphs, designed in the style of the reference:
+// thick stems, rounded/beveled corners on C/E/R, no diagonals.
+const GLYPH_W = 7;
+const GLYPH_H = 9;
+const GLYPHS = {
+ F: [
+ "#######",
+ "#######",
+ "##.....",
+ "##.....",
+ "######.",
+ "######.",
+ "##.....",
+ "##.....",
+ "##.....",
+ ],
+ A: [
+ ".#####.",
+ "#######",
+ "##...##",
+ "##...##",
+ "#######",
+ "#######",
+ "##...##",
+ "##...##",
+ "##...##",
+ ],
+ C: [
+ ".######",
+ "#######",
+ "##.....",
+ "##.....",
+ "##.....",
+ "##.....",
+ "##.....",
+ "#######",
+ ".######",
+ ],
+ E: [
+ "#######",
+ "#######",
+ "##.....",
+ "##.....",
+ "######.",
+ "######.",
+ "##.....",
+ "#######",
+ "#######",
+ ],
+ R: [
+ "######.",
+ "#######",
+ "##...##",
+ "##...##",
+ "######.",
+ "#####..",
+ "##.##..",
+ "##..##.",
+ "##...##",
+ ],
+};
+
+function PixelLogo({ word = "FACERE", scale = 11, gap = 0 }) {
+ const letters = word.split("");
+ return (
+
+
+ {letters.map((ch, li) => {
+ const g = GLYPHS[ch];
+ if (!g) return null;
+ return (
+
+ {g.flatMap((row, ri) =>
+ row.split("").map((c, ci) => (
+
+ ))
+ )}
+
+ );
+ })}
+
+ {/* Ghost layers for subtle electric jitter */}
+
+
+
+ {letters.map((ch, li) => {
+ const g = GLYPHS[ch];
+ if (!g) return null;
+ return (
+
+ {g.flatMap((row, ri) =>
+ row.split("").map((c, ci) => (
+
+ ))
+ )}
+
+ );
+ })}
+
+ {puffs.map((p) => (
+
+ ))}
+
+ );
+}
+
+/* ───────────────── EmberLayer ─────────────────
+ Tiny pulsing orange points scattered across the horizon — gives the city
+ /factory a flicker without recreating any structure in CSS. */
+function EmberLayer({ count = 18, area }) {
+ const embers = useRef(null);
+ if (!embers.current) {
+ const arr = [];
+ for (let i = 0; i < count; i++) {
+ arr.push({
+ x: area.x + Math.random() * area.w,
+ y: area.y + Math.random() * area.h,
+ size: 2 + Math.random() * 2,
+ dur: 1.6 + Math.random() * 3,
+ delay: Math.random() * 4,
+ hue: Math.random() > 0.7 ? "warm" : "soft",
+ });
+ }
+ embers.current = arr;
+ }
+ return (
+
+ {embers.current.map((e, i) => (
+
+ ))}
+
+ );
+}
+
+/* ───────────────── SparkLayer ─────────────────
+ For factory interior — small orange sparks bursting from the welding zone. */
+function SparkLayer() {
+ const sparks = useRef(null);
+ if (!sparks.current) {
+ const arr = [];
+ for (let i = 0; i < 14; i++) {
+ arr.push({
+ a: -90 + (Math.random() - 0.5) * 160, // angle deg
+ d: 18 + Math.random() * 36, // distance
+ size: 2 + Math.random() * 2,
+ dur: 0.6 + Math.random() * 1.0,
+ delay: Math.random() * 1.6,
+ });
+ }
+ sparks.current = arr;
+ }
+ return (
+
+
+ {sparks.current.map((s, i) => {
+ const rad = (s.a * Math.PI) / 180;
+ const tx = Math.cos(rad) * s.d;
+ const ty = Math.sin(rad) * s.d;
+ return (
+
+ );
+ })}
+
+ );
+}
+
+/* ───────────────── ChipPulses ─────────────────
+ Subtle pulsing orange dots over the PCB area. */
+function ChipPulses() {
+ // hand-placed % over the chip image
+ const dots = [
+ { x: 76, y: 38, dur: 2.4, delay: 0 },
+ { x: 82, y: 28, dur: 2.0, delay: 0.7 },
+ { x: 88, y: 33, dur: 2.8, delay: 1.2 },
+ { x: 73, y: 60, dur: 2.2, delay: 0.4 },
+ { x: 80, y: 75, dur: 2.6, delay: 1.0 },
+ { x: 92, y: 55, dur: 2.0, delay: 1.6 },
+ { x: 70, y: 48, dur: 3.0, delay: 0.2 },
+ { x: 95, y: 70, dur: 2.4, delay: 0.9 },
+ ];
+ return (
+
+ {dots.map((d, i) => (
+
+ ))}
+ {/* Soft chip breathing glow */}
+
+
+ );
+}
+
+/* ───────────────── HeroSection ───────────────── */
+function HeroSection({ bgRef, contentRef }) {
+ // Chimney positions (% over the exterior factory image) — hand-tuned to artwork.
+ // The three tall chimneys cluster at ~74%, 78%, 83% with tops near y≈49.5%.
+ // Smaller stacks at 71%, 80%, 85.5%.
+ // Image 1: assets/exterior-factory.png
+ const chimneys = [
+ { x: 77.5, y: 51.0, size: 22, dur: 7.2, drift: -0.3 },
+ { x: 80.5, y: 49.5, size: 32, dur: 8.0, drift: -0.4 },
+ { x: 84.5, y: 50.4, size: 30, dur: 7.6, drift: 0.2 },
+ { x: 86.5, y: 51.0, size: 22, dur: 7.0, drift: 0.3 },
+ { x: 89.5, y: 49.8, size: 32, dur: 8.2, drift: -0.2 },
+ { x: 92.0, y: 51.4, size: 22, dur: 7.4, drift: 0.4 },
+ ];
+
+ return (
+
+
+ {/* Image 1 — exterior factory */}
+
+
+
+
+
+
+
+ SCROLL
+
+
+ );
+}
+
+/* ───────────────── ProductSection ───────────────── */
+function ProductSection({ bgRef, contentRef }) {
+ return (
+
+
+ {/* Image 2 — factory interior / assembly line */}
+
+ {/* Robotic arm idle motion: anchored to where the arms sit in the image */}
+
+
+
+ {/* Conveyor pulse strip */}
+
+
+
+
+
+
+ SYSTEM ONLINE — NODE 02
+
+
+ Facere is a
+
+ Hardware Design Agent
+
+
+ From natural-language requirements to engineering files, Facere executes an end-to-end agent workflow
+
+
+ {/* Image 3 — PCB / chip */}
+
+
+
+
+
+
+
+ NODE 03 — SUBSTRATE
+
+
+ Get started with Facere
+
+
Install the CLI
+
+
+
+
+
+
+ ~/facere — bash
+
+
+ $
+ {cmd}
+
+
+
+ {copied ? "✓ COPIED" : "CLICK TO COPY"}
+
+
+
+
e.preventDefault()}>
+ docs.facere.ai/cli →
+
+
+
FACERE
+
+ {["EXT", "INT", "SUB"].map((label, i) => (
+
i ? "is-past" : ""}`}>
+
+ {label}
+
+ ))}
+
+
+
+ DEPTH {Math.round(progress * 100).toString().padStart(2, "0")}
+
+