- The studio’s craft is visual and motion-first — reels, photography, social design — so a static brochure site would undersell everything it does
- Four overlapping services (content, social management, community, Reels) that a generic “agency template” flattens into a bland bullet list
- Custom pricing means there’s no price sheet to anchor on — the site has to earn an inquiry on trust and taste, not a checkout
- Rooted on the Texas coast but selling remotely — the site has to carry all the credibility a local referral usually does
- A one-person studio: intake has to arrive as qualified briefs, not a pile of one-line “how much?” emails
All client work
Case study · Drift & Bloom
Drift meets bloom, for a studio that sells craft.
How KumoKodo Studio built driftandbloom.net — an editorial, coast-inspired site for a Texas social-media and content studio whose brand is the product, with a motion-first reel portfolio and a multi-step project intake that turns “how much?” into a real brief.
4
Services · one studio
4
Step Discover→Bloom flow
2
Self-hosted typefaces
0
Stock templates used
Client
Drift & Bloom · Coastal Texas
Industry
Social Media · Content Creation
Services
Brand, design, build, SEO
Status
Live — driftandbloom.net
The challenge
When the brand is the product.
Drift & Bloom makes photo, video, and Reels that are supposed to look considered and feel true to each client's voice. A content studio can't pitch that on a cookie-cutter template — the site itself has to be proof of the work.
Our solution
An editorial site that moves like the coast.
A bespoke brand system built around the name itself — Drift(the coast, fluid horizontal motion) meeting Bloom(growth, reveal-on-scroll) — with the studio's own reels carrying the portfolio and a guided intake doing the qualifying.
01
“Drift meets Bloom” brand system
A warm editorial palette — cream canvas, deep teal, a single confident olive-gold accent — set in Clash Display and General Sans, anchored by a hand-drawn single-line rose-from-a-wave logo that draws itself on load. The whole site reads like the content the studio makes.
02
A motion-first, reel-driven portfolio
Real reels play with sound, a masonry photo gallery, and a social-design grid organized by industry — law, salon, skincare, real estate, hospitality — so the craft sells itself instead of a paragraph claiming it does.
03
Four services, clearly framed
Content Creation, Social Media Management, Community Engagement, and Reels each get their own anchored section with real deliverables and a Discover → Plan → Create → Bloom process, so prospects self-qualify before they ever reach out.
04
A multi-step intake that respects the visitor
A guided, multi-step project inquiry — not a wall of fields — posting to a validated Server Action. The studio gets a real brief with voice, goals, and budget context instead of a one-line “what do you charge?”
Technical approach
Editorial polish on a modern stack.
Next.js 16 App Router
Built on the newest App Router with React 19 server components, strict TypeScript, and Tailwind CSS v4 with CSS-first @theme tokens. Motion (motion/react) drives the coast-fluid parallax and reveal-on-scroll “bloom” — fully reduced-motion aware. Deployed on Vercel.
- Next.js 16 App Router · React 19
- TypeScript (strict) · Tailwind CSS v4
- Motion parallax + reveals · reduced-motion safe
- Vercel
Server Action intake via Brevo
The multi-step inquiry posts to a Zod-validated Server Action with a honeypot spam trap. Email delivery runs through Brevo — keys are optional, so the form validates and logs server-side even before they’re set. Nothing broke before launch, nothing breaks after.
- Zod-validated multi-step Server Action
- Brevo email delivery (not Resend/SendGrid)
- Honeypot spam trap · optional-by-env
- No API route, no client fetch code
Self-hosted type & a real image pipeline
Clash Display (headlines) and General Sans (body) are self-hosted via next/font/local — no layout shift, no third-party font call. A typed image manifest generates responsive WebP with blur placeholders, and the hero reel is served locally.
- Clash Display + General Sans · next/font/local
- Typed manifest → responsive WebP + blur
- Local reel video · no external embeds
- Zero render-blocking font requests
Built to be found — by search and AI
Per-page metadata, a dynamic OG image, and FAQ + breadcrumb JSON-LD make the studio legible to search engines and AI answers alike — so a coastal-Texas content studio actually shows up when someone goes looking.
- Dynamic OG image · per-page metadata
- FAQPage + Breadcrumb JSON-LD
- Canonical URLs · clean semantics
- Fast, prerendered pages
Key decisions
Why we built it this way.
Editorial over template
A studio that sells taste can’t sell it on a cookie-cutter theme. The bespoke brand system — custom type, custom logo, a palette with one confident accent — is itself the strongest argument for hiring them.
Motion with restraint
Parallax and self-drawing line art carry the “drift / bloom” story, but every animation is reduced-motion aware and earns its place. Movement that serves the brand, never movement for its own sake.
Intake over instant quote
Custom pricing is a feature, not a gap. A guided multi-step form turns a vague “how much?” into a qualified brief — the studio spends its time on real prospects, not tire-kickers.
Brevo, keys optional
Email runs through Brevo rather than Resend or SendGrid, and the keys are optional — the intake validates and logs even before delivery is wired, so a launch date never waits on a mailbox.
Built with
Technology stack.
Next.js 16React 19TypeScriptTailwind CSS v4MotionZodServer ActionsBrevonext/font/localWebP pipelineschema.org JSON-LDVercelClash DisplayGeneral Sans
See it live
Visit Drift & Bloom.
Take a look at the live site — or tell us about a brand or studio of your own that needs a site as considered as the work it makes.