Websites
Editorial marketing sites and portfolios, engineered for motion, SEO and conversion.
Next.jsFramer MotionGSAP
Sofoio — digital studio/ est. 2026
Crafting thenext layerof the internet.
A luxury studio building websites, AI products, SaaS, e‑commerce and performance ads — engineered for conversion, designed like editorial.
Book an intro call↗sofoio / live
REC
Explorer
- src/
- app/
- components/
- hero.tsx
- nav.tsx
- lib/
hero.tsxnav.tsxpage.tsx
1import { motion } from 'motion/react'
2
3export function Hero() {
4 return (
5 <motion.h1
6 initial={{ y: 40, opacity: 0 }}
7 animate={{ y: 0, opacity: 1 }}
8 transition={{ ease: 'expo.out' }}
9 >
10 Crafting the next layer.
11 </motion.h1>
12 )
13}
mainTypeScriptLn 10, Col 28
01 / 04
(01) ScrollWebsites / AI / SaaS / E‑commerce / Ads2026 ©
WebsitesAI ProductsSaaSE‑commercePerformance AdsBrand SystemsDesign Engineering
(02) Services
What we build.
Five disciplines. One obsession — shipping interfaces that make people stop, stay, and act.
AI Products
RAG, agents, automations. We ship production LLM features, not demos.
OpenAIClaudeVercel AI
SaaS Platforms
From MVP to scale — dashboards, billing, auth, infra. Designed like a product, not a template.
PostgresStripetRPC
E‑commerce
Headless storefronts with luxury feel and brutal performance. Conversion is the metric.
ShopifyMedusaStripe
Performance Ads
Creative + media buying across Meta, Google and TikTok. Tracked end‑to‑end.
MetaGoogleTikTok
(03) Selected work
Live case studies.
⟶ Scroll through each story. Every site is running live.
alok-website-zeta.vercel.app
01 / 03
Alok Yadav
Personal portfolio · 2025
Next.jsFramer MotionGSAP
The brief/ ch 01
A developer who wanted more than a résumé.
Alok came to us with a list of repos and a frustration. His work was serious, but every portfolio template made it look generic. We set out to build a site that could stand next to an agency page without apology — motion‑forward, content‑led, and honest about what he actually ships.
The build/ ch 02
Every section is a story, not a card.
We threw out the grid. The page reads like a magazine feature — oversized type, timed reveals, and a scroll choreography that pulls the visitor through his journey as an engineer. Built on Next.js and Framer Motion with a GSAP scroll spine holding the whole thing together.
The result/ ch 03
Three senior interviews in the first week.
Shipped in nine days. Within the first week he had three interviews booked at companies he had previously been ghosted by. Two of those became offers. The site didn't just showcase his work — it actively opened doors he couldn't open before.
tripekart.vercel.app
02 / 03
Tripekart
Adventure travel platform · 2025
Next.jsStripeHeadless commerce
The brief/ ch 01
A travel platform that felt like gear, not a brochure.
The founders of Tripekart had a real inventory problem and a fake website. Visitors left before they understood what made the offering different. We were asked to rebuild the front end as a product — one that treated discovery, filtering and checkout as the whole experience, not an afterthought.
The build/ ch 02
Headless commerce on top of a custom inventory engine.
Trip cards with live availability, a filter‑as‑you‑go experience that updates in under 60ms, and a checkout that loads in under 800ms on mid‑tier mobile. Every pixel on the page is there because it earned its place against conversion data we pulled from the beta.
The result/ ch 03
3.2× conversion lift in 30 days.
Tripekart's conversion tripled in the first month after launch. The team raised their seed round two weeks later, citing the live site as the single most convincing part of the pitch. The website became the product's best salesperson.
The brief/ ch 01
A studio site has to sell the studio.
Our own site had to prove the work through the work. No stock photos, no "digital transformation partner" language. Every section had to be a miniature case study in what we could bring to a client — motion, taste, engineering and restraint all at once.
The build/ ch 02
Every section is its own interaction study.
Hand‑crafted animation on top of Next.js 16, React 19, GSAP, Lenis and Framer Motion. The hero showcases four of our core disciplines live. The process section draws a wavy timeline into a trophy as you scroll. The testimonials light up word by word at reading pace. Nothing is accidental.
The result/ ch 03
The only marketing is the site itself.
You're reading it right now. Over 40% of first‑time visitors submit an inquiry. We don't pay for ads, we don't cold‑email, we don't run SEO campaigns. The site does the work, and clients arrive already convinced. That's the whole point.
End of selected workStart a similar project→
(04) Process
Drag · scroll →|Step 01 / 04
Week 0101 / 04
01
Discover
We dig into your market, audience and product. A week of interviews, audits and ruthless prioritization.
Deliverables
- Positioning doc
- Audience map
- Brand & tech audit
- Scope + roadmap
Stack
FigmaNotionLoom
Week 02 — 0302 / 04
02
Design
Art direction, motion principles, prototypes. We design in Figma and in the browser at the same time.
Deliverables
- Art direction
- Motion system
- High-fi prototypes
- Component library
Stack
FigmaRiveFramer
Week 03 — 0603 / 04
03
Build
Production engineering with Next.js, GSAP, Lenis. Accessibility and performance are non‑negotiables.
Deliverables
- Next.js build
- CMS + data layer
- A11y + perf passes
- Staging previews
Stack
Next.jsGSAPVercel
Week 06 +04 / 04
04
Scale
Launch, measure, iterate. Paid media, experiments and continuous improvement after day one.
Deliverables
- Launch + QA
- Analytics + tracking
- Experiment backlog
- Paid media playbook
Stack
GA4PostHogMeta Ads
(05) By the numbers
0+
Projects shipped
0M
Revenue influenced
0/5
Client satisfaction
0
Countries served
AureumNoemaHalo LabsFormaVoltKiloPariserSpektr
(06) Clients
⟶ Hover to hold · move to advance“Sofoio treated our launch like a product, not a deliverable. Conversion doubled in six weeks and our sales team finally had a site worth sending.”
Alex Morgan
CEO, Aureum
Now reading
0%
01 / 03(07) About — Dossier
Sofoio · Vol. 01|Est. 2026|● Open for Q2
Two makers,one studio,zero filler.
No juniors behind the curtain. No deliverables that die in Figma. Sofoio is a small, senior studio where the people who design it are the ones who deploy it — end to end, from the first line of type to the last line of code.
Work with us↗(07.1) Founders
The two behind the work.
/ 01Co-founder · Design & Engineering
Jai
Rawat
Mumbai
“Designed like an editor, shipped like a surgeon.”
Interface / Motion/7 yrs shipping/Mumbai ⇄ Remote
/ 02Co-founder · Product & Strategy
Arya
Kesharwani
Bengaluru
“Turns ambiguous briefs into systems that convert.”
Systems / Narrative/6 yrs in the trenches/Bengaluru ⇄ Remote
Dossier · 07 / 10Designed · Engineered · Deployed — by the same two handsEnd of spread ⟶
(08) FAQ
Answers,
before you ask.
9:41NOTES · SOFOIO100%
Question 01 of 05
How long does a typical engagement take?
Websites run 4 to 8 weeks. SaaS MVPs 8 to 14 weeks. AI products depend on scope, but we always ship a usable v1 inside 6 weeks.
Hand‑written by Sofi · our in‑studio AI
(09) Schedule
Book a 30‑minute
intro call.
No pitch. No deck. Just your project, what makes it hard, and what we'd do differently. We reply within 24 hours to confirm.
- 01Your goals + the metric that matters
- 02Scope, timeline and real cost
- 03Whether we're the right studio
Duration30 minutes
FormatGoogle Meet
CostFree
Sofoio · 30‑min intro
Pick a time that works
Your timezone
Auto‑detect
April · 2026
Available · Tue 14 APR
4 left
Selected
Tue 14 APR·11:00
Powered by Cal.comReschedule anytime
(10) Start a project
Let's build
something
unforgettable.
Fill the brief on the iPad. We reply within 24 hours with honest scope, timeline and cost.
Reply time< 24h
NDAOn request
AvailabilityBooking Q2 2026
9:41SOFOIO · BRIEF100
Project Brief
Let's work together
№ 087