Truth from the machine. Settled in 48 hours.
The institutional parametric risk exchange — a cinematic marketing site for Dr. Marcus Schmalbach's institutional-grade parametric insurance platform.
RYSKEX sells institutional parametric risk coverage — policies that pay out automatically when a measurable threshold breaches (wind speed, rainfall, index value), not after an adjuster argues with a claimant. The platform settles in 48 hours against public data feeds.
This repo is the marketing site that explains the product to insurers, reinsurers, risk managers, and treasury teams. It is not the exchange engine itself — it's the cinematic front door.
Target audience: institutional buyers (C-suite, risk officers). Everything is tuned for that — editorial typography, dark-first aesthetic, credibility strips, zero stock-photo energy.
| Production | ryskex-website.vercel.app |
| Status | All 6 routes live · 200 across the board |
| Deploy | Vercel (auto-deploy on master) |
| Capability | Detail |
|---|---|
| Cinematic intro | Play-once-per-session entrance screen — radial cobalt bloom, orbital rings draw in, wordmark unblurs, signal particle completes a half-orbit, then the whole overlay scales + fades up to reveal the site. Skippable (click, Esc, Space, Enter). Auto-dismisses after ~3.2 s. Respects prefers-reduced-motion. |
| Dark-first, light-mode opt-in | Canonical look is dark navy + cobalt + green. Light mode toggle ships brushed-silver founder card + token-aware text shadows. Hero sections wear a .dark-scope class so they stay cinematic even when the rest of the site swaps to light. |
| Six rich hero SVG pieces | One per page. Cursor-sprung parallax, orbital rings, 23° tilted wireframe globe with tick labels, Tower Bridge + Connecticut State Capitol SVG landmarks, pipeline diagrams, team-as-network — every page has ~400–500 lines of hand-tuned SVG. |
| Custom 1.25 px hairline icon set | Zero lucide-react imports. 14 brand icons in src/components/icons/brand/ — ArrowRight, Mail, MapPin, Chevron{Left,Right,Down}, Plus, Minus, Menu, X, Sun, Moon, Send, and siblings. currentColor-driven, strokeWidth overridable. |
| 9 motion primitives | Reveal, BlurIn, CharStagger, WordStagger, StaggerText, GradientSweep, CountUp, HairlineDraw, MagneticButton, TiltCard, ParallaxY, ScrollPin, ShimmerBadge, AnimatedGradientText, SmoothScroll, ScrollProgress, MagneticLink. All honor prefers-reduced-motion. |
| Motion timing constants | src/motion/constants.ts exports EASE_OUT_SOFT, EASE_IN_OUT, EASE_OUT, DURATION_FAST/NORMAL/SLOW/EPIC, STAGGER_CHILD. 29 files refactored to consume them for a coherent rhythm. |
| WCAG 2.2 AA | Skip-to-content link, global :focus-visible cobalt ring, mobile nav dialog with full focus trap (Esc + Shift+Tab cycling, focus restore), FAQ aria-controls → role="region" panels, single <h1> per page, audited alt text across every image. |
| Code-split routes | React.lazy per page + vendor chunking (react-core, framer, vendor). Main entry lands at ≈ 13 kB gzipped; largest single chunk (react-core) at ≈ 74 kB gz. Every page lazy-loads with a branded 2 px cobalt indeterminate progress bar. |
| Cross-browser hardening | @supports not (backdrop-filter) fallback for every glass surface. @supports not (background-clip: text) fallback to solid --accent. -webkit-text-fill-color: transparent pairing. Document overflow protection at 320 px. |
| SEO + meta | Per-route title/description/OG/Twitter registry at src/lib/meta.ts. Client-side Meta component updates document.title + upserts tags on route change. public/sitemap.xml + public/robots.txt shipped. |
| Error + loading boundaries | ErrorBoundary with inline-styled fallback (renders even if CSS fails), role="alert" + Reload/Home CTAs. Branded 404 page with staggered reveal. |
t=0.00s ┃ Deep navy. Black. Nothing yet.
t=0.10s ┃ Radial cobalt glow blooms from centre (60 % viewport ellipse).
t=0.30s ┃ Three dashed orbital rings unrotate into place.
t=0.60s ┃ 24 hairline tick marks cascade around the outer ring.
t=0.80s ┃ Core light pulses — scale 0.3 → 1.1 → 1.0, opacity 0 → 1 → 0.9.
t=0.95s ┃ "RYSKEX" wordmark drops + unblurs, letter-spacing eases 0.42em → 0.18em.
t=1.40s ┃ Cobalt→green hairline sweeps across beneath the wordmark.
t=1.55s ┃ "Truth from the machine" fades in, tracking 0.42em.
t=1.90s ┃ Hub codes surface bottom-centre — LDN · HFD · NYC · BER.
t=3.20s ┃ Whole overlay scales 1.04, blurs 8px, fades. Site revealed.
Click anywhere, press Esc/Space/Enter, or click the bottom-right Skip button to dismiss early. Plays once per browser session via sessionStorage.
All scored against the Vercel production build under mobile throttling.
| Route | Performance | Accessibility | Best Practices | SEO |
|---|---|---|---|---|
/ |
58 | 98 | 100 | 100 |
/platform |
57 | 98 | 100 | 100 |
/how-it-works |
60 | 98 | 100 | 100 |
/about |
58 | 94 | 100 | 100 |
/team |
56 | 98 | 100 | 100 |
/contact |
60 | 98 | 100 | 100 |
A11y 94–98 — one minor heading-order nit + one target-size on /about. SEO & Best Practices 100 across the board. Performance 56–60 is LCP/CLS-bound under mobile throttling; TBT is 0–41 ms (excellent). Full post-ship performance levers are listed in STATUS-final.md.
react-core 73.46 kB gz ████████████████████
framer 41.11 kB gz ███████████
Home 12.43 kB gz ███▏ ← page chunk
index.css 13.70 kB gz ███▌
index.js 12.06 kB gz ███ ← main entry
HowItWorks 5.82 kB gz █▌
Platform 5.98 kB gz █▌
Contact 5.68 kB gz █▌
About 5.48 kB gz █▌
Team 4.71 kB gz █▏
FourRails 3.66 kB gz █
Total dist/: 2.6 MB (including self-hosted woff2 for Instrument Serif + Geist + Geist Mono).
Desktop — 1440 px
|
 |
