Showcase

Built with ProductOS, end to end

Name: ProductOS
Rating: 4.9 (500 reviews)
Author: ProductOS

Real products shipped end-to-end with ProductOS — brand sites, working apps, storefronts, and customer-built projects. Same pipelines our users run, nothing staged. Most projects are also available as templates you can remix as your starting point.

solen.product-os.app

FRAME 070

FRAME 160

01ProductOS showcase · Architecture (Astro)★ Featured

SOLEN — A residential architecture studio — the first ProductOS site built on Astro

SOLEN designs homes where clean architecture meets the quality of living. Its site is the first ProductOS case study built on Astro for SEO: a pinned hero scrubs a 193-frame AI cinematic film of a hillside house at dusk, dark/light editorial sections carry a project catalog and an isometric 3D process strip, and parallax imagery moves under Lenis smooth scroll — all as static HTML with a single film island, so the content stays fully crawlable.

How it was built

Built on the new ProductOS Astro Studio boilerplate (static output, islands)
Hero still → cinematic push-in film → 193-frame sequence via the AI media pipeline
Scroll-scrubbed canvas hero with progressive frame streaming
Editorial dark/light sections, isometric 3D render strip, parallax + Lenis
Deployed to Vercel from the productos-agents org

AstroTailwind 4GSAPLenisAI media pipeline

193

scroll-scrubbed film frames

90%

less JS than the React equivalent (Astro)

deferred island — the rest is static HTML

View live Build something like this →

vaatalya.product-os.app

FRAME 070

FRAME 160

02Customer story · Hospitality brand★ Featured

VAATALYA — A mountain retreat that scrolls above the clouds — built by a customer

Vaatalya is a community mountain retreat — sustainable stays, work-exchange residencies, stone-and-mud cottages above the cloud line. Its founder built the entire site on ProductOS: a pinned hero that scrubs an AI-generated descent through the peaks, a second scroll film mid-page, serif editorial type over glass surfaces, and booking, gallery, and community sections — published straight to production.

How it was built

Built end-to-end by the customer on the ProductOS Design surface
Two AI-generated scroll films on one page — hero descent + mid-page journey
385 frames streamed progressively so the page is scrubbable in seconds
Lenis smooth scroll wired into GSAP ScrollTrigger choreography
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPLenisAI media pipeline

scroll-scrubbed films on a single page

385

AI-generated frames, streamed progressively

700%

scroll depth of the pinned hero

View live Build something like this →

groupla.product-os.app

03Customer story · Travel platform★ Featured

GROUPLA — A production travel platform a real business runs on

Groupla plans premium group and family trips for the Indian market — and its whole platform was built on ProductOS. Customers browse destination packages and request custom trips; planners assemble versioned day-by-day itineraries the customer can diff and approve; payments run through Stripe in advance + final stages. Three role dashboards, travel documents, in-trip messaging, vendor management — a working business, not a demo.

How it was built

Built on ProductOS from ideation brief to production — full provenance in the repo
Versioned itineraries with a customer-facing diff, approve and reject flow
Three role dashboards: customer, planner, travel manager
Stripe advance + full payments via webhooks; documents and messaging built in
~60 API routes on Prisma + Neon, iterated continuously since launch

Next.js 15TypeScriptPrismaStripeNeon

role-based dashboards in production

~60

API routes behind the platform

2-stage

Stripe payments — advance, then final

View live Build something like this →

obsidian-earbuds.product-os.app

FRAME 070

FRAME 160

04Customer story · Product launch★ Featured

OBSIDIAN — Three cinematic scroll films on a single product page

OBSIDIAN is a premium wireless-earbuds launch — Silence, Sculpted. The page chains three pinned, scroll-scrubbed AI films: a hero reveal, an exploded-view dissection, and a sound-wave sequence — 576 frames in total, streamed progressively so the page is interactive in seconds. Dark luxury chrome, lifestyle stills, and a spec story round it out.

How it was built

Built by a ProductOS user on the Design surface
Three AI-generated films on one page — hero, exploded view, sound wave
576 frames streamed through ordered queues; below-fold films wait their turn
GSAP pinned sections chained across the full scroll length
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

pinned scroll films on one page

576

AI-generated frames, streamed progressively

192

frames per film, scrubbed on canvas

View live Build something like this →

meridian.product-os.app

FRAME 070

FRAME 160

05Customer story · Automotive★ Featured

MERIDIAN — A luxury sports car revealed through a dual-canvas scroll hero

Meridian builds the Meridian V luxury sports car. Its 800vh hero runs two canvases at once — a blurred ambient layer breathing behind a sharp foreground film — before presenting the V-GT, V-RS, and V-E lineup. Customer-built on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Dual-canvas hero: blurred ambient layer + sharp foreground film
AI film pinned across an 800vh scroll
V-GT, V-RS, and V-E lineup sections
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

