A website for an AI operations company

The brief

Replace a one-page funnel with a site that explains what Lively actually does: fix the systems first, then put AI on top of them. The headline stayed the founder's own, Your business shouldn't need you in the middle of it, and the rest of the language came from her proposal deck and operations growth plan, not from me. Positioning is the client's to set.

Structure before style

Seven pages: Home, Operating System, How We Work, Work, Well Entrepreneur, About and Contact. The process is named in Lively's terms (Discovery Call, Growth Plan Presentation, Plan Implementation), and a layered section builds the model from the bottom up, so a visitor understands the order of operations before they see a single tool.

Visuals that are generated, not licensed

• The particle sphere is drawn in canvas: scattered points that gather into a sphere as the page settles. It is on-brand by construction and weighs almost nothing.
• The logo draws itself. No vector of the mark existed, so its centrelines were traced automatically from the PNG and animated as strokes.
• Brand colour as a surface. The palette is built on the founder's own vivid blue, with deeper steps for depth and soft top-lit shading on blue sections.

The agents, introduced

A full-bleed hover accordion introduces Lively's three AI agents (Jarvis, Bruce and Marcus), the same agents described in the agent system case study. Hover uses a short intent delay so columns do not flicker as a cursor passes; click, tap and keyboard work for everyone else.

Engineering choices

Next.js App Router, React 19, TypeScript and Tailwind, with Motion as the only animation dependency: pinned scroll sections use CSS sticky positioning and scroll-linked values rather than a heavier library. Video clips are re-encoded so they play on Safari and iOS. Booking is the client's live scheduling widget, embedded directly. Every response carries a no-index header until launch day.