Agency marketing site for Arkwright. Built entirely from-scratch as a Next.js app to showcase what's possible with taste-driven agentic development.
nextjsframer-motionleniswebglfigma

Key Facts

  • Role: Lead Engineer & Designer
  • Stack: Next.js 15, TypeScript, Supabase, OpenAI, Tailwind CSS v4, Framer Motion, Lenis, Vercel
  • Target: Startups & Enterprises seeking AI automation/consultancy
  • Status: Live & Active (arkwright.solutions)

Executive Summary

I built the Arkwright platform from the ground up to serve two distinct needs: a high-polish marketing site for an AI consultancy, and a secure, token-gated portal for interactive AI demos.

Rather than reaching for off-the-shelf templates or heavy CMS solutions, I engineered a bespoke Next.js application that prioritizes raw performance and strict security. The result is a site that feels "hand-crafted" but was delivered with the velocity of a much larger team by leveraging a multi-agent AI workflow. The platform also serves as a "living laboratory," hosting a suite of interactive AI agents that demonstrate production-grade patterns in voice and chat automation.

The Challenge

The primary challenge was to create a site that didn't just talk about AI capability but demonstrated it through the medium itself.

  • Immersive Branding: Creating a unique visual identity that balances a "tech-pioneer" aesthetic (ASCII, depth maps) with professional consultancy expectations.
  • Demo Security & Cost: Hosting live AI demos (Realtime API, high-volume chat) requires strict token-gating and ephemeral session management to prevent abuse while maintaining low-latency performance.
  • Workflow Velocity: Building a complex site and a suite of demos autonomously, requiring a robust multi-agent orchestration layer.

The Stack

I chose a stack that allowed for both static reliability and dynamic power:

  • Frontend: Next.js 15 (App Router) & React 19, Tailwind CSS v4, Framer Motion, Lenis (Smooth Scroll).
  • Backend & Auth: Supabase (PostgreSQL, Auth, RLS).
  • AI Integration: Vercel AI SDK, OpenAI (Chat & Realtime API).
  • Infrastructure: Vercel (Frontend & Edge Middleware).
  • Asset Generation: Nano Banana Pro, Recraft.ai, Photoshop (AI generative fill).

Key Architectural Decisions

1. Hybrid Static/Dynamic Core & Custom CMS

I architected the application to split cleanly between two domains:

  • Public Marketing: Utilized React Server Components (RSC) to render public pages statically. I built a custom, lightweight Markdown engine (ark-resources.server.ts) that reads directly from the file system, avoiding the overhead of a headless CMS while maintaining developer-first content control.
  • Protected Demos: The /demos section acts as a single-page application (SPA) within the Next.js router. It uses zustand for complex state management and WebRTC for low-latency voice agent interactions.

2. Custom "ASCII" Rendering Engine & Performance Tiering

The site's signature visual—the depth-mapped ASCII hero—is a custom shader-like implementation built with the HTML5 Canvas API.

  • Depth Sampling: The engine samples a base image and a "smoke mask" depth map in real-time to generate ASCII characters with varying density and opacity.
  • usePerformanceTier: To ensure 60fps performance across devices, I implemented a hook that monitors hardware concurrency and memory, automatically degrading the effect on low-end mobile devices to preserve battery and responsiveness.

3. Edge-First Security & RLS

Security is baked into the edge layer rather than the application logic.

  • Middleware Guarding: middleware.ts handles per-request CSP nonce injection and manages token-gating for the /applicants and /demos routes.
  • Database Hardening: I implemented rigorous Row Level Security (RLS) policies in Supabase. Even if the frontend were compromised, the database rejects any unauthorized writes to sensitive tables.

4. Interactive Demo Patterns (The AI Demos)

The /demos section showcases specific cognitive patterns used in Arkwright's client deliverables:

  • Chat Agents: Built with Vercel AI SDK, these demonstrate "State Machine Enforcement" (e.g., the Scoping Agent cannot generate a proposal until 3 workflows are validated) and "Extract-Before-Summarize" patterns to prevent hallucination.
  • Voice Agents: Leveraging the OpenAI Realtime API via WebRTC, these agents demonstrate "Voice-to-Action" capabilities. Highlights include a Qualify Agent with short-circuit logic for lead screening and a Support Agent that uses mandatory RAG-Lite tool use to ensure policy compliance.

5. Internal CRM (crm.arkwright.solutions)

Beyond the public-facing site, I engineered a dedicated internal tool to manage deal flow.

  • Unified Backend: Shares the same Supabase project, allowing for zero-latency access to new leads.
  • Intelligent Automation: Features automated stage progression logic and a daily digest system pushing updates to Google Chat via webhooks.

Outcome

The final product is a "full-stack" brand presence that demonstrates Arkwright's technical capabilities through the medium of the site itself. It serves as both a high-conversion marketing tool and a technical playground for testing and showcasing new AI patterns, effectively proving the consultancy's "agent-led" philosophy.