canvases — ambient blur + sharp film

800vh

pinned cinematic hero

variants: V-GT, V-RS, V-E

View live Build something like this →

tygra.product-os.app

FRAME 070

FRAME 160

06Customer story · Athletic e-commerce★ Featured

TYGRA — An athletic storefront fronted by a 194-frame tiger film

TYGRA is an athletic e-commerce brand running the 'Engineered Instinct' campaign. A 194-frame tiger campaign film fronts a working product grid with cart, search, and product-detail modals on Zustand state. Built by the customer on ProductOS.

How it was built

Built by the customer on ProductOS
194-frame tiger campaign film on the hero
Product grid with cart, search, and product-detail modals
Zustand state shared across the commerce surfaces
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPZustandAI media pipeline

194

tiger-film frames on the hero

modals: cart, search, product detail

campaign: Engineered Instinct

View live Build something like this →

kponline-in.product-os.app

07Community platform

KPonline — A scattered community gets its homeland back — a cinematic homecoming wrapped around a real directory

KPonline is the digital homeland of the Kashmiri Pandit diaspora — rebuilt from the original community site into a premium, emotional experience. A first-load homecoming intro (a valley-descent film, a kehwa-by-the-hearth family scene with the dejhoor, and Kashmir-valley ambient sound) opens onto a real community app: a member directory with gotra tracing and verified profiles, a 15-category community listings marketplace, a Koshur festival calendar, devotional vaakhs and a Khabar news feed. Real scraped community data, distinctly Kashmiri-Pandit cultural detail (kangri, kahwa, pheran, Herath, Kheer Bhawani), and email/password accounts on Neon Postgres — built end-to-end on ProductOS.

How it was built

Scraped the original kponline.in end-to-end and mapped every feature for full parity
Heritage + valley design system (Fraunces / Marcellus, cream → walnut → saffron) via the taste pass
Cinematic homecoming media — kie.ai valley + family stills and film, ElevenLabs valley ambience
Next.js app: directory, gotra, 15-category listings, calendar, devotional, Better Auth on Neon
Deployed to Vercel from productos-agents, fully mobile-responsive, with the ProductOS badge

Next.jsTypeScriptTailwind v4PrismaNeon PostgresBetter Authkie.aiElevenLabs

192+

members across the diaspora

174

gotras traced

community listing categories

View live Build something like this →

mainspring.product-os.app

08Brand site

Mainspring — The AI agents that run your back office — mapped, built, and operated by one team

Mainspring is the brand site for an AI-automation agency that designs, builds, and operates custom agents for operations teams — order-to-cash, prior-auth, support triage, reconciliation. A SEO-first Astro site in a Linear-style dark technical system: an AI-generated agent-network hero still over a hand-built 'Mainspring Atlas' product-console mockup whose run table shows the unhappy paths too (needs-review, escalated, failed), then services, a Map/Build/Operate process, three outcome-led case studies, engagement tiers, and an FAQ. Realistic invented brand — no lorem ipsum, no stock photography.

How it was built

Agency positioning + believable brand, services and stats defined from the brief
Linear-style DESIGN.md adapted into Tailwind v4 @theme: near-black canvas, one lavender accent
Static Astro build — sticky nav, image hero, hand-built Atlas console, services, work, pricing, FAQ
Cinematic agent-network hero still generated by the AI media pipeline (no real trademarks)
Deployed to Vercel from the productos-agents org with the ProductOS attribution set

AstroTailwind v4@fontsourceTypeScriptAI media pipeline

3.4M

tasks/mo run autonomously (demo brand)

94%

first-pass accuracy across agents

14 days

median from audit to first live agent

View live Use as a template →

ember.product-os.app

09Web app

Ember — Land in the inbox, not in spam — email warmup that builds sender reputation on mailboxes you own

Ember connects a sender's own mailboxes over IMAP/SMTP and exchanges human-like warmup email across that fleet on a ramp schedule — opening, replying, marking important, and rescuing messages out of spam — so providers learn the sender is real before the first cold campaign. A launchable product end to end: a real warmup engine with AES-256-GCM-encrypted credentials and hard volume ceilings, honest placement reporting with a per-mailbox health score that is labeled an estimate, per-mailbox ramp controls, auth with required email verification, per-mailbox subscription billing, and a seeded public demo.

How it was built

