What this is
This page is a clean code handoff for review. It intentionally excludes node_modules and built output so someone can inspect the real source without wading through dependency noise.
File
package.json
{
"name": "sidewave-style-agency",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@types/three": "^0.184.1",
"gsap": "^3.15.0",
"react": "^19.2.6",
"react-dom": "^19.2.6",
"three": "^0.184.0"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@types/node": "^24.12.3",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^10.3.0",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.6.0",
"typescript": "~6.0.2",
"typescript-eslint": "^8.59.2",
"vite": "^8.0.12"
}
}
File
README.md
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
## React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
File
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
File
eslint.config.js
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
globals: globals.browser,
},
},
])
File
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundry Works — AI Agent Systems</title>
<meta name="description" content="Foundry Works builds bespoke AI agent systems for growth-stage companies. Real outcomes, not template playbooks." />
<meta name="theme-color" content="#0a0a0f" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
File
tsconfig.app.json
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "es2023",
"lib": ["ES2023", "DOM"],
"module": "esnext",
"types": ["vite/client"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
File
tsconfig.json
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
File
tsconfig.node.json
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "es2023",
"lib": ["ES2023"],
"module": "esnext",
"types": ["node"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}
File
src/App.css
/* ── App-level overrides ─────────────────────────────── */
/* Strip Vite scaffold styles */
#root {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
text-align: left;
border: none;
min-height: 100svh;
display: block;
}
File
src/App.tsx
/**
* Foundry Works — Cinematic Agency Site
* One-page narrative scroll experience.
*/
import './App.css'
import NeonCanvas from './components/NeonCanvas'
import SectionEnter from './components/sections/SectionEnter'
import SectionBuild from './components/sections/SectionBuild'
import SectionWork from './components/sections/SectionWork'
import SectionMethod from './components/sections/SectionMethod'
import SectionBegin from './components/sections/SectionBegin'
import { useScrollColour } from './hooks/useScrollColour'
export default function App() {
// Drives CSS variable colour transitions across the scroll journey
useScrollColour()
return (
<>
{/* Fixed WebGL atmospheric layer — sits behind all content */}
<NeonCanvas />
{/* Navigation — minimal, anchors only */}
<header role="banner">
<nav
className="site-nav"
aria-label="Main navigation"
>
<a href="#enter" className="nav-wordmark" aria-label="Foundry Works home">
FOUNDRY<span className="nav-dot">.</span>WORKS
</a>
<ul className="nav-links" role="list">
<li><a href="#build" className="nav-link">Build</a></li>
<li><a href="#work" className="nav-link">Work</a></li>
<li><a href="#method" className="nav-link">Method</a></li>
<li>
<a
href="#begin"
className="nav-link nav-link--cta"
aria-label="Start a conversation with Foundry Works"
>
Begin
</a>
</li>
</ul>
</nav>
</header>
{/* Main content — five narrative chapters */}
<main id="main" role="main">
<SectionEnter />
<SectionBuild />
<SectionWork />
<SectionMethod />
<SectionBegin />
</main>
{/* Global nav styles — kept here to avoid a separate tiny CSS file */}
<style>{`
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
background: linear-gradient(
180deg,
rgba(10, 10, 15, 0.9) 0%,
transparent 100%
);
backdrop-filter: blur(0px);
}
.nav-wordmark {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--white);
text-decoration: none;
text-transform: uppercase;
}
.nav-dot {
color: var(--scroll-accent);
transition: color 0.6s ease;
}
.nav-links {
display: flex;
align-items: center;
gap: 2.5rem;
list-style: none;
}
.nav-link {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.nav-link:hover { color: var(--white); }
.nav-link:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 4px;
border-radius: 2px;
}
.nav-link--cta {
color: var(--scroll-accent);
transition: color 0.6s ease;
}
.nav-link--cta:hover {
color: var(--white);
}
@media (max-width: 640px) {
.nav-links {
gap: 1.5rem;
}
.nav-link { font-size: 0.65rem; }
}
@media (max-width: 400px) {
.nav-links li:nth-child(1),
.nav-links li:nth-child(3) {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nav-dot,
.nav-link--cta {
transition: none !important;
}
}
`}</style>
</>
)
}
File
src/assets/react.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>File
src/assets/vite.svg
<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>
File
src/components/NeonCanvas.tsx
/**
* NeonCanvas — Three.js procedural neon streak system
* Renders animated light streaks behind the hero using a custom ShaderMaterial.
* The canvas is fixed to the viewport and composited beneath all page content.
*/
import { useEffect, useRef } from 'react'
import * as THREE from 'three'
interface Streak {
start: THREE.Vector2
end: THREE.Vector2
life: number // 0–1, drives opacity
speed: number
thickness: number
colour: THREE.Color
delay: number // seconds before this streak activates
}
const PALETTE = [
new THREE.Color(0x7b2fff), // violet
new THREE.Color(0x5b1fff), // deep violet
new THREE.Color(0x00e5ff), // cyan
new THREE.Color(0x00aaff), // cool blue
new THREE.Color(0xff4d6d), // coral
]
function rand(min: number, max: number) {
return min + Math.random() * (max - min)
}
function randomStreak(vpW: number, vpH: number, delay: number): Streak {
const edge = Math.floor(Math.random() * 4)
const margin = 0.05
const span = rand(0.2, 0.7)
let startX: number, startY: number, endX: number, endY: number
if (edge === 0) {
// top edge
startX = rand(-margin, 1 + margin) * vpW
startY = -10
endX = startX + rand(-span, span) * vpW
endY = rand(0.3, 1.0) * vpH
} else if (edge === 1) {
// right edge
startX = vpW + 10
startY = rand(-margin, 1 + margin) * vpH
endX = rand(0, 0.7) * vpW
endY = startY + rand(-span, span) * vpH
} else if (edge === 2) {
// bottom edge
startX = rand(-margin, 1 + margin) * vpW
startY = vpH + 10
endX = startX + rand(-span, span) * vpW
endY = rand(0, 0.7) * vpH
} else {
// left edge
startX = -10
startY = rand(-margin, 1 + margin) * vpH
endX = rand(0.3, 1.0) * vpW
endY = startY + rand(-span, span) * vpH
}
return {
start: new THREE.Vector2(startX, startY),
end: new THREE.Vector2(endX, endY),
life: 0,
speed: rand(0.18, 0.45),
thickness: rand(0.3, 1.8),
colour: PALETTE[Math.floor(Math.random() * PALETTE.length)].clone(),
delay,
}
}
// Vertex shader — unit quad that we scale per streak
const vertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
// Fragment shader — tapered glow line from uv
const fragmentShader = `
uniform vec3 uColor;
uniform float uOpacity;
uniform float uLife;
varying vec2 vUv;
void main() {
// Along the streak (u), fade in at head and tail
float head = smoothstep(0.0, 0.08, vUv.x);
float tail = smoothstep(1.0, 1.0 - 0.4, vUv.x);
// Progress mask — only render up to uLife
float progressMask = step(vUv.x, uLife);
// Across the streak (v), soft Gaussian core
float dist = abs(vUv.y - 0.5) * 2.0;
float core = exp(-dist * dist * 18.0);
float glow = exp(-dist * dist * 3.5);
float alpha = (core * 1.0 + glow * 0.35) * head * tail * progressMask * uOpacity;
vec3 col = uColor + vec3(0.15) * core; // brighten core slightly
gl_FragColor = vec4(col, alpha);
}
`
export default function NeonCanvas() {
const mountRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
// Skip in reduced-motion environments
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const canvas = mountRef.current
if (!canvas) return
// ── Renderer ──────────────────────────────────────────
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: false })
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor(0x000000, 0)
// ── Scene + Ortho camera (pixel-perfect) ──────────────
const scene = new THREE.Scene()
let vpW = window.innerWidth
let vpH = window.innerHeight
const camera = new THREE.OrthographicCamera(0, vpW, vpH, 0, -1, 1)
renderer.setSize(vpW, vpH)
// ── Streak pool ───────────────────────────────────────
const STREAK_COUNT = 22
const streaks: Streak[] = []
const meshes: THREE.Mesh[] = []
const materials: THREE.ShaderMaterial[] = []
// Pre-build geometry (a unit plane we'll scale each frame)
const geo = new THREE.PlaneGeometry(1, 1, 1, 1)
for (let i = 0; i < STREAK_COUNT; i++) {
const delay = i * 0.18 + rand(0, 0.4)
const s = randomStreak(vpW, vpH, delay)
streaks.push(s)
const mat = new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms: {
uColor: { value: s.colour },
uOpacity: { value: 0.0 },
uLife: { value: 0.0 },
},
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,
})
materials.push(mat)
const mesh = new THREE.Mesh(geo, mat)
scene.add(mesh)
meshes.push(mesh)
}
// ── Helper — position mesh along a streak ─────────────
function updateMesh(idx: number) {
const s = streaks[idx]
const mesh = meshes[idx]
const mat = materials[idx]
const dx = s.end.x - s.start.x
const dy = s.end.y - s.start.y
const length = Math.sqrt(dx * dx + dy * dy)
const angle = Math.atan2(dy, dx)
const midX = (s.start.x + s.end.x) / 2
const midY = (s.start.y + s.end.y) / 2
mesh.scale.set(length, s.thickness * 4 + 2, 1)
mesh.position.set(midX, midY, 0)
mesh.rotation.z = angle
mat.uniforms.uColor.value = s.colour
mat.uniforms.uLife.value = s.life
}
// ── Animation loop ────────────────────────────────────
let elapsed = 0
let rafId: number
let lastTime = performance.now()
// Phase 1: 0–4s — load-in, streaks spawn sequentially
// Phase 2: 4s+ — idle particle field, slow new streaks
function tick() {
rafId = requestAnimationFrame(tick)
const now = performance.now()
const dt = Math.min((now - lastTime) / 1000, 0.05)
lastTime = now
elapsed += dt
for (let i = 0; i < STREAK_COUNT; i++) {
const s = streaks[i]
const mat = materials[i]
if (elapsed < s.delay) continue
const age = elapsed - s.delay
if (age < 1.2) {
// Fade in phase
mat.uniforms.uOpacity.value = Math.min(age / 0.4, 1) * 0.75
}
// Advance life (draw length progress)
if (s.life < 1.0) {
s.life = Math.min(s.life + dt * s.speed * 0.9, 1.0)
}
// After drawn: linger then fade out
if (s.life >= 1.0) {
const linger = age - 1.2 / s.speed
if (linger > 0) {
const fadeOut = Math.max(0, 1 - linger * 0.35)
mat.uniforms.uOpacity.value = fadeOut * 0.75
if (fadeOut <= 0) {
// Respawn
const newDelay = elapsed + rand(0.5, 3.0)
streaks[i] = randomStreak(vpW, vpH, newDelay)
streaks[i].delay = newDelay
materials[i].uniforms.uColor.value = streaks[i].colour
}
}
}
updateMesh(i)
}
renderer.render(scene, camera)
}
tick()
// ── Resize ────────────────────────────────────────────
function handleResize() {
vpW = window.innerWidth
vpH = window.innerHeight
renderer.setSize(vpW, vpH)
camera.right = vpW
camera.top = vpH
camera.updateProjectionMatrix()
}
window.addEventListener('resize', handleResize)
return () => {
cancelAnimationFrame(rafId)
window.removeEventListener('resize', handleResize)
geo.dispose()
materials.forEach(m => m.dispose())
renderer.dispose()
}
}, [])
return (
<canvas
id="hero-canvas"
ref={mountRef}
aria-hidden="true"
/>
)
}
File
src/components/Silhouette.tsx
/**
* Silhouette — a lone standing figure rendered as an SVG path.
* Pure CSS. No external assets.
*/
export default function Silhouette() {
return (
<svg
className="silhouette"
viewBox="0 0 120 280"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
>
<defs>
<radialGradient id="bodyGrad" cx="50%" cy="40%" r="55%">
<stop offset="0%" stopColor="#a060ff" stopOpacity="0.18" />
<stop offset="100%" stopColor="#7b2fff" stopOpacity="0.0" />
</radialGradient>
<filter id="figureGlow" x="-40%" y="-20%" width="180%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<linearGradient id="figureGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#c8a0ff" stopOpacity="0.95" />
<stop offset="60%" stopColor="#7b2fff" stopOpacity="0.7" />
<stop offset="100%" stopColor="#3a0099" stopOpacity="0.2" />
</linearGradient>
</defs>
{/* Ambient glow behind figure */}
<ellipse cx="60" cy="200" rx="48" ry="20" fill="url(#bodyGrad)" />
{/* Figure path — head, torso, arms, legs */}
<g filter="url(#figureGlow)" fill="url(#figureGrad)">
{/* Head */}
<circle cx="60" cy="28" r="14" />
{/* Neck */}
<rect x="55" y="40" width="10" height="10" rx="2" />
{/* Torso */}
<path d="
M 44 50
C 40 52 36 58 35 68
L 32 105
C 31 110 34 114 40 115
L 52 116
L 52 155
L 57 155
L 57 116
L 63 116
L 63 155
L 68 155
L 68 116
L 80 115
C 86 114 89 110 88 105
L 85 68
C 84 58 80 52 76 50
Z
" />
{/* Left arm — slight forward reach */}
<path d="
M 36 56
C 30 62 22 75 18 88
C 16 94 18 98 22 99
L 26 100
C 30 101 33 98 34 92
L 37 78
L 40 68
Z
" />
{/* Right arm — relaxed down */}
<path d="
M 84 56
C 90 62 96 76 98 90
C 100 96 98 100 94 101
L 90 102
C 86 103 83 100 82 94
L 80 78
L 79 68
Z
" />
{/* Left leg */}
<path d="
M 52 155
L 48 210
L 45 250
C 44 256 46 260 50 261
L 56 261
C 59 261 61 258 60 254
L 58 210
L 57 155
Z
" />
{/* Right leg */}
<path d="
M 63 155
L 62 210
L 60 254
C 59 258 61 261 64 261
L 70 261
C 74 260 76 256 75 250
L 72 210
L 68 155
Z
" />
</g>
{/* Ground fade */}
<ellipse cx="60" cy="265" rx="30" ry="5" fill="#7b2fff" opacity="0.3" />
</svg>
)
}
File
src/components/sections/SectionBegin.module.css
.begin {
position: relative;
padding: clamp(7rem, 14vw, 12rem) 0 0;
overflow: visible;
}
/* Deep violet atmospheric glow */
.glow {
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%);
width: 70vw;
height: 60vh;
background: radial-gradient(
ellipse at center,
rgba(123, 47, 255, 0.18) 0%,
rgba(0, 229, 255, 0.08) 50%,
transparent 70%
);
pointer-events: none;
filter: blur(30px);
}
.inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
max-width: 800px;
}
.chapterLabel {
color: var(--violet);
opacity: 0.8;
}
.headline {
color: var(--white);
}
.sub {
max-width: 50ch;
}
/* Form */
.form {
width: 100%;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.inputGroup {
display: flex;
gap: 0;
border: 1px solid rgba(123, 47, 255, 0.35);
border-radius: 4px;
overflow: hidden;
background: var(--void-surface);
transition: border-color 0.3s;
}
.inputGroup:focus-within {
border-color: var(--violet);
box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.12);
}
.input {
flex: 1;
padding: 1rem 1.25rem;
background: transparent;
border: none;
color: var(--white);
font-family: var(--font-body);
font-size: 0.95rem;
outline: none;
}
.input::placeholder { color: var(--muted); }
.submit {
padding: 1rem 1.5rem;
background: var(--violet);
border: none;
color: var(--white);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
white-space: nowrap;
transition: background 0.3s;
}
.submit:hover { background: #9040ff; }
.submit:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: -2px;
}
.errorMsg {
font-size: 0.82rem;
color: var(--coral);
font-family: var(--font-mono);
}
.confirm {
font-size: 1.1rem;
color: var(--cyan);
font-weight: 500;
padding: 1rem 0;
}
/* Alt links */
.altLinks {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.altLabel {
color: rgba(107, 107, 138, 0.6);
}
.altLink {
color: var(--white);
font-size: 0.95rem;
text-decoration: none;
border-bottom: 1px solid rgba(123, 47, 255, 0.4);
padding-bottom: 1px;
transition: border-color 0.3s, color 0.3s;
}
.altLink:hover {
color: var(--cyan);
border-color: var(--cyan);
}
.altLink:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
border-radius: 2px;
}
/* Footer */
.footer {
margin-top: clamp(5rem, 10vw, 8rem);
border-top: 1px solid var(--border-subtle);
padding: 2.5rem 0;
}
.footerInner {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.wordmark {
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.25em;
color: var(--white);
}
.dot {
color: var(--violet);
}
.footerMeta {
margin-left: auto;
color: rgba(107, 107, 138, 0.5);
}
.footerNav {
display: flex;
gap: 2rem;
}
.footerLink {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.footerLink:hover { color: var(--white); }
.footerLink:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
border-radius: 2px;
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
.inputGroup { flex-direction: column; }
.submit { text-align: center; }
.footerInner { flex-direction: column; align-items: flex-start; gap: 1rem; }
.footerMeta { margin-left: 0; }
}
File
src/components/sections/SectionBegin.tsx
/**
* Chapter 5 — BEGIN
* CTA section with email capture and footer.
*/
import { useRef, useEffect, useState } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import styles from './SectionBegin.module.css'
gsap.registerPlugin(ScrollTrigger)
export default function SectionBegin() {
const sectionRef = useRef<HTMLElement>(null)
const [email, setEmail] = useState('')
const [submitted, setSubmitted] = useState(false)
const [error, setError] = useState('')
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const ctx = gsap.context(() => {
gsap.from('.begin-inner > *', {
opacity: 0,
y: 50,
stagger: 0.14,
duration: 1.4,
ease: 'power4.out',
scrollTrigger: {
trigger: sectionRef.current,
start: 'top 70%',
},
})
}, sectionRef)
return () => ctx.revert()
}, [])
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
if (!email || !email.includes('@')) {
setError('Enter a valid email address.')
return
}
setError('')
setSubmitted(true)
// In production: send to API/Zapier/etc.
}
return (
<section
className={styles.begin}
id="begin"
ref={sectionRef}
aria-labelledby="begin-heading"
>
{/* Atmospheric glow */}
<div className={styles.glow} aria-hidden="true" />
<div className="container">
<div className={`begin-inner ${styles.inner}`}>
<span className={`label ${styles.chapterLabel}`}>Chapter 05 — Begin</span>
<h2
id="begin-heading"
className={`headline ${styles.headline}`}
>
Ready to build<br />
something real?
</h2>
<p className={`subhead ${styles.sub}`}>
Tell us what you are trying to solve. We will come back within 24 hours with a clear position on whether we can help and how.
</p>
{!submitted ? (
<form
className={styles.form}
onSubmit={handleSubmit}
noValidate
aria-label="Start a conversation with Foundry Works"
>
<div className={styles.inputGroup}>
<label htmlFor="email-input" className="visually-hidden">
Your email address
</label>
<input
id="email-input"
type="email"
name="email"
placeholder="your@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
className={styles.input}
aria-required="true"
aria-describedby={error ? 'email-error' : undefined}
autoComplete="email"
/>
<button
type="submit"
className={styles.submit}
aria-label="Send your email to start a conversation"
>
Start the conversation
</button>
</div>
{error && (
<p
id="email-error"
className={styles.errorMsg}
role="alert"
aria-live="polite"
>
{error}
</p>
)}
</form>
) : (
<p className={styles.confirm} role="status" aria-live="polite">
Got it. We will be in touch shortly.
</p>
)}
{/* Alternatives */}
<div className={styles.altLinks}>
<span className={`label ${styles.altLabel}`}>or reach us directly</span>
<a
href="mailto:jason@foundryworks.io"
className={styles.altLink}
aria-label="Send an email to Foundry Works"
>
jason@foundryworks.io
</a>
</div>
</div>
</div>
{/* Footer strip */}
<footer className={styles.footer} role="contentinfo">
<div className="container">
<div className={styles.footerInner}>
<span className={styles.wordmark}>
FOUNDRY<span className={styles.dot}> </span>WORKS
</span>
<span className={`label ${styles.footerMeta}`}>
© {new Date().getFullYear()} Foundry Works Ltd. All rights reserved.
</span>
<nav
className={styles.footerNav}
aria-label="Footer navigation"
>
<a href="#enter" className={styles.footerLink}>Top</a>
<a href="#build" className={styles.footerLink}>Build</a>
<a href="#work" className={styles.footerLink}>Work</a>
<a href="#method" className={styles.footerLink}>Method</a>
</nav>
</div>
</div>
</footer>
</section>
)
}
File
src/components/sections/SectionBuild.module.css
.build {
position: relative;
padding: clamp(6rem, 12vw, 10rem) 0;
background: transparent;
}
.bg {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(16, 10, 36, 0.65) 30%,
rgba(16, 10, 36, 0.65) 70%,
transparent 100%
);
pointer-events: none;
}
.head {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: clamp(3rem, 6vw, 5rem);
max-width: 700px;
}
.chapterLabel {
display: block;
color: var(--violet);
opacity: 0.8;
}
.headline {
color: var(--white);
}
.intro {
max-width: 52ch;
}
/* Capability grid */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.card {
position: relative;
padding: clamp(2rem, 4vw, 3rem);
background: var(--void-surface);
border: 1px solid var(--border-subtle);
transition: background 0.4s, border-color 0.4s;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(123, 47, 255, 0.06) 0%,
transparent 60%
);
opacity: 0;
transition: opacity 0.4s;
}
.card:hover {
background: var(--void-raised);
border-color: rgba(123, 47, 255, 0.35);
}
.card:hover::before { opacity: 1; }
.cardNumber {
display: block;
color: var(--violet);
opacity: 0.6;
margin-bottom: 1.25rem;
}
.cardTitle {
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 600;
color: var(--white);
letter-spacing: -0.02em;
margin-bottom: 0.875rem;
line-height: 1.2;
}
.cardBody {
font-size: 0.95rem;
color: var(--muted);
line-height: 1.7;
}
.cardLine {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--violet), var(--cyan));
transition: width 0.6s var(--ease-expo);
}
.card:hover .cardLine { width: 100%; }
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}
File
src/components/sections/SectionBuild.tsx
/**
* Chapter 2 — WE BUILD
* Agency intro with staggered reveal of capability pillars.
*/
import { useRef, useEffect } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import styles from './SectionBuild.module.css'
gsap.registerPlugin(ScrollTrigger)
const CAPABILITIES = [
{
number: '01',
title: 'Agent Architecture',
body: 'We design multi-agent systems that handle real workloads — research, proposal writing, SEO execution, outreach — without hand-holding.',
},
{
number: '02',
title: 'Automation Pipelines',
body: 'Bespoke workflows built on your stack. No SaaS tax. No vendor lock. Code you own, logic you control.',
},
{
number: '03',
title: 'AEO & Visibility',
body: 'We optimise content to rank in AI answers — ChatGPT, Perplexity, Google AI Overviews. The search landscape has shifted. We work in the new terrain.',
},
{
number: '04',
title: 'Strategy + Build',
body: 'We do not separate thinking from doing. Strategy ships as working systems. Outcomes over decks.',
},
]
export default function SectionBuild() {
const sectionRef = useRef<HTMLElement>(null)
const headRef = useRef<HTMLDivElement>(null)
const cardsRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const ctx = gsap.context(() => {
// Headline reveal
gsap.from('.build-headline', {
opacity: 0,
y: 60,
duration: 1.4,
ease: 'power4.out',
scrollTrigger: {
trigger: headRef.current,
start: 'top 80%',
},
})
// Capability cards stagger
gsap.from('.build-card', {
opacity: 0,
y: 50,
stagger: 0.14,
duration: 1.0,
ease: 'power3.out',
scrollTrigger: {
trigger: cardsRef.current,
start: 'top 75%',
},
})
}, sectionRef)
return () => ctx.revert()
}, [])
return (
<section
className={styles.build}
id="build"
ref={sectionRef}
aria-labelledby="build-heading"
>
{/* Background tint */}
<div className={styles.bg} aria-hidden="true" />
<div className="container">
{/* Section heading */}
<div className={styles.head} ref={headRef}>
<span className={`label ${styles.chapterLabel}`}>Chapter 02 — We Build</span>
<h2
id="build-heading"
className={`headline build-headline ${styles.headline}`}
>
AI systems built<br />
for real outcomes.
</h2>
<p className={`subhead ${styles.intro}`}>
Foundry Works architects and ships AI agent systems for growth-stage companies.
We are not a prompt shop. We build infrastructure.
</p>
</div>
{/* Capability grid */}
<div className={styles.grid} ref={cardsRef} role="list">
{CAPABILITIES.map((cap) => (
<article
key={cap.number}
className={`build-card ${styles.card}`}
role="listitem"
>
<span className={`label ${styles.cardNumber}`}>{cap.number}</span>
<h3 className={styles.cardTitle}>{cap.title}</h3>
<p className={styles.cardBody}>{cap.body}</p>
<div className={styles.cardLine} aria-hidden="true" />
</article>
))}
</div>
</div>
</section>
)
}
File
src/components/sections/SectionEnter.module.css
.enter {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: transparent;
}
/* Subtle perspective grid */
.grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(123, 47, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(123, 47, 255, 0.05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
pointer-events: none;
}
/* Silhouette — positioned at center-right */
.figure {
position: absolute;
right: clamp(4rem, 16vw, 22rem);
bottom: 0;
height: 78vh;
max-height: 640px;
display: flex;
align-items: flex-end;
opacity: 1;
pointer-events: none;
}
.figure :global(.silhouette) {
height: 100%;
width: auto;
filter: drop-shadow(0 0 32px rgba(123, 47, 255, 0.45))
drop-shadow(0 0 80px rgba(123, 47, 255, 0.2));
}
/* Copy — left-aligned */
.copy {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
padding: 0 clamp(1.5rem, 5vw, 4rem);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.label {
display: block;
margin-bottom: -0.5rem;
}
.tagline {
color: var(--white);
max-width: 16ch;
}
.tagline br { display: block; }
.sub {
max-width: 42ch;
}
/* CTA link */
.cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--white);
text-decoration: none;
padding: 0.875rem 2rem;
border: 1px solid rgba(123, 47, 255, 0.5);
border-radius: 3px;
background: rgba(123, 47, 255, 0.1);
letter-spacing: 0.05em;
transition: background 0.3s, border-color 0.3s, color 0.3s;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(123, 47, 255, 0.25), rgba(0, 229, 255, 0.1));
opacity: 0;
transition: opacity 0.3s;
}
.cta:hover::before { opacity: 1; }
.cta:hover { border-color: var(--violet); color: var(--white); }
.cta:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 3px;
}
.ctaArrow {
font-size: 1.2em;
transition: transform 0.3s var(--ease-expo);
}
.cta:hover .ctaArrow { transform: translateX(4px); }
/* Scroll indicator */
.scroll {
position: absolute;
bottom: 2.5rem;
left: clamp(1.5rem, 5vw, 4rem);
display: flex;
align-items: center;
gap: 1rem;
}
.scrollLabel {
color: rgba(107, 107, 138, 0.6);
}
.scrollLine {
width: 40px;
height: 1px;
background: linear-gradient(90deg, var(--violet), transparent);
animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; transform: scaleX(1); }
50% { opacity: 0.8; transform: scaleX(1.3); }
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
.figure {
right: -5vw;
height: 55vh;
opacity: 0.4;
}
.cta { font-size: 0.9rem; }
}
@media (max-width: 480px) {
.figure { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.scrollLine { animation: none; }
.figure { opacity: 0.8; }
}
File
src/components/sections/SectionEnter.tsx
/**
* Chapter 1 — ENTER
* Full-viewport hero. Silhouette + tagline fade in on load.
*/
import { useRef, useLayoutEffect } from 'react'
import gsap from 'gsap'
import Silhouette from '../Silhouette'
import styles from './SectionEnter.module.css'
export default function SectionEnter() {
const labelRef = useRef<HTMLSpanElement>(null)
const taglineRef = useRef<HTMLHeadingElement>(null)
const subRef = useRef<HTMLParagraphElement>(null)
const ctaRef = useRef<HTMLAnchorElement>(null)
const figRef = useRef<HTMLDivElement>(null)
useLayoutEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const ctx = gsap.context(() => {
const tl = gsap.timeline({ delay: 0.4 })
tl.from(figRef.current, {
opacity: 0,
y: 40,
duration: 2.2,
ease: 'power4.out',
})
.from(labelRef.current, {
opacity: 0,
y: 12,
duration: 0.8,
ease: 'power3.out',
}, '-=1.6')
.from(taglineRef.current, {
opacity: 0,
y: 24,
duration: 1.2,
ease: 'power3.out',
}, '-=0.5')
.from(subRef.current, {
opacity: 0,
y: 16,
duration: 1.0,
ease: 'power3.out',
}, '-=0.7')
.from(ctaRef.current, {
opacity: 0,
y: 12,
duration: 0.8,
ease: 'power3.out',
}, '-=0.6')
})
return () => ctx.revert()
}, [])
return (
<section
className={styles.enter}
id="enter"
aria-labelledby="hero-tagline"
>
{/* Atmospheric grid overlay */}
<div className={styles.grid} aria-hidden="true" />
{/* Silhouette */}
<div className={styles.figure} ref={figRef} aria-hidden="true">
<Silhouette />
</div>
{/* Copy */}
<div className={styles.copy}>
<span className={`label ${styles.label}`} ref={labelRef}>
Foundry Works — AI Agent Systems
</span>
<h1
id="hero-tagline"
className={`display ${styles.tagline}`}
ref={taglineRef}
>
We build the machines<br />
that build the work.
</h1>
<p className={`subhead ${styles.sub}`} ref={subRef}>
Bespoke AI agent systems. Deployed for real outcomes. No template playbooks.
</p>
<a
href="#build"
className={styles.cta}
ref={ctaRef}
aria-label="Explore what Foundry Works builds"
>
Enter
<span className={styles.ctaArrow} aria-hidden="true">→</span>
</a>
</div>
{/* Scroll indicator */}
<div className={styles.scroll} aria-hidden="true">
<span className={`label ${styles.scrollLabel}`}>scroll</span>
<div className={styles.scrollLine} />
</div>
</section>
)
}
File
src/components/sections/SectionMethod.module.css
.method {
position: relative;
padding: clamp(6rem, 12vw, 10rem) 0;
}
.bg {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 10, 32, 0.5) 40%,
rgba(0, 10, 32, 0.5) 60%,
transparent 100%
);
pointer-events: none;
}
.head {
max-width: 700px;
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.chapterLabel {
display: block;
color: var(--coral);
opacity: 0.8;
}
.headline {
color: var(--white);
}
.intro {
max-width: 52ch;
}
/* Step list */
.steps {
list-style: none;
padding: 0;
position: relative;
}
/* Vertical spine line */
.steps::before {
content: '';
position: absolute;
left: 2.5rem;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(
180deg,
var(--violet) 0%,
var(--cyan) 50%,
var(--coral) 100%
);
opacity: 0.25;
}
.step {
position: relative;
display: grid;
grid-template-columns: 5rem 1fr;
gap: 2rem;
padding: clamp(1.75rem, 3vw, 2.5rem) 0;
border-bottom: 1px solid var(--border-subtle);
transition: background 0.3s;
}
.step:last-child { border-bottom: none; }
.step:hover .stepTitle { color: var(--cyan); }
.stepNumber {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 0.2rem;
color: var(--violet);
font-size: 0.75rem;
position: relative;
}
/* Dot on the spine */
.stepNumber::before {
content: '';
position: absolute;
left: calc(2.5rem - 2rem - 3px);
top: 0.5rem;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--violet);
box-shadow: 0 0 8px var(--violet);
}
.stepContent {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.stepTitle {
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
font-weight: 600;
color: var(--white);
letter-spacing: -0.02em;
line-height: 1.2;
transition: color 0.3s;
}
.stepBody {
font-size: 0.95rem;
color: var(--muted);
line-height: 1.75;
max-width: 62ch;
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
.steps::before { left: 1rem; }
.step {
grid-template-columns: 3rem 1fr;
gap: 1rem;
}
.stepNumber::before {
left: calc(1rem - 1rem - 3px);
}
}
File
src/components/sections/SectionMethod.tsx
/**
* Chapter 4 — THE METHOD
* Process steps with staggered reveal and numbered spine.
*/
import { useRef, useEffect } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import styles from './SectionMethod.module.css'
gsap.registerPlugin(ScrollTrigger)
const STEPS = [
{
number: '01',
title: 'Brief & Terrain Mapping',
body: 'We start by understanding the actual problem. Not the brief as written — the brief beneath it. What does success look like in six months? What does the market not understand yet?',
},
{
number: '02',
title: 'System Design',
body: 'We architect the agent network. Which tasks get automated. Which need human judgment. Where the leverage points are. This is where most engagements win or lose.',
},
{
number: '03',
title: 'Build in Layers',
body: 'We ship working software in layers. Static first, then motion, then intelligence. You see something running inside week one. No long silent build cycles.',
},
{
number: '04',
title: 'Test Against Reality',
body: 'We run every system against real workflows before handoff. If it breaks in testing, we learn that before you do. QA is not a phase — it is a habit.',
},
{
number: '05',
title: 'Handoff & Iterate',
body: 'You get the code, the docs, and the training. We stay available. Most clients come back for the next system within ninety days.',
},
]
export default function SectionMethod() {
const sectionRef = useRef<HTMLElement>(null)
const stepsRef = useRef<HTMLOListElement>(null)
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const ctx = gsap.context(() => {
gsap.from('.method-head-inner > *', {
opacity: 0,
y: 40,
stagger: 0.12,
duration: 1.2,
ease: 'power4.out',
scrollTrigger: {
trigger: sectionRef.current,
start: 'top 78%',
},
})
gsap.from('.method-step', {
opacity: 0,
x: -40,
stagger: 0.15,
duration: 1.0,
ease: 'power3.out',
scrollTrigger: {
trigger: stepsRef.current,
start: 'top 80%',
},
})
}, sectionRef)
return () => ctx.revert()
}, [])
return (
<section
className={styles.method}
id="method"
ref={sectionRef}
aria-labelledby="method-heading"
>
<div className={styles.bg} aria-hidden="true" />
<div className="container">
<div className={`method-head-inner ${styles.head}`}>
<span className={`label ${styles.chapterLabel}`}>Chapter 04 — The Method</span>
<h2
id="method-heading"
className={`headline ${styles.headline}`}
>
How we work.
</h2>
<p className={`subhead ${styles.intro}`}>
A repeatable system. Not a rigid process. Every engagement is different. The discipline stays constant.
</p>
</div>
<ol
className={styles.steps}
ref={stepsRef}
aria-label="Our process steps"
>
{STEPS.map((step) => (
<li
key={step.number}
className={`method-step ${styles.step}`}
>
<span className={`label ${styles.stepNumber}`} aria-hidden="true">
{step.number}
</span>
<div className={styles.stepContent}>
<h3 className={styles.stepTitle}>{step.title}</h3>
<p className={styles.stepBody}>{step.body}</p>
</div>
<div className={styles.stepConnector} aria-hidden="true" />
</li>
))}
</ol>
</div>
</section>
)
}
File
src/components/sections/SectionWork.module.css
.work {
position: relative;
padding: clamp(6rem, 12vw, 10rem) 0;
}
.head {
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.chapterLabel {
display: block;
color: var(--cyan);
opacity: 0.8;
margin-bottom: 1rem;
}
.headline {
color: var(--white);
}
/* Three-column project cards */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
}
.card {
position: relative;
padding: clamp(2rem, 3.5vw, 2.75rem);
background: var(--void-surface);
border: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 1.75rem;
overflow: hidden;
cursor: default;
transition: transform 0.4s var(--ease-expo), background 0.4s;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 80% 80% at 50% -20%,
color-mix(in srgb, var(--card-accent) 18%, transparent),
transparent 70%
);
opacity: 0;
transition: opacity 0.5s;
}
.card:hover {
background: var(--void-raised);
transform: translateY(-4px);
}
.card:hover::before { opacity: 1; }
/* Animated glow border on hover */
.glowBorder {
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: inherit;
background: linear-gradient(var(--void-raised), var(--void-raised)) padding-box,
linear-gradient(135deg, var(--card-accent), transparent 60%) border-box;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
.card:hover .glowBorder { opacity: 1; }
.cardTop {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cardLabel {
color: color-mix(in srgb, var(--card-accent) 80%, var(--muted));
}
.cardTitle {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: var(--white);
letter-spacing: -0.03em;
line-height: 1.0;
}
.cardDesc {
font-size: 0.925rem;
color: var(--muted);
line-height: 1.7;
flex: 1;
}
.cardStat {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
}
.statValue {
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 700;
color: var(--card-accent);
letter-spacing: -0.03em;
line-height: 1.0;
}
.statLabel {
color: rgba(107, 107, 138, 0.7);
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.cards {
grid-template-columns: 1fr;
}
}
File
src/components/sections/SectionWork.tsx
/**
* Chapter 3 — THE WORK
* Three project cards with hover glow effect and staggered scroll reveal.
*/
import { useRef, useEffect } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import styles from './SectionWork.module.css'
gsap.registerPlugin(ScrollTrigger)
const PROJECTS = [
{
id: 'ngrnd',
label: 'Web3 / Token Launch',
title: 'nGRND',
description:
'Full TGE marketing engine — community growth, content automation, and AI-assisted narrative strategy across five channels in twelve weeks.',
stat: '12 weeks',
statLabel: 'from brief to TGE',
accentColor: '#7b2fff',
},
{
id: 'marketly',
label: 'SaaS / AEO Platform',
title: 'Marketly Digital',
description:
'Built the core AEO audit pipeline and UK market expansion playbook. Automated monthly reporting, keyword calendars, and client-facing outputs.',
stat: '3× faster',
statLabel: 'report cycle time',
accentColor: '#00e5ff',
},
{
id: 'ontrack',
label: 'Health Tech / Consumer',
title: 'OnTrack',
description:
'Agent system for ongoing content production and social scheduling. One brief in. Thirty days of output. Zero weekly standups.',
stat: '30 days',
statLabel: 'content pipeline automated',
accentColor: '#ff4d6d',
},
]
export default function SectionWork() {
const sectionRef = useRef<HTMLElement>(null)
const cardsRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const ctx = gsap.context(() => {
gsap.from('.work-label', {
opacity: 0,
y: 20,
duration: 1.0,
ease: 'power3.out',
scrollTrigger: {
trigger: sectionRef.current,
start: 'top 78%',
},
})
gsap.from('.work-card', {
opacity: 0,
y: 70,
stagger: 0.18,
duration: 1.2,
ease: 'power4.out',
scrollTrigger: {
trigger: cardsRef.current,
start: 'top 80%',
},
})
}, sectionRef)
return () => ctx.revert()
}, [])
return (
<section
className={styles.work}
id="work"
ref={sectionRef}
aria-labelledby="work-heading"
>
<div className="container">
<div className={styles.head}>
<span className={`label work-label ${styles.chapterLabel}`}>
Chapter 03 — The Work
</span>
<h2
id="work-heading"
className={`headline ${styles.headline}`}
>
Selected engagements.
</h2>
</div>
<div
className={styles.cards}
ref={cardsRef}
role="list"
>
{PROJECTS.map((project) => (
<article
key={project.id}
className={`work-card ${styles.card}`}
role="listitem"
style={{ '--card-accent': project.accentColor } as React.CSSProperties}
>
<div className={styles.cardTop}>
<span className={`label ${styles.cardLabel}`}>{project.label}</span>
<h3 className={styles.cardTitle}>{project.title}</h3>
</div>
<p className={styles.cardDesc}>{project.description}</p>
<div className={styles.cardStat}>
<span className={styles.statValue}>{project.stat}</span>
<span className={`label ${styles.statLabel}`}>{project.statLabel}</span>
</div>
{/* Glow border on hover */}
<div className={styles.glowBorder} aria-hidden="true" />
</article>
))}
</div>
</div>
</section>
)
}
File
src/hooks/useScrollColour.ts
/**
* useScrollColour — drives CSS custom property transitions
* as the user scrolls between narrative chapters.
* Violet (hero) → Cyan (build/work) → Coral (method/begin)
*/
import { useEffect } from 'react'
interface ColourStop {
progress: number // 0–1 of total document height
accent: string
glow: string
}
const COLOUR_STOPS: ColourStop[] = [
{ progress: 0.00, accent: '#7b2fff', glow: 'rgba(123,47,255,0.2)' },
{ progress: 0.25, accent: '#4a1fff', glow: 'rgba(74,31,255,0.2)' },
{ progress: 0.45, accent: '#00e5ff', glow: 'rgba(0,229,255,0.18)' },
{ progress: 0.65, accent: '#00c4dd', glow: 'rgba(0,196,221,0.18)' },
{ progress: 0.82, accent: '#ff4d6d', glow: 'rgba(255,77,109,0.2)' },
{ progress: 1.00, accent: '#ff2a50', glow: 'rgba(255,42,80,0.2)' },
]
function lerpHex(a: string, b: string, t: number): string {
const parse = (hex: string) => {
const c = hex.replace('#', '')
return [
parseInt(c.slice(0, 2), 16),
parseInt(c.slice(2, 4), 16),
parseInt(c.slice(4, 6), 16),
]
}
const [ar, ag, ab] = parse(a)
const [br, bg, bb] = parse(b)
const r = Math.round(ar + (br - ar) * t)
const g = Math.round(ag + (bg - ag) * t)
const bl = Math.round(ab + (bb - ab) * t)
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${bl.toString(16).padStart(2, '0')}`
}
function getColourAtProgress(progress: number) {
const stops = COLOUR_STOPS
for (let i = 0; i < stops.length - 1; i++) {
const a = stops[i]
const b = stops[i + 1]
if (progress >= a.progress && progress <= b.progress) {
const t = (progress - a.progress) / (b.progress - a.progress)
return {
accent: lerpHex(a.accent, b.accent, t),
glow: a.glow, // simple nearest-stop for glow
}
}
}
return { accent: stops[stops.length - 1].accent, glow: stops[stops.length - 1].glow }
}
export function useScrollColour() {
useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
const root = document.documentElement
function update() {
const scrolled = window.scrollY
const maxScroll = document.body.scrollHeight - window.innerHeight
const progress = maxScroll > 0 ? Math.min(scrolled / maxScroll, 1) : 0
const { accent, glow } = getColourAtProgress(progress)
root.style.setProperty('--scroll-accent', accent)
root.style.setProperty('--scroll-glow', glow)
}
update()
window.addEventListener('scroll', update, { passive: true })
return () => window.removeEventListener('scroll', update)
}, [])
}
File
src/index.css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');
/* ── Tokens ─────────────────────────────────────────── */
:root {
--void: #0a0a0f;
--void-mid: #10101a;
--void-surface: #14141f;
--void-raised: #1a1a28;
--violet: #7b2fff;
--cyan: #00e5ff;
--coral: #ff4d6d;
--white: #f0f0f8;
--muted: #a1a1c2;
--border-subtle: rgba(123, 47, 255, 0.15);
--border-mid: rgba(0, 229, 255, 0.2);
--font-body: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-inout: cubic-bezier(0.87, 0, 0.13, 1);
/* updated by scroll JS */
--scroll-accent: var(--violet);
--scroll-glow: rgba(123, 47, 255, 0.2);
}
/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
background: var(--void);
color: var(--white);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 2px; }
/* ── Typography ──────────────────────────────────────── */
.display {
font-size: clamp(3.5rem, 9vw, 8rem);
font-weight: 700;
line-height: 0.92;
letter-spacing: -0.04em;
}
.headline {
font-size: clamp(2rem, 5vw, 4.5rem);
font-weight: 600;
line-height: 1.0;
letter-spacing: -0.025em;
}
.subhead {
font-size: clamp(1rem, 2vw, 1.2rem);
font-weight: 400;
line-height: 1.65;
color: var(--muted);
}
.label {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
/* ── Layout container ────────────────────────────────── */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1.5rem, 5vw, 4rem);
}
section {
position: relative;
overflow: hidden;
}
/* ── WebGL canvas — fixed atmospheric layer ──────────── */
#hero-canvas {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* ── All sections sit above the canvas ───────────────── */
#root {
position: relative;
z-index: 1;
}
/* ── Utility ─────────────────────────────────────────── */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
#hero-canvas { display: none !important; }
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
File
src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
File
public/favicon.svg
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>File
public/icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="bluesky-icon" viewBox="0 0 16 17">
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
</symbol>
<symbol id="discord-icon" viewBox="0 0 20 19">
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
</symbol>
<symbol id="documentation-icon" viewBox="0 0 21 20">
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
</symbol>
<symbol id="github-icon" viewBox="0 0 19 19">
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
</symbol>
<symbol id="social-icon" viewBox="0 0 20 20">
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
</symbol>
<symbol id="x-icon" viewBox="0 0 19 19">
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
</symbol>
</svg>