+
{v.name}
{v.pitch}
+ {/* Visible label for the card-wide link below. */} + + Explore venture + +
+
+
+
+
+ The flywheel
+
+ Every turn makes the
+
+
+ {/* Wheel (large screens) */}
+
+ Every turn makes the next one stronger.
+
+ + Cropsphere is a flywheel, not four separate products. Better farming creates better + food; engaged consumers create data and revenue; regenerative activity creates + measurable environmental value, and all of it brings more farms in. +
+ {pinned ? ( +
+
+ {String(active + 1).padStart(2, "0")}
+ / {String(n).padStart(2, "0")}
+
+
+
+
+
+ Scroll to turn
+
+
+ ) : null}
+ setHeld(true)}
+ onPointerLeave={() => setHeld(false)}
+ >
+
+ {FLYWHEEL.map((f, i) => {
+ const Icon = f.icon;
+ const on = i === active;
+ return (
+
+ );
+ })}
+
+
+ {/* Loop list (small screens) */}
+
+
+
+
+ {current.label}
+ + {current.desc} +
+-
+ {FLYWHEEL.map((f, i) => {
+ const Icon = f.icon;
+ return (
+
-
+ + ++ {i < FLYWHEEL.length - 1 ? ( +
+ + + {f.label} + + {f.desc} + + + + ) : null} +
+ );
+ })}
+ - + ↺ More farms join, and the cycle repeats + +
+
+ Revenue from every layer.
+
+ }
+ >
+
+ {/* Columns rise at different speeds, like bars growing (.rise-staggered). */}
+
+ + A multi-layer revenue architecture rather than a business that depends on selling + software alone. Potential revenue streams: +
+
+ {REVENUE.map((r, i) => (
+
+
+
+ ))}
+ {r.product}
+ -
+ {r.items.map((it) => (
+
- + + {it} + + ))} +
+ In one paragraph
+
+
+
+ The result is a closed loop: better farming creates better food, better consumer + engagement creates more data and revenue, and regenerative activity creates measurable + environmental value. +
+A first look at companies being engineered on the KapFoundry engine.
-
+ ReactNode> = {
+ cropsphere: CropsphereStory,
+ "doormile-wings": DoorMileStory,
+ "loyaly-ai": LoyalyStory,
+};
+
+/** Looks a venture up by its URL slug. */
+export function findVenture(slug: string) {
+ return VENTURES.find((v) => v.slug === slug);
+}
+
+/**
+ * Everything on this page comes from what the site already says about the venture and its
+ * vertical; nothing about stage, traction or team is implied.
+ */
+export function VentureDetail({ slug }: { slug: string }) {
+ const v = findVenture(slug);
+ if (!v) return null;
+ const i = VENTURES.indexOf(v);
+ const next = VENTURES[(i + 1) % VENTURES.length];
+ const Icon = v.icon;
+ const Story = VENTURE_STORIES[v.slug];
+
+ return (
+ <>
+ {/* Hero: the venture's own photo, full bleed */}
+
+
+
+ {Story ? (
+
+
+
+ {/* What we build */}
+
+
+
+
+ )}
+
+ {/* Built on the engine: the same framework and stack as every venture */}
+
+
+
+ {/* Call to action */}
+
+
+
+
+ {/* Next venture */}
+ {next !== v ? (
+
+
+
+ ) : null}
+
+ );
+}
diff --git a/src/components/site/sections.tsx b/src/components/site/sections.tsx
index c9a7a00..c4a6d62 100644
--- a/src/components/site/sections.tsx
+++ b/src/components/site/sections.tsx
@@ -1,4 +1,5 @@
import {
+ memo,
useCallback,
useEffect,
useRef,
@@ -50,7 +51,13 @@ import {
Workflow,
type LucideIcon,
} from "lucide-react";
-import { Cursor, SplitTitle, useScramble, useSmoothScroll } from "@/components/site/motion";
+import {
+ Cursor,
+ SplitTitle,
+ usePauseOffscreen,
+ useScramble,
+ useSmoothScroll,
+} from "@/components/site/motion";
import { LensStatement, MoltenMark, VelocityTicker } from "@/components/site/creative";
import { CONTACT_EMAIL, INTERESTS, sendContactEnquiry, type ContactInput } from "@/lib/contact";
// Brand assets cut from kapfoundry-logo-1.png (emblem, wordmark, full lockup).
@@ -66,9 +73,9 @@ import vFoodtech from "@/assets/vertical-foodtech.jpg";
import vCarbon from "@/assets/vertical-carbon.jpg";
import vHealthtech from "@/assets/vertical-healthtech.jpg";
// Card photography (Unsplash License): see src/assets/cards/CREDITS.md.
-import imgFoundry from "@/assets/cards/studio-foundry.webp";
-import imgTower from "@/assets/cards/holding-tower.webp";
-import imgSpiral from "@/assets/cards/compound-spiral.webp";
+import imgStudioTeam from "@/assets/cards/pillar-studio-team.webp";
+import imgHoldingHq from "@/assets/cards/pillar-holding-hq.webp";
+import imgCompoundGrowth from "@/assets/cards/pillar-compound-growth.webp";
import imgVision from "@/assets/cards/ai-vision.webp";
import imgAgentic from "@/assets/cards/ai-agentic.webp";
import imgEnterprise from "@/assets/cards/ai-enterprise.webp";
@@ -109,14 +116,7 @@ const NAV = [
];
export type SitePageName =
- | "home"
- | "studio"
- | "framework"
- | "portfolio"
- | "ai"
- | "investors"
- | "about"
- | "contact";
+ "home" | "studio" | "framework" | "portfolio" | "ai" | "investors" | "about" | "contact";
const VERTICALS = [
{
@@ -210,6 +210,7 @@ const VERTICALS = [
"Supply-chain digitization",
"Yield prediction and farm analytics",
],
+ example: "Cropsphere. The operating infrastructure for regenerative agriculture.",
},
{
n: "05",
@@ -462,22 +463,19 @@ function useScrollReveal() {
useEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const timers: number[] = [];
- const io = new IntersectionObserver(
- (entries) => {
- // Elements that arrive together (a grid row, a fast scroll) cascade in reading order.
- const arriving = entries
- .filter((e) => e.isIntersecting)
- .sort(
- (a, b) =>
- a.boundingClientRect.top - b.boundingClientRect.top ||
- a.boundingClientRect.left - b.boundingClientRect.left,
- );
- arriving.forEach((entry, i) => {
- const el = entry.target as HTMLElement;
+ const pending = new Set();
+
+ // Reveal a group of elements, cascading them in reading order.
+ const revealAll = (els: HTMLElement[]) => {
+ els
+ .map((el) => ({ el, r: el.getBoundingClientRect() }))
+ .sort((a, b) => a.r.top - b.r.top || a.r.left - b.r.left)
+ .forEach(({ el }, i) => {
+ if (!pending.delete(el)) return;
+ io.unobserve(el);
const batchDelay = Math.min(i, 5) * REVEAL_BATCH_STEP;
el.style.setProperty("--batch-delay", `${batchDelay}ms`);
el.classList.add("is-visible");
- io.unobserve(el);
// Once settled, drop the reveal classes so the element's own hover transitions return.
const own = parseFloat(el.style.getPropertyValue("--reveal-delay")) || 0;
const stagger = el.dataset.reveal === "stagger" ? el.children.length * 80 : 0;
@@ -488,9 +486,29 @@ function useScrollReveal() {
),
);
});
- },
+ };
+
+ const io = new IntersectionObserver(
+ (entries) =>
+ revealAll(entries.filter((e) => e.isIntersecting).map((e) => e.target as HTMLElement)),
{ rootMargin: "0px 0px -10% 0px" },
);
+
+ // A fast fling, an anchor jump or the End key can carry an element past the screen between
+ // two frames, so the observer never sees it on screen and it would stay hidden. Catch those:
+ // anything whose top is already above the reveal line is revealed straight away.
+ let frame = 0;
+ const sweep = () => {
+ frame = 0;
+ const line = window.innerHeight * 0.9;
+ const passed = [...pending].filter((el) => el.getBoundingClientRect().top < line);
+ if (passed.length) revealAll(passed);
+ if (!pending.size) window.removeEventListener("scroll", onScroll);
+ };
+ const onScroll = () => {
+ if (!frame) frame = requestAnimationFrame(sweep);
+ };
+
for (const el of document.querySelectorAll("[data-reveal]")) {
// Leave anything already on screen alone so it never flickers after hydration.
if (el.getBoundingClientRect().top < window.innerHeight) continue;
@@ -500,10 +518,14 @@ function useScrollReveal() {
);
}
el.classList.add("reveal-pending");
+ pending.add(el);
io.observe(el);
}
+ window.addEventListener("scroll", onScroll, { passive: true });
return () => {
io.disconnect();
+ window.removeEventListener("scroll", onScroll);
+ cancelAnimationFrame(frame);
timers.forEach(clearTimeout);
};
}, []);
@@ -692,96 +714,98 @@ function Nav({ page }: { page: SitePageName }) {
const isCurrent = (href: string) => href === `/${page}`;
return (
<>
+ {/* Loyaly-style header: transparent over the hero with a dark nav capsule; once scrolled
+ it becomes a floating cream island with rounded lower corners. */}
-
-
{VENTURES.map((v, i) => {
const Icon = v.icon;
return (
{v.vertical}
-
+ {/* One link over the whole card: click anywhere, one tab stop. */}
+
);
})}
@@ -963,3 +996,301 @@ export function PortfolioIndex() {
/>
);
}
+
+// ---------------------------------------------------------------------------------------------
+// Venture detail page (/ventures/$slug)
+// ---------------------------------------------------------------------------------------------
+
+/** Ventures with a full story of their own; the rest get the generic vertical sections. */
+const VENTURE_STORIES: Record+
+ {/* Pulls back into a rounded card as the hero scrolls away (.venture-photo). */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The problem
+
+ {v.vertical}:
+
+
+ {v.vertical}: {v.tag.toLowerCase()}.
+
+ + {v.name} is being built for a market held back by the same problems, again and + again. +
+-
+ {v.problem.map((p, k) => (
+
- + + + + 0{k + 1} + + + {p} + + + ))} +
+
+ What we build, AI-first.
+
+ }
+ >
+
+
+ + Where KapFoundry focuses in {v.vertical.toLowerCase()}, and the ground {v.name} is + built on. +
+-
+ {v.solution.map((s) => (
+
-
+
+
+ + + {s} + +
+ ))}
+
+
+ Built on the KapFoundry engine.
+
+ }
+ >
+
+
+
+ + Like every venture in the studio, {v.name} moves through the same six stages and + launches with a mature company's stack. +
+-
+ {FRAMEWORK.map((f) => {
+ const StageIcon = f.icon;
+ return (
+
-
+ + + {f.n} + ++
+ {f.title}+{f.body}
+
+ );
+ })}
+
+ {STACK.map((s) => (
+
+ {s.label}
+
+ ))}
+
+
+
+ Interested in {v.name}?
+
+
+ Interested in {v.name}? Let's talk.
+
+
+
+ + Partners, investors and operators: we'd like to hear from you. +
+ + Speak with our team +
+
+
+
+ Next venture
+ {next.vertical}
+
+
+
+ {next.name}
+
+
+
+
+
+
+ {next.pitch}
+