Deliverability product brief — ramp engine, placement reporting, guardrails — planned by the Coding Agent
Quiet-precision DESIGN.md translated light-first: paper canvas, ink text, one ember accent
Next.js app + Astro landing in one monorepo with a zero-env demo mode
IMAP/SMTP warmup engine with encrypted credentials, jittered human-like cadence and spam rescue
Auth, Polar per-mailbox billing, Neon and transactional email wired; deployed to Vercel

Next.js 15AstroBetter Auth + PolarNeonTailwind v4

health score on the demo's warmed mailbox

spam rescues in the demo week

50/day

hard volume ceiling per mailbox

View live Build something like this →

agentlens.product-os.app

10Web app

Agentlens — See the visitors that aren't human — analytics for the AI agents Google Analytics filters out

Agentlens shows site owners which AI agents read their site, what they read, which AI answers send human visitors, and what agents can't parse. A launchable product end to end: two data planes (server-side middleware for crawlers that never execute JS, a sub-2KB cookieless snippet for AI-referral attribution), a registry-verified agent directory with honest Verified-vs-Likely labels, a readability audit with concrete fix cards, a forwardable weekly Agent Visibility Report with public share links, publish-ready npm SDKs, auth + subscription billing, and a seeded public demo.

How it was built

Agent-economy product brief + two-plane ingestion architecture planned by the Coding Agent
Quiet-precision DESIGN.md translated light-first: paper canvas, ink text, one signal accent
Next.js app + Astro landing + @agentlens/next + @agentlens/node SDK packages in one monorepo
Verified agent registry seeded from operators' published UA + IP-range sources
Auth, Polar billing, Neon analytics store and weekly-report emails wired; deployed to Vercel

Next.js 15AstroBetter Auth + PolarNeonTailwind v4

verified AI agents on the demo dashboard

+38%

m/m AI-referral growth surfaced

<1 hr

from install to first agent detected

View live Build something like this →

orbit.product-os.app

11Web game

ORBIT — A hybrid-casual game with its whole business model playable in the browser

Orbit is a complete hybrid-casual game shipped as a web build: a one-thumb slingshot loop between gravity wells on a fixed-timestep canvas engine, six upgrade tracks of meta progression, a demonstration IAP shop with a rewarded-ad placement, and daily fixed-seed runs. It proves the full mobile-game pattern — core loop, retention layer, monetization surface — at web lift: no store review, no install, 60fps on a phone browser.

How it was built

Hybrid-casual product brief — loop, meta, monetization model — planned by the Coding Agent
Deep-space DESIGN.md translation: near-black canvas, lavender accent, amber energy
Pure-TypeScript physics engine, tuned against a headless autoplay simulation to a 42s run
Key-art and editorial stills generated by the AI media pipeline
Deployed to Vercel from the productos-agents org

Next.js 15Canvas 2DTypeScriptTailwind v4AI media pipeline

42s

average run length

upgrade tracks in the meta

60fps

on mobile web

View live Use as a template →

vital.product-os.app

12Mobile app

VITAL — An AI fitness coach that re-plans your week when life interferes — a real native mobile app

Vital is a coach in your pocket, not a spreadsheet: miss Tuesday's session and Wednesday's plan has already rebalanced the week; photo your lunch and macros adjust dinner. The first ProductOS mobile case study is a real Expo / React Native app — five tabs (Today rings + streak, conversational coach, photo-scan meal log, adaptive weekly plan, profile), a workout player detail flow, a weekly review where the coach proposes and the user approves, and a weekly-first paywall — seeded five weeks into a recomposition block and explorable live in the browser through its web export.

How it was built

Mobile product brief + five-weeks-in seed state planned by the Coding Agent
Athletic dark-performance DESIGN.md tokens adapted into native StyleSheet themes
Expo Router app: 5 tabs + workout, review and paywall flows, hand-rolled SVG rings
App-store hero + lifestyle stills generated by the AI media pipeline
Static web export wrapped in a device-frame shell, deployed from the productos-agents org

Expo SDK 56React NativeExpo RouterTypeScriptAI media pipeline

87%

week-4 retention on coached plans

~3s

photo-to-macros scan

1,200+

exercise library

View live Build something like this →

studioflow.1labs.app

13Web app

STUDIOFLOW — A photography studio's whole client lifecycle in one pipeline — inquiry to paid

StudioFlow is a vertical CRM shaped like a photography business — not deals, but shoots, contracts, galleries and payments. Now a launchable product, not just a showcase: a Next.js app with auth, subscription billing, a 14-day no-card trial, one-click data export and a full legal set, behind an SEO-first Astro marketing site. A believable Portland studio is seeded end to end — an 18-card pipeline board across 7 stages, a busy booking calendar, proposal → signed contract → paid deposit, client records with lifetime value, and a cinematic PIN-gated gallery delivery page with imagery from the AI media pipeline.

