Before / After · Case Study
Sydney's loud, saturated paintings were being sold as uniform thumbnails in an off-the-shelf online store. The rebuild puts each piece full-screen, lets its colors spill into the page around it, and lets shoppers search by feeling — 'melting sunset' — instead of keywords.
“The art is loud. The old store was a spreadsheet. The new one lets the paintings possess the room.”
At a glance
Design
Scrolling walks you through the work like a gallery — each painting fills the screen, holds center stage, then gives way to the next, and a first-visit 'What are you here for?' question routes each visitor by intent.
Theme & color
The site takes on each painting's palette — whichever piece is centered bleeds its saturated pop-art colors into the moving-paint background, the cursor, and the controls, so every artwork recolors the room around it.
Agents
The search understands feelings, not product codes — type 'melting sunset' or 'cosmic dread' and it finds the paintings that actually look like that, because it was taught from the images themselves.
Selling & payments
The full buy-a-painting flow is built and wired to a hosted card checkout; the only piece held back is the live charge, which flips on the moment the merchant account lands.
Speed
The mood search is prepared ahead of time rather than computed per visitor, so results come back instantly — and the animated background politely steps aside for anyone whose device or settings ask for less motion.
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.
A Shopify theme rendered 59 wildly different canvases as identical 300px grid squares, with keyword-only search and every image hosted on Shopify's CDN. Maximalist, scroll-stopping art — presented by the single least expressive surface the brand had.
Nobody shopping art types 'Acrylic 24x36' — they feel something and want more of it. A uniform tile grid and a title-matching search box threw away exactly the thing people came for: what the paintings look like.
The entire catalog — 59 products, 147 images — was ripped out of Shopify and self-hosted on our hosting platform. The storefront was rebuilt around looking: a no-tiles zoom-on-scroll gallery where each piece takes the viewport, a first-visit vibe-picker that routes by intent, and a hand-written fluid-paint background shader running on the visitor's graphics hardware with no third-party graphics library.
Search blends two layers: a curated mood lexicon for the common asks, and real image embeddings — computed once at build time over every artwork by an image-understanding AI model — ranked by visual similarity for everything else. No inference servers, no per-query cost, and results that match what the paintings look like rather than what their titles say. The mechanism proved out here was extracted into a reusable vibe-search standard now shipping across our other builds.
The site is live with the ambient 'possession' effect — the centered artwork's dominant color bleeding into the background, cursor, and chrome — plus reduced-motion and graphics-failure fallbacks so the effect never costs a visitor the store. Checkout runs through a hosted card-checkout adapter in clearly-flagged test mode until the merchant account is issued; the flow is real, the charge is the one mock.
Before the client saw it, the build went through a 27-agent adversarial review covering performance, accessibility, honesty, and the commerce flows. It surfaced 17 findings — all fixed before launch.
Architecture
What changed, with evidence
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.
