Wahori Site
Trilingual pitch site, investor brief, and fundraising presence for a language-learning game venture.
WAHORI
English Is How You Survive
- Languages, EN/AR/JP
- 3
- Pages Shipped
- 4
- Dependencies Total
- 6
- Client
- Wahori
- Industry
- Gaming · Language Learning
- Engagement
- Web presence for a fundraising round
- Status
- In Progress — v0 shipped
- Duration
- June – July 2026 · ~3 weeks for v0
- Scope
- Trilingual landing site, investor brief, build log + portal frames
01 Overview
Who is the client?
Wahori is a founder-led game venture building a cozy life-sim where English is how you survive — think Animal-Crossing-adjacent warmth wrapped around serious language acquisition. The premise is built on "the freeze": you study English for seven years, land in Vancouver, and the taxi driver asks "What nationality are you?" — not the "Where are you from?" your textbook prepared you for — and you lock up. The launch markets are Arabic and Japanese speakers, and the venture is raising a friends-family-and-angels round to carry the game through closed alpha. The engagement was the web presence for that raise.
02 Problem Statement
What problem were they facing?
A game that exists mostly as architecture and conviction has to be felt to be funded. Wahori's core insight — that the freeze moment is real, that textbook English fails at pragmatics, and that a game can teach what apps don't — is easy to nod along to in a deck and easy to forget an hour later. The venture needed a site that makes a visitor experience the freeze, not read about it.
A feeling, not a feature list, needed to be funded
The thesis is easy to nod along to in a deck and easy to forget an hour later. The site had to make a visitor experience the freeze moment, not read a description of it.
Two audiences, one brand, opposite needs
Prospective players — Arabic and Japanese speakers — needed to see their own language treated with respect, not sprinkled on as decoration. Prospective investors needed the thesis, market, moat, roadmap, and ask laid out like a document, not a scroll experience.
No credibility infrastructure for a friends-and-family raise
The venture needed a public build log showing momentum between updates, and a private portal where people who wrote checks can see funds raised, allocation against plan, and runway — the transparency that keeps an early-stage raise warm.
No web presence at all
Investor materials were deck-only. There was no linkable front door for the raise, and no way for a prospective player to encounter the product's core idea before it exists as a game.
03 Solution
How did we solve it?
We built the site as a small, carefully crafted Next.js application with three faces. The landing page is the freeze, staged — five scroll-driven scenes running entirely on Motion v12's scroll primitives, a deliberate choice to skip the heavier GSAP-plus-Lenis stack used on other projects, since the design needed scroll-linked scenes, not a full animation timeline system.
The Arabic and Japanese on the site are load-bearing, not decorative. Every phrase is real, checked, and contextually correct, with a documented rule in the codebase: never lorem ipsum, never decoration. The whole site runs in three languages — English is the default; Arabic and Japanese are first-class locales with full right-to-left support for Arabic. A request-level proxy reads the browser's Accept-Language header on first visit and seeds a locale cookie with the best match, so an Arabic-speaking visitor lands in Arabic without touching a picker.
The pitch page at /pitch is the investor brief as a document: problem, insight, product moment, why-now, moat, market, a four-phase roadmap, team, and the ask. Two more pages frame what comes next — a public build log at /progress and a private investor portal at /investors — both shipped in v0 as designed frames with their functionality staged for the next iteration, so the URLs, framing, and expectations exist from day one.
- FE Next.js 16 Landing + Pitch Motion v12Static-first
- PX proxy.ts Locale detection Accept-LanguageCookie seed
- i18n LocaleProvider AR / JP + RTL 3 localesVerified content
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS v4
- Motion v12
- Fraunces / Figtree
- Noto Naskh Arabic
- Noto Sans JP
Live on the deployed v0 — real scroll scenes, real seeded copy
04 Project Timeline
Key milestones and duration
Phase 1 June 22–29, 2026
Design System & Narrative Structure
The visual language — paper, ink, terracotta, sage, amber, grain overlay, display typography with custom variable-axis settings — plus the five-scene landing narrative and the scroll choreography approach.
Phase 2 June 29 – July 8, 2026
Landing & Pitch Build
The full landing sequence with its wipe and scroll scenes, the eleven-section investor brief, navigation, and footer.
Phase 3 July 8–15, 2026
Internationalization & Supporting Pages
The trilingual layer — locale detection, cookie persistence, RTL, translation dictionaries, verified AR/JP content — plus the progress and investor portal frames, and accessibility passes.
Next Open
Build Log, Auth & Infra Move
Wiring the build-log feed, magic-link authentication for the investor portal, and the planned move from initial hosting to the consolidated infrastructure.
05 Challenges & Resolutions
What obstacles did we face, and how did we overcome them?
Making a feeling scroll-able
problem"The freeze" only works if the visitor experiences the gap between what was studied and what was said. A page of sections with headings can't stage a feeling.
resolutionTreated the page as scenes with entrances and exits rather than sections — the textbook cards appear first, the real question lands differently, and the resolution scene answers it the way the product would, built on reusable wipe, fade, and scroll primitives.
Using real languages honestly is harder than sprinkling them
problemArabic and Japanese on an English-built site usually decays into decoration — or worse, wrong text nobody on the team can read. For a product whose pitch is respecting learners' native languages, a wrong phrase on the pitch site would be self-refuting.
resolutionCorrectness enforced at the codebase level — a single content file holds every AR/JP phrase with its transliteration and context, annotated with the requirement that anything added must be checked and contextually right.
Right-to-left support had to be structural, not cosmetic
problemArabic isn't a translated string swap — the document direction flips, and layout, alignment, and the language picker all have to survive it.
resolutionLocale state lives in one place (a cookie), gets seeded intelligently from browser preferences at the request layer, and flows through a provider so every component renders correctly in all three locales.
Two audiences, one site, no compromise
problemThe consumer narrative and the investor document want opposite things — immersion versus scannability.
resolutionSplitting them into / and /pitch let each be fully itself, with shared chrome and design language keeping them one brand. The pitch page deliberately reads like a document that happens to be beautiful, because investors skim.
Animation richness usually fights accessibility
problemRich scroll-driven animation and reduced-motion support are often at odds — each animated component has to remember to handle (or ends up forgetting) reduced motion individually.
resolutionThe reduced-motion path was built as a global contract from the start — every animated component collapses to its final state instantly when the visitor prefers reduced motion, rather than each component handling it on its own.
06 Before & After
Comparison of the situation before and after the project
| Before | After |
|---|---|
| No web presence | Narrative landing site staging the product's core insight |
| Investor materials were deck-only | Public, linkable investor brief: thesis through ask |
| No language credibility signal | Verified Arabic and Japanese content, full trilingual site with RTL |
| No localization | Automatic locale detection with persistent user choice |
| Raise infrastructure was email threads | Framed build log + investor portal with a roadmap to full functionality |
| No accessibility guarantees | Global reduced-motion support, translated multilingual copy, AA contrast |
07 Client Benefits & Outcomes
What value did the client gain?
- Languages
- 3
- EN · AR · JP, all first-class
- Pages Shipped
- 4
- / · /pitch · /progress · /investors
- Scroll Scenes
- 5
- the freeze, staged end to end
- Dependencies
- 6
- nearly free to run, no backend yet
The raise now has a front door
Instead of a deck attachment, the venture sends a link where the problem demonstrates itself and the ask sits one route away with the full thesis around it — the site's craft level itself argues the team can build the game it's describing.
Both launch markets see themselves treated seriously
An Arabic or Japanese speaker arrives in their own language automatically, reads real phrases their bilingual friends would actually say, and sees their script typeset properly. For this product, the site is a proof of values, not just a description of them.
Investor-relations groundwork is laid before it's needed
The build log and portal exist as framed commitments — investors know where transparency will live and what it will show — which sets the tone for the round without blocking v0 on auth and feed infrastructure.
Nearly free to run and easy to evolve
A handful of dependencies, no backend of its own yet, static-first pages, with the heavier pieces — feed, portal auth — staged as clean next steps rather than half-built stubs.
08 Key Learnings & Takeaways
What did we learn from this project?
Stage the problem, don't describe it
The strongest asset the venture has is a moment everyone in its market has lived; building the landing page as scenes that recreate it converts better than any copy about it.
If language respect is the product, it's also the website's spec
Making AR/JP correctness a codebase rule — one content file, checked phrases, mandatory context — kept the site from undermining the pitch it was making.
Pick the animation stack the design actually needs
Scroll-linked scenes didn't require the full GSAP toolchain; a lighter library kept the bundle small and the mental model simple. Tool choice per project beats tool habit across projects.
Ship frames for what's next
The progress and portal pages demonstrate that a well-designed placeholder — right URL, right framing, honest "coming soon" — creates accountability and expectation without delaying launch.
Accessibility as a global contract scales; per-component doesn't
One reduced-motion rule covering every animation is verifiable; forty individual implementations aren't.
When a framework moves faster than its ecosystem's knowledge, write the warning into the repo
The site runs on a Next.js release new enough that its conventions differ from prior experience — the request middleware layer itself was renamed to proxy.ts. A two-line note telling every future contributor to check the bundled docs first prevented an entire class of "it worked on the last project" mistakes.
Live on the deployed v0 · Real scroll scenes
The Screens
The freeze, staged in three languages, plus the investor document behind it. Click any to expand.