How it was built

Vertical-CRM product brief + believable studio dataset planned by the Coding Agent
Paper-calm editorial DESIGN.md tokens adapted into Tailwind v4 @theme
Six wired screens: pipeline → calendar → booking detail → clients → galleries → pricing
Six editorial engagement-session stills generated by the AI media pipeline
Auth, billing, transactional email and legal pages wired; deployed to Vercel

Next.js 15AstroBetter Auth + PolarTailwind v4AI media pipeline

9.4 hrs

admin saved per studio per week

31%

faster inquiry-to-booking

92%

of invoices paid on time

View live Use as a template →

lumen.1labs.app

14Web app

Lumen Notes — A therapy session becomes a signed clinical note in 38 seconds — a live vertical-AI product, end to end

Lumen Notes is AI clinical documentation for therapists: session audio or shorthand becomes a structured SOAP draft the clinician edits and signs — nothing files unsigned, and the model never diagnoses. Now a launchable product, not just a showcase: a Next.js app with auth, per-seat subscription billing, live transcription and AI drafting behind clinical guardrails, plus an SEO-first Astro marketing site with a full legal/compliance set — session list, evidence-linked note editor with SI/HI risk flags and sign-and-lock, client timelines, and practice settings, all in a calm clinical UI.

How it was built

Vertical-SaaS product brief + fictional practice dataset planned by the Coding Agent
Calm paper-soft DESIGN.md tokens adapted into Tailwind v4 @theme
Five wired views: sessions → note editor → client timeline → compliance → pricing
Editorial practice imagery generated by the AI media pipeline
Auth, per-seat billing, transcription and AI drafting wired; deployed to Vercel

Next.js 15AstroBetter Auth + PolarDeepgramAI media pipeline

38 sec

from session end to structured draft

11 hrs/wk

returned to a full-caseload clinician

99.2%

template adherence across SOAP, DAP, BIRP

View live Use as a template →

echo.1labs.app

15Web app

ECHO — One podcast episode becomes a week of content — a full SaaS, screens to pricing

Echo turns one podcast or video episode into 14 channel-native assets — LinkedIn posts, X threads, a newsletter draft, shorts scripts with clip timestamps — in the creator's own trained voice. The build is the whole product: episode ingest, a reviewable AI asset board, brand-voice tone sliders with a banned-phrase list, a drag-to-schedule weekly calendar, a usage dashboard, and a three-tier pricing page seeded with believable data end to end.

How it was built

Product brief + realistic seeded dataset planned by the Coding Agent
Editorial voice-AI DESIGN.md tokens adapted into Tailwind v4 @theme
Six wired screens: ingest → asset board → voice → calendar → dashboard → pricing
Editorial studio still generated by the AI media pipeline
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4TypeScriptAI media pipeline

assets from one episode

6.5 hrs

saved per week vs. manual repurposing

$9–99

monetization seeded — weekly to studio tier

View live Use as a template →

mirador.product-os.app

FRAME 070

FRAME 160

16Hospitality site

CASA MIRADOR — A clifftop hotel whose hero glides over the Atlantic

Casa Mirador is a nine-suite boutique hotel on the Alentejo coast. The hero scrubs an AI-generated golden-hour aerial film — a slow drift toward the saltwater infinity pool, 40 meters above the ocean — under crossfading serif headlines. Double-bezel suite cards, a four-moment senses scrollytelling strip, film-grain texture, and a glass-pill nav complete the editorial-luxury system.

How it was built

Airbnb DESIGN.md warmth elevated to an editorial-luxury archetype
Aerial film generated by the ProductOS media pipeline — still → cinematic drift
193-frame ffmpeg sequence scrubbed across a pinned 300vh hero
Suite + chef's-table photography generated, no real assets needed
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4GSAPLenisAI media pipeline

40m

above the Atlantic, on scroll

suites, every photo generated

0.03

film-grain opacity — the detail that sells it

View live Use as a template →

forma.product-os.app

17E-commerce store

FORMA — A furniture storefront with a cart that actually works

FORMA sells flat-pack solid-oak furniture from Copenhagen. The storefront runs a full client-side commerce loop: asymmetric product grid with hover quick-add, a detail slide-over with finish selection and dimension tables, and a cart drawer whose totals always reconcile. Product photography is AI-generated by ProductOS; every product also has a hand-drawn SVG line-art fallback.

How it was built

Soft-structuralist system: silver-grey canvas, oak accent, diffused shadows
Six-product catalog with material stories and lead times
Product photography via the ProductOS media pipeline, line-art SVG fallbacks
useReducer cart: add, remove, quantity, correct subtotals
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4TypeScriptFramer Motion

