Before / After · Case Study
Sydney Nova paints trippy, saturated pop-art — and sold it through a Shopify theme that made every canvas the same 300px square. The rebuild rips the entire catalog (59 products, 147 images) out of Shopify into a self-hosted Next.js 16 storefront built around the work: a no-tiles zoom-on-scroll gallery where each piece takes the viewport, an AI vibe search that blends a mood lexicon with real precomputed CLIP embeddings, and a hand-written WebGL fluid-paint background whose ambient color is 'possessed' by the centered artwork — the chrome literally takes on each painting's palette. A first-visit vibe-picker asks 'What are you here for?' and routes the visitor by intent.
“The art is loud. The old store was a spreadsheet. The new one lets the paintings possess the room.”
Receipts — measured
The pixel diff
Left: everything the legacy site shipped — frozen in place. Right: an auto-scrolling tour of the rebuild, from hero to booking. No slider to fight with.
This is everything the legacy site had to offer above the fold. No pricing, no calendar, no booking — the funnel ended at a mailto.
Auto-scrolls through the modern site so you can see the booking surface, the package grid, the pricing table, and the calendar inline — without leaving this page.
The four beats
Scroll past the legacy frame. The four beats land in order. At the end, the modern site fades into the same window.
Sydney's work is maximalist — melting color, huge canvases. The Shopify theme rendered it as uniform thumbnails with keyword search. The store was the single least expressive surface her brand had.
Nobody types 'Acrylic 24x36' — they feel something and want more of it. That means full-viewport presentation and a search index built from the images themselves. CLIP at build time gives real visual search with zero runtime ML cost.
59 products and 147 images pulled out of Shopify and self-hosted. Next.js 16 storefront with the no-tiles zoom gallery, the intent-routing vibe-picker, the hand-written WebGL fluid-paint background with ambient possession, and vibe search blending a mood lexicon with precomputed clip-ViT-B-32 cosine ranking. Clover hosted checkout wired in stub mode.
sydneynova-art.vercel.app is live (sydneynova.oglife.app is one Cloudflare A record away). The 27-agent review's 17 findings are fixed, and the vibe-search mechanism proved out here now ships as @zsty/vibe-search across the portfolio.
Sydney's work is maximalist — melting color, huge canvases. The Shopify theme rendered it as uniform thumbnails with keyword search. The store was the single least expressive surface her brand had.
Nobody types 'Acrylic 24x36' — they feel something and want more of it. That means full-viewport presentation and a search index built from the images themselves. CLIP at build time gives real visual search with zero runtime ML cost.
59 products and 147 images pulled out of Shopify and self-hosted. Next.js 16 storefront with the no-tiles zoom gallery, the intent-routing vibe-picker, the hand-written WebGL fluid-paint background with ambient possession, and vibe search blending a mood lexicon with precomputed clip-ViT-B-32 cosine ranking. Clover hosted checkout wired in stub mode.
sydneynova-art.vercel.app is live (sydneynova.oglife.app is one Cloudflare A record away). The 27-agent review's 17 findings are fixed, and the vibe-search mechanism proved out here now ships as @zsty/vibe-search across the portfolio.
Architecture
What changed
Each claim ships with concrete evidence — env vars, table names, cadence chips. No marketing fluff.
Scrolling moves the visitor through the work: each piece scales toward the viewport, holds center stage, and gives way to the next. A first-visit modal asks 'What are you here for?' and routes by intent — browsing, buying, a specific vibe — instead of dropping everyone on the same wall.
Search accepts moods, not SKUs: 'melting sunset', 'cosmic dread'. A curated mood lexicon handles the head terms while real CLIP embeddings (clip-ViT-B-32, computed at build time over every artwork) handle the tail via cosine ranking — no inference server, no per-query cost, and results that match what the paintings look like, not what their titles say. This build is the origin of the @zsty/vibe-search standard now packaged in the zsty.us monorepo.
The background is a hand-written WebGL domain-warped fluid-paint simulation — no library — and the centered artwork's dominant color bleeds into it, the cursor, and the UI chrome. Every painting recolors the room around it. Reduced-motion and WebGL-context-loss paths are handled, so the effect never costs a visitor the store.
The build ran through a 27-agent adversarial review — performance, a11y, honesty, commerce flows — surfacing 17 findings, all fixed. Checkout runs on the Clover hosted-checkout adapter in stub mode until the merchant account lands; the flow is real, the charge is the one flagged mock.
