PAT FISH STUDIO

Product-grade starters engineered with lab precision.

We build foundations for product teams: high-performance systems, precise interaction layers, and codebases engineered for long-term ownership.

STUDIO MARK · INTERACTIVE

ENGINEERED WITH INDUSTRY STANDARDS

NNext.js
RReact
TSTypeScript
TWTailwind CSS
FMFramer Motion
VVercel

CORE_STACK_INTEGRATION

Products

SHIPPED · UPCOMING

One live product today; more starters and kits on the way. Each release is meant to be forked, extended, and owned by your team.

Nexus AI

Live

Engineering-first SaaS blueprint with strict type coverage, production architecture, and clean extension seams.

NEXUS AI | NX-01 | Next.js 15 | React 19 | 100/100 Lighthouse | Strictly Typed

SPEC SHEET

  • FRAMEWORK: NEXT.JS 15 (APP)
  • STYLING: TAILWIND + RADIX
  • PERFORMANCE: 100/100 LIGHTHOUSE
  • TYPES: 100% STRICT TS
A$79.00A$129.00[ LAUNCH_SALE_40%_OFF ]
PROMO_CODECLICK_TO_COPY

Final price applied at checkout. Limited to first 50 licenses.

Open blueprintGet LicenseSINGLE_SITE_LICENSE | ONE-TIME_PAYMENT[ Technical Docs ]
In development

Next Release: Q3 2026

In development under the same engineering constraints as NX-01.

Notify later

Nexus AI

ENGINEERING BLUEPRINT

NEXUS AI | NX-01 | Next.js 15 | React 19 | 100/100 Lighthouse | Strictly Typed

Marketing claims are cheap—verify performance and a11y on the demo URL below.

nexus-ai.patfishstudio.com

BUILD_V: NX-01MODE: LIVE IFRAMENOT TELEMETRY
NEXUS · COMPILE · OK0 ERR · 0 WARN
A$79.00A$129.00[ LAUNCH_SALE_40%_OFF ]
PROMO_CODECLICK_TO_COPY

Final price applied at checkout. Limited to first 50 licenses.

HOW WE SHIP

Verifiable engineering standards. Every claim maps to inspectable code or a live audit endpoint.

[01] Performance

We optimize for real-world speed: lean JS, sensible caching, and layouts that stay stable under interaction.

LIGHTHOUSE 100/100AVG_LCP: 0.8s

Run Lighthouse or PageSpeed on the live demo when you evaluate a purchase—numbers belong next to the product, not on this page.

→ Run live PageSpeed audit

[02] TypeScript

interface PreviewState<T> {
  data: T;
  isReady: boolean;
}

function useViewportScale<T extends HTMLElement>(
  ref: React.RefObject<T>,
  base: { width: number; height: number }
) {
  const [scale, setScale] = useState(0.72);
  return { scale, setScale };
}

Representative typed patterns from the Nexus preview surface in this repo (iframe scaling + state modeling). The Nexus AI starter ships under strict TypeScript as well.

[03] Motion

cubic-bezier(0.4, 0, 0.2, 1)

Hover this card — sample motion uses this exact easing (horizontal travel).

Easing and timing are chosen for clarity—readable on typical 60Hz displays, without stealing focus from the task.

[04] Accessibility

WCAG-oriented patterns· not a formal audit badge

Starters emphasize semantic structure, labels, focus order, and keyboard paths. Your content and integrations still need your own audit.

// Patterns we reach for
<main aria-labelledby="page-title">
  <nav aria-label="Primary">…</nav>
</main>