products, photographed by AI

€1,290

Pleat Sofa — totals always reconcile

drawers: product detail + cart

View live Use as a template →

vela.product-os.app

FRAME 070

FRAME 160

18Brand site

VELA — A specialty roastery's launch page with a scroll-poured espresso film

VELA is a direct-trade coffee roastery. Its hero scrubs an AI-generated espresso-pour film frame by frame as you scroll — golden crema folding in slow motion under per-letter kinetic typography. Below: a brewing-ritual scrollytelling sequence, copper stat counters, and a three-tier subscription section, all in a warm cream-and-espresso editorial system.

How it was built

Brand voice + copy written against the Starbucks DESIGN.md warmth system
Hero film generated by the ProductOS media pipeline — still → image-to-video
video-to-frames: ffmpeg → 193-frame sequence on S3
GSAP canvas scrub + per-letter headline stagger across a pinned 300vh hero
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4GSAPLenisAI media pipeline

193

scroll-scrubbed film frames

4-step

brewing-ritual scrollytelling

prompt to production

View live Use as a template →

halo.product-os.app

FRAME 070

FRAME 160

19Product launch

HALO — A smartwatch dissection page in the Apple design language

HALO One is a health-first titanium smartwatch. Its 400vh hero rotates the watch through an AI-generated film while annotation cards — titanium case, sapphire crystal, sensor array, 7-day battery — appear at precise scroll thresholds. Spec counters animate on view, a neumorphic-dark bento grid carries a live ECG strip, and a finish picker crossfades between three colorways.

How it was built

Apple DESIGN.md system adapted: white space, thin display type, cinematic dark
Hero film: macro titanium rotation via the ProductOS media pipeline
Annotation-card thresholds from the 3D-scroll skill pack pattern
Inview count-ups, bento ECG animation, layoutId finish selection
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4GSAPFramer MotionAI media pipeline

scroll-triggered annotation cards

400vh

pinned dissection hero

7-day

battery — and the page proves it

View live Use as a template →

reserva.product-os.app

20Operations app

RESERVA — Restaurant table management a maître d' would actually use

Reserva runs tonight's service for an Italian restaurant: a hand-laid SVG floor plan with live table states (seated, reserved, turning), a reservations timeline with lane packing and a live 'now' line, a waitlist with SMS status, and guest details down to allergy chips and anniversary notes. The covers math reconciles — 38 completed + 42 seated + 44 upcoming + 18 walk-ins = 142.

How it was built

Airbnb DESIGN.md warmth translated to a terracotta hospitality system
Hand-laid SVG dining room — bar rail, window deuces, private room
Framer Motion state transitions + AnimatePresence popovers
⌘K palette, internally consistent dataset frozen at 8:05 PM
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4TypeScriptFramer Motion

tables with live state

142

covers that actually add up

chart libraries used

View live Use as a template →

stride.product-os.app

21Coaching platform

STRIDE — An endurance-coaching platform with rings that earn the reel

Stride is coach Maya Okafor's squad dashboard, nine weeks out from the Valencia Marathon: twelve athletes with animated readiness rings that sweep in on load, HRV sparklines, planned-vs-actual load charts, a weekly session calendar, and alerts that cross-reference the actual dataset — when it flags Lena Voss's HRV down 18%, her trend data shows exactly 62→51.

How it was built

Spotify DESIGN.md dark-immersion system, volt accent deliberately shifted
Animated SVG readiness rings with pathLength sweep + stagger
All KPIs derived from the athlete dataset via reduce — nothing hardcoded
⌘K palette with jump-to-athlete, editable coach notes
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4TypeScriptFramer Motion

athletes with animated rings

642km

weekly squad volume tracked

100%

of alerts backed by the data

View live Use as a template →

aether.product-os.app

FRAME 070

FRAME 160

22Brand site

AETHER — A cinematic athletic-brand launch site, from one prompt to deployed

AETHER is a performance running brand. Its launch page opens on a pinned, scroll-scrubbed hero: an AI-generated campaign film, extracted to a 24fps frame sequence by the ProductOS media pipeline and drawn to canvas with GSAP ScrollTrigger. Three headline acts crossfade as the film scrubs — editorial athletic language, generated.

How it was built

Brand direction + copy synthesized against the Nike DESIGN.md analysis
Hero film generated by the ProductOS media pipeline — still → image-to-video
video-to-frames pipeline: ffmpeg → 1920px JPEG sequence on S3
GSAP ScrollTrigger canvas scrub across a pinned 300vh hero
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4GSAPAI media pipelineFrame engine

300vh

pinned cinematic hero

24fps

scroll-scrubbed frame sequence

prompt to production

View live Use as a template →

