Home (apps/web/app/page.tsx):
- StoryCard locked to uniform aspectRatio "4 / 5". The previous
"placeholder 4/5 → naturalRatio after onLoad" flow coupled card
height to lazy-load order: cards still below the fold sat at the
placeholder ratio while above-the-fold cards snapped to their
image's actual ratio (1.6 landscape vs 0.75 portrait vs 1.23
squarish), so the gallery looked inconsistent until a hard refresh
re-decoded everything from cache synchronously. Fixed ratio +
object-cover removes the coupling.
- StoryCard hover overlay collapsed from two sibling layers
(backdrop-blur + mask-image + dark gradient sibling) into one
element with a pure rgba(0,0,0,…) linear-gradient and an opacity
transition. Chromium does not animate backdrop-filter cleanly when
combined with mask-image on an empty element — the first hover
frame shows a full rectangular blur before the mask kicks in, then
snaps to the feathered shape ("矩形磨砂 → 渐变磨砂"). One layer,
one transitioning property, no compositing race.
Play (apps/web/app/play/page.tsx):
- Header back-link "云梦" → "InfiPlot" using the same serif + italic
ember "Plot" treatment as the homepage wordmark. Resolved against
the parallel plain-text rebrand already on infiplot/staging by
keeping the styled version for brand consistency.
InfiPlot
The first real-time, AI-generated interactive story game — describe the scene you've always fantasized about and watch it come alive in front of you: immersive, visual, and yours to step into. Every plot beat, every image, every character is designed and generated on the fly by a multimodal AI engine — all to grant that childhood wish of crossing over into the cartoon.
▶ Free to play during the beta, no setup required — infiplot.com
If you find this project interesting, a free ⭐ on the repo means the world to us — and it genuinely helps more people discover it. Thank you!
What is InfiPlot
InfiPlot is the world's first interactive story game with content generated by AI in real time. There are no pre-written plots, no pre-made characters, not even pre-recorded voices — everything is generated on demand, tailored to you. We're aiming for an experience on par with bishōjo games (galgame), otome games, and full-motion-video (FMV) games, while adding a personal, participatory fantasy — a richer, more immersive audio-visual experience that gives your imagination and curiosity free rein.
In one line: what we're building is an AI-generated, real-time take on Love Is All Around (《完蛋!我被美女包围了!》).
Whether you're a six-year-old, a twenty-something, thirty-five, or sixty, there's a fantasy here that belongs to you and you alone:
Learn magic in the world of Harry Potter; become the one everyone at school adores and confesses to; publish paper after paper in top journals and conferences with grant money to spare; step into Empresses in the Palace and live out the court intrigue; or return to your younger self and make a different choice about something you regret…
Why we built it
We're a group of young people from Tsinghua University and other schools.
On one hand, we're longtime, devoted players of galgames, otome games, FMV, and AI role-play games. Even while enjoying them, we kept imagining how much more delightful and thrilling it would be if the story choices weren't fixed in advance — or if you could truly interact with an AI character in depth, instead of just texting it through a chat app.
On the other hand, we happen to know a little about large-model technology: enough to turn ideas into working software quickly with AI, and to have formed some modest views on the technical paths available and the limits of what today's tech can build.
The spark came on April 22, 2026, when @zan2434 and others released flipbook. We were stunned and delighted by this entirely new form of interaction. So one day in May, we agreed on the spot to build something like this — both to help people live out the fantasies they'd once set aside, and to explore the new modes of interaction that multimodal models make possible.
The project is still very early and many features are far from polished. We'd love your feedback — open an issue, or join our dev team and explore the new possibilities with us, and satisfy your own curiosity.
Get in touch: hi@infiplot.com
How it works
Built on text, image, and audio models, we've assembled a multi-agent framework to deliver on InfiPlot's goal. We split the agents into five roles — Architect, Writer, Character Designer, Cinematographer, and Painter — that work together to keep the plot coherent, the characters consistent, and the scenes continuous, all while making the story as compelling as we can.
We call each complete playthrough a story.
A story unfolds as a sequence of scenes. Each scene is one AI-painted background plus a short tree of beats — moments of narration, dialogue, and the occasional choice. You tap through a scene's beats and the image stays put; only when a choice leads somewhere genuinely new — another place, a new point of view, a jump in time — does the AI paint the next scene.
flowchart TD
U["Your input: world setting + art style"] --> A["Architect<br/>parses input → full story structure (first step)"]
A --> W["Writer<br/>directs this scene's beats: narration · dialogue · choices"]
subgraph SCENE["Generating one scene"]
direction TB
W --> C["Character Designer<br/>portrait + voice (parallel, per new character)"]
W --> S["Cinematographer<br/>shot composition + background prompt"]
C --> P["Painter<br/>renders the 16:9 background using portraits as reference"]
S --> P
end
P --> SC["One scene: background image + beat tree"]
SC -. speculatively pre-generate the next scene .-> W
While you're reading one scene, the engine speculatively generates the scenes your choices could lead to — and, for unavoidable next steps, the scene after that. By the time you pick a direction, its image is usually already painted, so the cut feels instant. If you still notice some lag today, don't worry — we're working hard to bring it down.
Clicking the background itself (not a button) routes through a vision model: it reads where you tapped and decides whether you're exploring the current scene (it inserts a beat — no new image) or moving on (a new scene). This builds on a valuable lesson we learned from flipbook, and we believe it will become one of InfiPlot's defining features — taking the experience to the next level.
There is no traditional game UI baked into the art. The AI paints the world in whatever style you pick — "stick figure on grid paper" or "cyberpunk noir" — and the dialogue panel and choice buttons are a light HTML layer drawn on top, tuned to sit over the scene. In other words, the UI fits the story of each playthrough, rather than staying the same every time.
One-click deploy
After deploy, set your environment variables in the Vercel project — see the Configuration guide below. The Vercel project's Root Directory must be apps/web (the deploy button passes this automatically; if you configure manually, set it in Project Settings).
Configuration guide
InfiPlot talks to four kinds of model providers. Text and Vision use any OpenAI-compatible endpoint (OpenAI, Anthropic via an OpenAI-compat proxy, Gemini, OpenRouter, DeepSeek, local Ollama, …), so you can mix and match freely. Image currently goes to Runware (its own task-array protocol, not OpenAI-compatible), chosen for its combination of latency and cost. TTS uses Xiaomi MiMo's own voice design / clone protocol (also not OpenAI-compatible) — per-character voice design, clone, and per-line delivery direction.
1. Choose your providers
| Provider | Variables | Required? | Recommended |
|---|---|---|---|
| Text · story director | TEXT_BASE_URL TEXT_API_KEY TEXT_MODEL |
✅ | deepseek-v4-flash via DeepSeek |
| Image · scene renderer | IMAGE_BASE_URL IMAGE_API_KEY IMAGE_MODEL |
✅ | runware:400@6 (FLUX.2 [klein] 9B KV) via Runware |
| Vision · click reader | VISION_BASE_URL VISION_API_KEY VISION_MODEL |
✅ | gemini-3.5-flash via Google |
| TTS · per-character voice | TTS_BASE_URL TTS_API_KEY TTS_SPEECH_MODEL |
optional — leave blank to run silently | mimo-v2.5-tts via Xiaomi MiMo (own protocol, not OpenAI-compat) |
2. Set the environment variables
Set these in your Vercel project (Settings → Environment Variables), or in apps/web/.env.local for local runs. Nine variables are required; TTS is optional (leave blank to run silently). There's also a flag for cheap testing:
| Variable | Effect |
|---|---|
MOCK_IMAGE=true |
Skip image generation; the renderer returns a static placeholder. Story, voice, and choices still run normally. Great for iterating on TTS without burning Runware credits. |
See apps/web/.env.example for the exact shape.
3. Mind the cost
With the recommended trio, each scene is dominated by the text-LLM call. The FLUX.2 [klein] 9B KV image is roughly $0.00078 per scene (1792×1024, 4 steps, sub-second); the text call is the rest (very cheap with deepseek-v4-flash). Tapping through a scene's beats is free. To keep transitions instant, the engine also pre-generates scenes you might pick but don't — so real spend runs somewhat higher than the scenes you actually see. There is no rate limiting or auth out of the box — if you make your deployment public, your bill will reflect that. Add limits (and consider lowering the prefetch depth) before sharing widely.
Roadmap
- Latency you can't perceive
- Mobile browser support
- Compatibility with most providers
- User accounts and login
- Upgrade from static images to motion video
- Free-form player input mid-story
- Voice interaction
- Story sharing
- Mobile app
Contributing
Issues and pull requests are welcome. To run InfiPlot locally (Node 20+, pnpm 9+):
pnpm install
cp apps/web/.env.example apps/web/.env.local # fill in your keys — see the Configuration guide
pnpm dev # open http://localhost:3000
By contributing, you agree that your contributions are licensed under the AGPL-3.0.
Star history
License
AGPL-3.0 © InfiPlot. The core is fully open source. AGPL's "network use is distribution" clause means anyone who runs a modified version as a network service must also publish their source — this keeps the core open while leaving room for a future hosted or commercial edition.