All Projects
Live2026

bluemystic.io

An ocean-themed product showcase built with 3D graphics and an AI-assisted workflow

The Blue Mystic Advisory site itself: a product showcase with a real-time 3D hero, content-driven product pages, and a build process that doubles as a case study in AI-assisted development.

24
Pages, all pre-built for speed
7
Case studies from one content file
3D
Real-time hero scene
2
Themes — light and dark throughout
Blue Mystic wave artwork

Overview

This site is also a project. It was designed and built end-to-end with an AI-assisted workflow: requirements written as plain-English user stories, implemented step by step by an AI coding agent, with automated quality checks gating every step.

The design brief — ocean-themed, bold, fast — is delivered with a real-time 3D scene, layered animation, light and dark themes, and a content system where adding a product page means filling in one structured entry.

Tech Stack

Next.jsTypeScriptTailwind CSS v4Three.js / React Three FiberGSAPFramer MotionVercel

AI Angle

The build process is the AI story: plain-English user stories executed by an AI coding agent with automated verification at every step.

The Challenge

Showcase sites usually choose between visual ambition and performance. The 3D hero, animation layers, and search-engine requirements all had to coexist — the site needed to look striking and load instantly.

The Approach

The 3D hero scene is tuned to render beautifully in both light and dark modes. Everything below it is built ahead of time as fast static pages, so the visual flair never costs speed or search visibility.

The same content-driven architecture now powers this projects section: every write-up on this page is a single structured entry in one file.

How It Was Built

  1. 01RequirementsPlain-English user stories
  2. 02AI AgentImplements one increment at a time
  3. 03Quality ChecksAutomated checks gate every step
  4. 04Publish24 pages built ahead of time
  5. 05LiveReviewed, committed, deployed

Highlights

  • Real-time 3D hero scene that adapts to light and dark themes
  • Add one entry to one file and a new product or project page appears
  • Built end to end by an AI coding agent with quality checks at every step
  • Pages built ahead of time for instant loading and full search visibility

Want something like this built?

We design and build AI products, analytics platforms, and automation systems end to end. Tell us about your problem.