ledgerline.product-os.app

23Analytics app

LEDGERLINE — Revenue analytics a CFO would trust, shipped as a working app

Ledgerline is a subscription-revenue analytics dashboard: a 12-month MRR area chart with hover crosshair, diverging MRR-movement bars, an invoice table with dunning alerts, and a ⌘K command palette. Every chart is hand-rolled SVG — zero chart libraries — in a Linear-grade near-black interface.

How it was built

App architecture + realistic dataset planned by the Coding Agent
Linear DESIGN.md tokens adapted into Tailwind v4 @theme
Hand-rolled SVG charts with hover crosshair + tooltips
Keyboard-first UX: ⌘K palette, focus states, tabular numerals
Deployed to Vercel from the productos-agents org

Next.js 15Tailwind v4TypeScriptSVG charts

chart-library dependencies

⌘K

command palette built in

12mo

of realistic finance data

View live Use as a template →

greenverz.product-os.app

FRAME 070

FRAME 160

24Customer story · Climate tech

GREENVERZ — Land restoration tech fronted by a scroll-driven forest film

Greenverz Solutions restores degraded land in India with technology — geo-tagged plantations, satellite monitoring, and ESG and carbon-credit programs. Its site opens on a 193-frame AI-generated forest film scrubbed by scroll, then moves through plant-a-tree product grids and impact storytelling, all built by the customer on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
193-frame AI forest film scrubbed across the pinned hero
Progressive streaming — scrubbable in seconds, ScrollTrigger wired immediately
E-commerce-style plant-a-tree grids with impact stats
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPLenisAI media pipeline

193

scroll-scrubbed film frames

frames to first scrub — fast start

100%

customer-built, no agency

View live Build something like this →

robgence.product-os.app

FRAME 070

FRAME 160

25Customer story · Robotics AI

ROBGENCE — A robotics-AI platform with an 800vh cinematic hero

Robgence positions itself as the cognitive layer for next-generation robotics. Its landing pins a 193-frame AI film across an 800vh scroll — machined surfaces and articulated motion under technical headlines — followed by a capabilities grid, process flow, and demo CTA. Customer-built on ProductOS, end to end.

How it was built

Built by the customer on the ProductOS Design surface
193-frame AI film pinned across an 800vh scroll hero
Progressive streaming with nearest-frame fallback — no blank canvas, ever
Capabilities grid and platform process flow
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPLenisAI media pipeline

800vh

pinned cinematic hero

193

AI-generated film frames

max concurrent frame requests

View live Build something like this →

atelier.product-os.app

FRAME 070

FRAME 160

26Customer story · Design studio

STUDIO ATELIER — Quiet-luxury interior architecture, told through a scroll film

Studio Atelier is a London interior architecture and design practice — crafting spaces of quiet luxury. Its site scrubs a 193-frame AI interiors film through a pinned hero, then unfolds into an editorial portfolio with restrained serif type and generous whitespace. Customer-built on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
193-frame AI interiors film scrubbed through the pinned hero
Progressive streaming; preloader gates on the first 24 frames only
Editorial portfolio system — serif type, hairline rules, whitespace
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPLenisAI media pipeline

193

scroll-scrubbed film frames

frames before the preloader lifts

prompt to a studio-grade site

View live Build something like this →

aether-dynamics.product-os.app

FRAME 070

FRAME 160

27Customer story · Space tech

AETHER DYNAMICS — A space-infrastructure story told in three scroll phases

Aether Dynamics builds orbital infrastructure — constellations, logistics, asteroid defense. Its Orbital Nexus landing pins a 193-frame AI space film while three narrative phases crossfade over it, then lands on a capabilities grid and launch CTA. An 'Establishing Uplink' preloader sets the tone — and lifts after the first 24 frames.

How it was built

Built by the customer on the ProductOS Design surface
193-frame AI space film with three crossfading story phases
Progressive streaming; themed preloader gates on first frames only
Capabilities grid, vision section, launch CTA
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

story phases over one film

193

AI-generated film frames

frames to interactive

View live Build something like this →

contentflow.product-os.app

28Customer story · Creator SaaS

CONTENTFLOW — A creator-analytics SaaS with a real data pipeline behind it

ContentFlow curates the week's trending Reels for solo tech creators — each with a hook breakdown, retention chart, and AI-generated script variants to remix. Beyond the landing it's a working app: feed, insights, and integrations pages over a Prisma + Neon data layer with a live Instagram stats API route.

How it was built

Built by the customer on the ProductOS Develop surface
Weekly trending-Reels feed with hook breakdowns and retention charts
AI script variants generated per reel
Prisma + Neon data layer with an Instagram stats API route
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15TypeScriptPrismaRecharts

