Yeah Innovations needed a public-facing website that could present three distinct product brands (Boma, Paysafe, Get Yeah) with rich, product-specific storytelling, not a generic landing page. It had to feel premium and technically credible: interactive 3D demos, scroll-driven animations, and polished typography. Non-developers needed to update blogs, team profiles, and partner content without redeploying code for every copy change. The site also had to run on Oracle Cloud Infrastructure as a static site (no Node server in production), behind Cloudflare, with a custom domain, a very different hosting model from Vercel-style Next.js deployments. The core tension: build a modern Next.js experience locally, but ship it as static files that OCI Object Storage can serve reliably.

I built a multi-route marketing site using the Next.js App Router with output: "export" for fully static generation. The site includes a home page with an interactive 3D particle blob hero, product previews, team showcase, blog highlights, and partner ecosystem carousel. Dedicated product pages cover Boma (AI government orchestration), Paysafe (payroll deduction aggregator), and Get Yeah (payments infrastructure), each with custom layouts, 3D/WebGL sections, and scroll-linked storytelling. About, Blog, and Architecture pages source blog and team data from Sanity CMS at build time. A CI/CD pipeline (GitHub Actions) builds the static export, prepares OCI-friendly route folders (product/paysafe/index.html), and uploads assets to Oracle Object Storage with correct content types. Light/dark theme support runs across the entire site via CSS design tokens.

• Interactive 3D hero blob

  ~3,500 instanced particles with simplex-noise morphing, mouse push/swirl, breathing animation, and gradient color cycling.

• Product-specific 3D experiences

  Boma: scroll-driven MacBook WebGL demo with video on screen mesh. Get Yeah: iPhone-style 3D product scroll with receipt and contactless payment mockups. Paysafe: MacBook showcase with architecture flow diagram (React Flow).

• Scroll-driven animations

  GSAP ScrollTrigger for pinned sections, typewriter hero effects, and expanding glass cards.

• Sanity CMS integration

  Blogs, team members, and ecosystem partners fetched at build time and baked into static HTML.

• Dual-theme system

  Light/dark mode with persisted user preference and theme-aware CSS variables.

• Responsive design

  Mobile-optimized WebGL (lighter lighting, touch-friendly scroll), adaptive typography, and collapsible navigation.

• Automated OCI deployment

  GitHub Actions build, postbuild route preparation, and object upload with MIME-type handling for fonts, video, GLB models, and HTML.

• Static hosting ≠ Next.js dev server

  OCI Object Storage serves files by exact object key, it does not map /product/paysafe to product/paysafe/index.html like a Node dev server. Enabled trailingSlash: true, removed duplicate dynamic product/[slug] route, added a postbuild script to guarantee product/{name}/index.html exists, aligned upload MIME types, and documented Cloudflare cache purge as part of deploy verification.

• WebGL assets and CORS on static hosts

  Three.js video/texture loaders can taint the canvas if assets lack proper CORS headers. Configured next.config.ts headers for .mp4, .svg, .png; used crossOrigin="anonymous" on loaders; added a fetch-based texture loader fallback for Turbopack/static export edge cases.

• Sanity on a static site

  No server means no runtime CMS fetches or ISR, content must be available at build time. Fetched Sanity data in Server Components during static generation. Home, About, and Blog pages bake CMS content into HTML at build. Documented that content updates require a rebuild and redeploy.

• Mobile WebGL performance

  Heavy 3D environments caused jank on mobile GPUs. Lazy-loaded 3D chunks (dynamic with ssr: false), simplified lighting on mobile, touch-action: pan-y on canvases so page scroll still works, and reduced particle/environment complexity on smaller viewports.

• Invalid package.json breaking Tailwind in dev

  A malformed build script ("build": "build": "next build") caused Tailwind/PostCSS to fail parsing package.json during dev. Split into "build": "next build" and "postbuild": "node scripts/prepare-oci-static-routes.mjs", valid JSON and clearer separation of concerns.

Shipped the production site at yeahinnovation.com. 10+ static routes including home, about, blog, architecture, and three full product pages. Automated deploy pipeline from GitHub to OCI on every push to main. CMS-driven sections (blogs, team, partners) editable without code changes, redeploy only when content updates. Immersive product storytelling with WebGL demos that differentiate Boma, Paysafe, and Get Yeah on a single cohesive brand site.

1. 1.Static export changes everything. Next.js features that assume a server (dynamic routes, ISR, middleware headers) need explicit alternatives when targeting object storage. Plan the export shape (folder/index.html) before choosing the host.
2. 2.CDN + static host debugging is different from app debugging. When routes show the wrong page, compare object keys, content-md5 headers, and cache layers, not just React routing.
3. 3.3D on marketing sites needs a performance budget. Lazy loading, mobile-specific lighting, and pointer-event passthrough for scroll are not optional polish, they are core UX for WebGL in production.
4. 4.Headless CMS + static sites is a tradeoff. Build-time fetching keeps hosting simple and fast, but the team must understand that CMS updates require a redeploy, worth documenting early.

Live project

www.yeahinnovation.com/

Demo

www.yeahinnovation.com/product/boma/