#020308Cobalt Foundry’s own ground
Building blocks for interfaces that hold up.
Backgrounds, sections, components and templates — each one runs on my own site today. The plan is to pull every piece out into standalone code you can copy, and give it away.
Live, not screenshots
More in this light.
Every piece's colour is measured, so the nearest to your light come first — and each preview is the real piece running, under your pointer.
Into your project
Paste it in. It runs.
The code for the background you chose — the same source this page runs, not a copy of it. Change the light and the code follows.
01Install
Nothing to install — self-contained, paste-in code.
02Drop it in
import { FoundryField } from "./FoundryField";
export default function Example() {
return (
// Fills its nearest positioned ancestor (it renders itself `absolute
// inset-0`) — give it a sized, relatively positioned box.
<div className="relative isolate h-[32rem] w-full overflow-hidden rounded-2xl">
<FoundryField
colors={{
glow: "#1f6bff",
stream: "#2a6cff",
core: "#b8c4ff",
ground: "#010309",
panel: "#0d0d0f",
}}
/>
</div>
);
}03Keep the source
2 files, readable and yours — no package between you and it.
- FoundryField.tsx579 lines
- shader-surface.ts690 lines
How it's built
The standard every creation is held to.
Degrades honestly
A server-rendered CSS floor renders first — no JavaScript, no WebGL, or a blocked context still shows the real thing, never a blank box.
Every state designed
Loading, empty, error, disabled, long content — each is a real design, not just the happy path.
Reduced motion, complete
Prefers-reduced-motion freezes to one composed frame instead of a slower version of the same animation.
Copy-paste, not a package
Once a piece is extracted there's nothing to install — self-contained, readable code you paste in and it works.
Pricing
Free for now.
No sign-up, no attribution, no licence to wade through. Take what you need. The other two columns are reserved for paid tiers that don't exist yet — they get designed once there's something worth charging for.
Available now
Free
$0forever, for now
- No account required
- Commercial use is fine
- Permissive terms when a piece ships
Not available yet
Pro
—
Not available yet
Team
—
FAQ
Questions worth answering honestly.
Nothing below is promised that isn't already real, or clearly marked as planned.
Every background runs a WebGL surface over a server-rendered CSS floor, so no JavaScript, no WebGL, or a blocked context still gets you the real thing, not a blank box. Every state — loading, empty, error, disabled, long content — is designed, not just the happy path. Reduced motion freezes to one composed frame rather than degrading. And once a piece is extracted, there's no package to install: it's self-contained and readable, paste it in and it works.