1/wk

curated trending-reels drop

app surfaces: feed, insights, integrations

guesswork — hooks broken down per reel

View live Build something like this →

gyanshala.product-os.app

29Customer story · Education

GYANSHALA — A coaching institute's site that finally matches its reputation

OSG Gyanshala prepares students for India's UPSC civil-services exams. Its site presents courses, results, and testimonials in a navy-and-gold academic system — clean course grids, stat counters, and a faculty story — built by the customer on ProductOS without a single line of agency code.

How it was built

Built by the customer on the ProductOS Design surface
Course grid, results stats, and testimonials sections
Navy-and-gold academic design system
Anchor-correct single-page navigation
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSFramer Motion

UPSC

civil-services prep, end to end

page — every section anchored

agency hours

View live Build something like this →

venora.product-os.app

30Customer story · Beauty brand

VENORA — A skincare brand page with a soft botanical system

VENORA is a natural skincare line — serums, eye cream, cleanser — presented through a soft botanical design system: a product trio, bento feature grid, testimonials, FAQ, and gallery. Customer-built on ProductOS with motion-led reveals throughout.

How it was built

Built by the customer on the ProductOS Design surface
Product trio with bento feature grid
Testimonials, FAQ, and gallery sections
Framer Motion reveal choreography
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSFramer Motion

hero products, one ritual

sections from grid to FAQ

100%

customer-built, no agency

View live Build something like this →

phantom.product-os.app

31Customer story · Studio teaser

PHANTOM — An atmosphere-first teaser built from pure CSS and motion

PHANTOM teases an interactive WebGL light-and-smoke experience — and proves a cinematic feel doesn't need a video pipeline. The page builds its darkness from pure CSS gradients, motion, and a custom ghost cursor: zero media assets, instant load, full atmosphere.

How it was built

Built by the customer on the ProductOS Design surface
Atmosphere from CSS gradients and motion — no media assets at all
Custom ghost cursor follows the pointer
Anchor-correct nav added across hero, technology, and about
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSFramer Motion

video or image assets

custom ghost cursor

100%

atmosphere from code alone

View live Build something like this →

curatorial.product-os.app

32Customer story · Editorial site

THE CURATORIAL ARCHIVE — An 1892 institution rendered as a serif editorial site

The Curatorial Archive is a scholarly institution est. 1892 in London — rendered as a serif archival site with a plaqued mission statement, a chronology timeline, and a philosophy section. A study in how far typographic restraint carries a brand, built by the customer on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Serif archival system — plaques, rules, chronology timeline
Editorial photography treatment over scholarly copy
Brand-correct share metadata for clean link previews
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSFramer Motion

1892

the founding year it inhabits

movements: hero, mission, timeline, philosophy

sans-serif headlines

View live Build something like this →

oakhaven.product-os.app

33Customer story · Hospitality site

OAKHAVEN — A Portland roastery selling the art of slow coffee

Oakhaven Coffee Roasters is a Portland artisan roastery. Its site tells the slow-coffee story — roasting craft, menu, and visit information — in a warm, crafted system with every CTA wired: menu anchors, mailto, even directions to the printed address. Customer-built on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Slow-coffee story, menu, and visit sections
Warm crafted design system with editorial photography
Every CTA functional — anchors, mailto, map directions
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSFramer Motion

PDX

Portland roastery, born digital

100%

of CTAs actually go somewhere

agency hours

View live Build something like this →

valence.product-os.app

FRAME 070

FRAME 160

34Customer story · Architecture studio

VALENCE — An architecture studio whose film never stops moving

Valence Architects is a minimalist architecture studio — and its site inverts the usual scroll-film pattern. A fixed full-screen 193-frame AI film plays continuously behind the page as a 30fps autoplay loop, not a scrub, while the content slides over it on scroll. GSAP choreography over restrained studio typography, built by the customer on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Fixed full-screen 193-frame AI film looping at 30fps behind the content
Content layer slides over the film on scroll — autoplay, not scrub
GSAP choreography over a minimalist studio system
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

30fps

autoplay film loop — no scrubbing

193

AI-generated film frames

fixed film, content slides over it

View live Build something like this →

tattva.product-os.app

FRAME 070

FRAME 160

35Customer story · Wellness brand

TATTVA — A luxury spa network introduced through a scroll-scrubbed film

Tattva is a modern Indian luxury spa network. Its hero scrubs a 193-frame AI film across a 400vh scroll — Lenis smooth scroll feeding GSAP ScrollTrigger — before easing into the brand's treatments and spaces. Customer-built on ProductOS, end to end.

How it was built