| Home · tilted globe, hub codes, TrustStrip | Platform · editorial long-form + custom hero art |
 |
 |
| How it works · 4-step pipeline | About · Mission / Vision / Tech carousel |
 |
 |
| Team · 9 members, greyscale → color on hover | Contact · two-office form + signal arc |
Mobile — 390 px
| Home | Contact |
|---|---|
 |
 |
07-build/
├── src/
│ ├── App.tsx React Router + lazy routes + ErrorBoundary + Intro
│ ├── main.tsx entry
│ ├── components/
│ │ ├── Intro.tsx ← cinematic session-once entrance
│ │ ├── ErrorBoundary.tsx inline-styled fallback, survives CSS failure
│ │ ├── Meta.tsx per-route document.title + meta tag upsert
│ │ ├── Nav.tsx floating pill, dialog-trap mobile menu
│ │ ├── Footer.tsx drifting orbs + token-driven palette
│ │ ├── RouteSuspense.tsx 2 px cobalt indeterminate bar + 60 vh spacer
│ │ ├── ThemeToggle.tsx spring cross-fade + aria-pressed
│ │ ├── ui/spotlight-card.tsx rAF-coalesced cursor-tracking spotlight
│ │ ├── icons/brand/ 14 custom 1.25 px hairline icons
│ │ ├── hero-art/ 6 rich per-page SVG hero pieces (400–500 LOC each)
│ │ │ ├── HomeHero.tsx 23° tilted globe, orbital rings, particles
│ │ │ ├── PlatformHero.tsx core engine + counter-parallax grid
│ │ │ ├── HowItWorksHero.tsx slab-float 4-step pipeline
│ │ │ ├── AboutHero.tsx founding medallion on star chart
│ │ │ ├── TeamHero.tsx mesh network, per-node hover reveal
│ │ │ └── ContactHero.tsx Hartford↔London signal arc
│ │ ├── city-art/ Tower Bridge + CT State Capitol SVGs
│ │ └── sections/ Hero, StatStrip, FeaturesGrid, Globe, FAQ, …
│ ├── motion/
│ │ ├── constants.ts EASE_OUT_SOFT, DURATION_*, STAGGER_CHILD
│ │ └── Reveal, BlurIn, CharStagger, CountUp, HairlineDraw, …
│ ├── pages/ Home, Platform, HowItWorks, About, Team, Contact, NotFound
│ ├── lib/
│ │ ├── data.ts copy ground truth
│ │ └── meta.ts per-route SEO registry
│ └── styles/
│ ├── tokens.css theme tokens (both modes)
│ ├── effects.css 13 visual effects (aurora, noise, dot-grid, beam…)
│ └── app.css glass primitives, section-ambient, seam-fades, bleeds
├── public/
│ ├── riskex-logo.svg
│ ├── hero/ 8 Pollinations-generated hero photos
│ ├── robots.txt
│ └── sitemap.xml
├── vercel.json SPA rewrites + immutable asset caching + security headers
└── vite.config.ts manualChunks: react-core · framer · vendor
git clone https://github.com/gtrush03/ryskex-website.git
cd ryskex-website
npm install
npm run dev # → http://localhost:5173npm run dev |
Vite dev server on port 5173, HMR + HTTPS-off |
npm run build |
TypeScript project-refs build → Vite production build → dist/ |
npm run preview |
Serves dist/ on port 4173 |
npm run typecheck |
tsc -b --noEmit across both project refs |
npm run lint |
ESLint across src/ |
rm -f tsconfig.app.tsbuildinfo tsconfig.node.tsbuildinfo
npm run typecheck # 0 errors
for p in / /platform /how-it-works /about /team /contact; do
curl -s -o /dev/null -w "$p → %{http_code}\n" "http://localhost:5173$p"
done # all 200
grep -rn "from \"lucide-react\"" src/ # empty
npm run build # success| Framework | Vite 6 · React 19 · TypeScript strict |
|---|---|
| Styling | Tailwind v4 (@tailwindcss/vite) · CSS custom properties for tokens · glass primitives + 13 visual effects layered in effects.css |
| Motion | Framer Motion 11 · 9+ motion primitives · global motion constants file · prefers-reduced-motion honored everywhere |
| Routing | react-router-dom 7 · lazy per-page splits · Suspense fallback branded |
| Typography | Instrument Serif (display) · Geist Variable (sans) · Geist Mono Variable (mono) — all self-hosted via @fontsource |
| Icons | 14 custom 1.25 px hairline SVG icons — zero runtime icon library |
| Deploy | Vercel — SPA rewrite, immutable asset caching, security headers |
| Quality gates | WCAG 2.2 AA · cross-browser @supports fallbacks · Lighthouse a11y 98 / SEO 100 / BP 100 |
┌─────────────────────────────────────────────────────────────┐
│ │
│ Primary Cobalt #3B72DE --accent │
│ Secondary Green #2EC46E --accent-2 │
│ Canvas Deep navy #070B14 --bg (dark) │
│ Canvas Paper #F7F8FB --bg (light) │
│ Type primary #F4F5F8 / #0A0F1E │
│ Type muted #9AA1B2 / #4B5568 │
│ │
│ Contrast dark: text-text @ 19.5:1 · muted @ 8.2:1 │
│ light: text-text @ 19:1 · muted @ 7.5:1 │
│ │
└─────────────────────────────────────────────────────────────┘
Logo: public/riskex-logo.svg — base64-wrapped dark-on-light. Inverted in dark, un-inverted in light via invert light:invert-0.
Vercel auto-deploys on push to master. Manual deploy:
vercel deploy --prodvercel.json configures:
- SPA rewrite (every path →
index.html) Cache-Control: public, max-age=31536000, immutablefor/assets/*and font files- Security headers:
X-Content-Type-Options,X-Frame-Options: DENY,Referrer-Policy: strict-origin-when-cross-origin,Permissions-Policywith camera/mic/geo disabled
Full development history, team-by-team agent report, and known post-ship levers live in STATUS-final.md. Highlights:
- 4 sequential agent teams, 13 Opus 4.7 agents — Alpha (visual polish · 4 agents) → Beta (content depth · 3) → Gamma (quality + performance · 3) → Delta (platform readiness · 3)
- Strict file-ownership matrix — no two agents ever touched the same file in the same phase
- Verification between teams — 0 TS errors, 6 routes 200, ESCP-free
- 71 files changed, +3,383 / −829 across four team commits
- Cinematic intro layered on top as a final creative pass
Git log:
cinematic intro screen
Team Delta: SEO + meta registry + ErrorBoundary + 404
Team Gamma: lazy routes + vendor chunks + WCAG 2.2 AA + cross-browser fallbacks
Team Beta: rich per-page hero art + custom brand icons + motion constants
Team Alpha: hero polish + bleed utilities + light-mode audit + card materials
Checkpoint before final polish pass
Proprietary — this site showcases RYSKEX's institutional platform on behalf of Dr. Marcus Schmalbach. Code and assets are unlicensed for external reuse. Reach out via the site's Contact page for licensing discussions.
Built with care. Deployed with intent.