Built by the customer on the ProductOS Design surface
193-frame AI film scrubbed across a 400vh pinned hero
Lenis smooth scroll wired into GSAP ScrollTrigger
Modern Indian luxury system carried through the brand sections
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPLenisAI media pipeline

400vh

scroll-scrubbed hero film

193

AI-generated film frames

100%

customer-built, no agency

View live Build something like this →

golden-standard.product-os.app

36Customer story · Jewelry brand

AURUM LONDON — A fine-jewelry house rendered in gold and restraint

Aurum London is a fine-jewelry house — 24k gold and ethically sourced diamonds — presented through an elegant Framer Motion landing. Measured reveals, generous whitespace, and a gold-on-dark material story, built by the customer on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Elegant Framer Motion reveal choreography throughout
24k gold and ethically-sourced-diamond material story
Gold-on-dark luxury system with restrained type
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSFramer Motion

24k

gold — the only accent it needs

100%

ethically sourced diamonds

agency hours

View live Build something like this →

crimson-chronicle.product-os.app

37Customer story · Editorial concept

CRIMSON CHRONICLE — A vampire-era broadsheet, typeset for the dark

The Crimson Chronicle is a gothic newspaper concept — 'Established 1742' — rendered as a dark broadsheet editorial site. Column rules, masthead, and period typography, all delivered as a single component with clean accessibility. Customer-built on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Dark broadsheet editorial system — masthead, rules, columns
Entire build shipped as a single component
Clean accessibility semantics throughout
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSTypeScript

1742

the founding year it inhabits

component — the whole broadsheet

A11y

clean semantics, dark or not

View live Build something like this →

aura.product-os.app

FRAME 070

FRAME 160

38Customer story · Audio brand

AURA — A headphone launch that scrolls into a working storefront

AURA sells the Aura Pro headphones. The page opens on a 193-frame scroll-scrubbed AI film, then hands off to a working storefront — shop, product, and checkout pages — so the cinematic launch and the commerce loop live on one domain. Built by the customer on ProductOS.

How it was built

Built by the customer on ProductOS
193-frame AI film scrubbed across the pinned hero
Working storefront: shop, product, and checkout pages
Dark premium-audio system carried from film to checkout
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

193

scroll-scrubbed film frames

storefront pages: shop, product, checkout

build from hero film to checkout

View live Build something like this →

oryn.product-os.app

FRAME 070

FRAME 160

39Customer story · Robotics

ORYN — Robotics-as-a-service told across an 800vh pinned film

Oryn offers robotics as a service: a fleet of hardware — Sentinel, Atlas, Nexus, Scout — coordinated by Oryn OS. Its landing pins an AI hero film across an 800vh scroll before introducing the fleet lineup and the operating layer that runs it. Customer-built on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
AI hero film pinned across an 800vh scroll
Fleet hardware lineup: Sentinel, Atlas, Nexus, Scout
Oryn OS positioned as the coordinating layer
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

800vh

pinned cinematic hero

fleet units: Sentinel, Atlas, Nexus, Scout

OS coordinating the fleet

View live Build something like this →

zephyr.product-os.app

FRAME 070

FRAME 160

40Customer story · Sneaker launch

ZEPHYR — A sneaker drop fronted by a film and a horizontal strip

ZEPHYR is a futuristic sneaker launch. The hero scrubs an AI film by scroll, then a horizontal product strip carries the lineup — Series 01, NEON, VOID — across the page. Customer-built on ProductOS, end to end.

How it was built

Built by the customer on the ProductOS Design surface
AI hero film scrubbed by scroll
Horizontal product strip: Series 01, NEON, VOID
Futuristic launch system over dark canvas
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSGSAPAI media pipeline

models on the strip: Series 01, NEON, VOID

horizontal product strip

100%

customer-built, no agency

View live Build something like this →

sketch.product-os.app

41Customer story · Creative concept

BRAND.SKETCH — A design landing drawn like a sketchbook page

BRAND.SKETCH is a playful digital-sketchbook landing for a design practice: wobbly hand-drawn borders, tape and thumbtack details, and a paper-and-marker aesthetic carried entirely in code. Customer-built on ProductOS.

How it was built

Built by the customer on the ProductOS Design surface
Hand-drawn aesthetic — wobbly borders rendered in code
Tape and thumbtack details pinning the sections
Digital-sketchbook layout for a design landing
Published from ProductOS — repo, deploy, and domain handled by the platform

Next.js 15Tailwind CSSCSS illustration

straight borders — everything wobbles

details that sell it: tape + thumbtacks

100%

hand-drawn feel, all in code

View live Build something like this →

Your product could be the next case study

Give the agents a brief. Get a deployed product. Every project here started as a single prompt.

Start building