Skip to content
VibeFather
Sign up free
↗

2 cases built from this template

Same prompt, different [VARIABLES]. Click one to preview it above.

About this template

Ink Wash Mountain Adventure is a complete, single-screen 3D action game for players who enjoy compact, timing-driven challenges. An original traveler climbs a rain-soaked practice trail, meets three mechanical guardian dummies, and learns their attack rhythms through running, dodging, and three-hit combos. The playable mountain is visible immediately; there is no marketing hero, mandatory start screen, or separate tutorial.

Kimi-inspired as a broad action-game reference, the template uses an original traveler, trail, encounters, interface, and English copy. Procedural ridges, wet stone, drifting mist, rain, and restrained cinnabar markings become an ink painting through a custom full-screen shader. The shader combines tonal wash bands, luminance edges, paper grain, and depth mist without downloaded textures or a postprocessing dependency. Optional rain, thunder, and impact sounds are synthesized locally.

The combat is a real deterministic system rather than a decorative scene. Five composure strokes, a regenerating Breath meter, buffered combo inputs, directional dodge invulnerability, collision recovery, and distinct telegraph-active-recovery states make every encounter readable. Reed Sentinel sweeps a sector, Stone Sentinel marks a straight lane, and Cloud Sentinel alternates inner-disc and outer-ring pulses. Resolving a guardian opens the next stretch of trail; the third opens a quiet summit and a completion summary with retry and free-practice options.

This template suits indie hackers, developers, and designers who need an adaptable Three.js action game that ships as static files. Five variables change the game name, world, setting, audience, and tagline, while one content file holds objectives, instructions, and interface copy. Keyboard, mouse, and simultaneous touch controls share the same simulation. The prompt also fixes terrain coordinates, combat timing, adaptive rendering, reduced-motion behavior, accessibility, and a sub-20 MB build so independent runs preserve the playable structure, not only the painted appearance.

The template prompt

The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Ink Wash Mountain Adventure

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original English-language third-person 3D action adventure set on [WORLD], an invented [SETTING], for [AUDIENCE]. The default tagline is 'Three guardians. One quiet summit.' The player runs along an ink-wash mountain trail, dodges telegraphed attacks, and uses three-hit combos to calibrate three guardian training dummies: Reed Sentinel, Stone Sentinel, and Cloud Sentinel. A stamina system called Breath links attacks and dodges. Rain, distant thunder, and an original painterly shader shape the atmosphere. The entire product is one playable static page at index.html, with the live mountain and first guardian as the first-screen visual anchor and no marketing landing page.

- Audience: Indie hackers, front-end developers, designers, creative-coding learners, and players who enjoy short timing-based action games. The interface must welcome first-time players with concise control hints, generous telegraphs, forgiving checkpoint retries, and no gore while keeping combat, rendering, and content modules straightforward to adapt.
- Goal: Deliver a complete and replayable action loop: run from the lower trail, read and dodge each guardian's ground telegraph, manage Breath, land combos, resolve all three dummies, open each practice gate, and walk into the summit circle for a completion summary. Make keyboard, mouse, and touch play equivalent, retain previously resolved guardians when retrying the current lesson, and keep all gameplay local and deterministic.
- Tone: Focused, atmospheric, elegant, restrained, and encouraging. Use concise original US English training copy and quiet environmental detail. Combat is non-gory practice against mechanical dummies, with 'resolve', 'calibrate', and 'form learned' language rather than killing. There is no epic fantasy exposition, long staff, resonance power, bell-foundry quest, licensed character, or reference to an existing game or AI product.

## Stack
- Framework: Vite 6 + TypeScript 5
- Styling: Vanilla CSS
- Libraries: three (MIT), lucide (ISC), @fontsource-variable/newsreader (OFL-1.1), @fontsource-variable/inter (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold Vite's vanilla TypeScript template with scripts dev=vite, build=tsc && vite build, and preview=vite preview. Do not add React, a physics engine, a full game engine, or a separate postprocessing dependency.
  - Set vite.config base to './', build.outDir to 'dist', build.emptyOutDir to true, and build.sourcemap to false. Enable strict TypeScript checking and produce only static files in dist/.
  - Install only three, lucide, @fontsource-variable/newsreader, and @fontsource-variable/inter as runtime dependencies, plus Vite, TypeScript, and @types/three as development dependencies. Import Newsreader 500/600, Inter 400/500/600/700, and only the Lucide icons actually used.
  - Organize the implementation into src/content.ts, main.ts, scene.ts, terrain.ts, player.ts, combat.ts, guardians.ts, controls.ts, weather.ts, shader.ts, ui.ts, audio.ts, and styles.css. Keep pure simulation and combat state separate from Three.js meshes and DOM overlays.
  - Put BRAND, WORLD, SETTING, AUDIENCE, TAGLINE, guardian display names, objectives, instructions, button labels, result copy, and aria copy in src/content.ts. Rewrite setting-specific names and scene dressing when variables change while preserving coordinates, three-guardian mechanics, timings, and UI structure.
  - Derive a stable decorative random seed and localStorage key from BRAND and WORLD. Save only best active completion time and sound preference; never save dates or claim an online record. Do not restore a half-finished combat state on reload.
  - Use one index.html with a WebGL canvas and semantic HTML overlays. Bundle every font, script, icon, and generated visual locally; no remote assets or APIs. The document remains fixed to the viewport and uses no router.
  - Run gameplay with a fixed 1/60-second simulation step and a capped frame delta. Seed only decorative rocks, ridge variation, pine placement, and rain offsets. Keep player collisions, attack windows, guardian patterns, damage, progression, and timer results deterministic.
  - Cap rendering work, pause simulation and audio when hidden, clear held input on focus changes, and dispose all geometries, materials, render targets, textures, listeners, audio nodes, and the renderer on teardown.

## Variables
- [BRAND] — Game name (default: "Rainveil"). An invented one- or two-word game title; never an existing game, platform, or AI brand.
- [WORLD] — Mountain world (default: "the Rainveil Pass"). An invented mountain route used in the objective, help, and completion copy.
- [SETTING] — Landscape setting (default: "storm-washed mountain retreat"). The landscape theme; adapt vegetation accents and scene dressing without changing the route or combat.
- [AUDIENCE] — Player audience (default: "players who enjoy short, timing-based action games"). The intended players, used naturally in the help introduction rather than as metadata.
- [TAGLINE] — Game tagline (default: "Three guardians. One quiet summit."). A short original line shown beneath the game name and repeated on completion.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/ink-wash-mountain-adventure in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Ink Wash Mountain Adventure"
colors:
  sumi_ink: "#171B19"
  soft_ink: "#414B46"
  rain_slate: "#71817D"
  mountain_mist: "#B9C2B8"
  rice_paper: "#EEEAE0"
  aged_paper: "#DDD8CA"
  cinnabar: "#A64232"
  breath_pale: "#D7C993"
  moss_wash: "#667463"
  lightning_paper: "#F7F3E9"
typography:
  game_title_guardian_names_objective_headings_and_completion_display: { family: "Newsreader Variable", weights: [500, 600] }
  hud_labels_instructions_buttons_timers_and_status: { family: "Inter Variable", weights: [400, 500, 600, 700] }
spacing: "Use a 4px base unit. The game is fixed to 100dvh with no document scrolling. Desktop outer gutters are 20px, panel gaps 12px, and paper-panel padding 16px. The objective card is 320px wide and the trial list 220px wide. Keep the traveler and ground immediately ahead clear. Mobile gutters are 10px, panel padding 12px, ordinary buttons at least 44px high, the joystick 124px wide, STRIKE 76px, and DODGE 68px. Respect safe-area insets on every edge."
radius: "Use 2–6px radii and clipped 12px corners on paper panels, 2px on compact bars, and circular guardian seals and touch controls. Avoid generic rounded glass cards. Give panels a 1px Soft ink border, a dry-brush underline drawn in CSS or SVG, and a restrained 3px offset ink shadow. World geometry uses broad angular stone, folded cloth, and irregular hand-built silhouettes rather than glossy toy shapes."
---

# Ink Wash Mountain Adventure — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Sumi ink** `#171B19` — Primary text, deep mountain strokes, traveler clothing, and dark controls
- **Soft ink** `#414B46` — Secondary text, near terrain, guardian wood, and ink outlines
- **Rain slate** `#71817D` — Rain streaks, distant ridges, wet-stone reflections, and inactive markers
- **Mountain mist** `#B9C2B8` — Scene fog, middle-distance wash, and disabled details
- **Rice paper** `#EEEAE0` — Sky wash, HUD cards, dialogs, light text on Sumi ink, and shader paper base
- **Aged paper** `#DDD8CA` — Secondary panels, path stone, and quiet separators
- **Cinnabar** `#A64232` — Attack telegraphs, guardian resolve, active objective seals, and primary action accents
- **Breath pale** `#D7C993` — Available stamina fill and ready-combo detail, always paired with a numeric label
- **Moss wash** `#667463` — Sparse pines, bank vegetation, and subdued landscape variation
- **Lightning paper** `#F7F3E9` — Brief restrained sky lift, impact edges, and completion highlights

## Typography
- **Game title, guardian names, objective headings, and completion display** — Newsreader Variable (OFL), weights 500/600. Self-host the font files.
- **HUD labels, instructions, buttons, timers, and status** — Inter Variable (OFL), weights 400/500/600/700. Self-host the font files.

## Spacing & shape
- Spacing: Use a 4px base unit. The game is fixed to 100dvh with no document scrolling. Desktop outer gutters are 20px, panel gaps 12px, and paper-panel padding 16px. The objective card is 320px wide and the trial list 220px wide. Keep the traveler and ground immediately ahead clear. Mobile gutters are 10px, panel padding 12px, ordinary buttons at least 44px high, the joystick 124px wide, STRIKE 76px, and DODGE 68px. Respect safe-area insets on every edge.
- Radius: Use 2–6px radii and clipped 12px corners on paper panels, 2px on compact bars, and circular guardian seals and touch controls. Avoid generic rounded glass cards. Give panels a 1px Soft ink border, a dry-brush underline drawn in CSS or SVG, and a restrained 3px offset ink shadow. World geometry uses broad angular stone, folded cloth, and irregular hand-built silhouettes rather than glossy toy shapes.

## Motion
- Run gameplay at a fixed 60Hz and render with interpolation. Use an articulated run cycle driven by actual travel speed, opposing arm and leg swings, short baton follow-through, and no root sliding. Essential player and guardian motion remains readable at every quality level.
- Damp camera position and heading with frame-rate-independent exponential smoothing. Attacks use brief forward lunges and cloth follow-through; dodges use a low controlled lean. Never add camera shake, forced finish cameras, or long hit-stop.
- Every guardian telegraph fills or sharpens over its exact stated duration, locks its danger shape before activation, and disappears on the active frame. Animation windows and collision damage must use the same simulation state, not independent CSS timers.
- Rain falls continuously in a bounded volume, mist layers drift only a few units, and rare lightning gently lifts sky illumination once rather than strobing. Resolving a guardian releases 14 short ink fragments and a single expanding brush ring without pausing input.
- Use 160–220ms fades and at most 8px translation for help, pause, retry, and completion. Combo labels crossfade rather than bounce; Breath and resolve bars interpolate visually over 80ms while their underlying values update immediately.
- With prefers-reduced-motion, reduce rain to sparse slow streaks, stop mist drift, lightning, ink fragments, idle pulses, and panel translations. Keep essential movement, attack poses, and static or filling danger shapes necessary for play, with no camera impulse or flashing.

## Imagery
Create every visible world element from original Three.js primitives, custom BufferGeometry, CSS, and inline SVG: the faceless traveler, paired short practice batons, three mechanical training dummies, stone trail, practice gates, layered ridges, sparse pines, rain, gates, summit circle, and impact marks. Use an original full-screen ink-wash shader over the rendered 3D scene, with no bitmap paper texture. No photographs, downloaded models, HDRIs, image textures, recognizable landmarks, existing characters, or logos. The live playable mountain itself is the first-screen visual anchor; all interface icons and guardian seals are drawn locally.

## Tone
Focused, atmospheric, elegant, restrained, and encouraging. Use concise original US English training copy and quiet environmental detail. Combat is non-gory practice against mechanical dummies, with 'resolve', 'calibrate', and 'form learned' language rather than killing. There is no epic fantasy exposition, long staff, resonance power, bell-foundry quest, licensed character, or reference to an existing game or AI product.

---
Inspired by 铜雨行者 3D Interactive Game — https://www.kimi.com/showcases/3dmake
— Prompt by VibeFather · https://vibefather.ai/t/ink-wash-mountain-adventure · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Make it yours

  • A studio portfolio piece: set BRAND to your studio name and WORLD to a fictional trail, then use the summit completion summary as a quiet showcase of your game work.
  • A classroom coding project: keep the three guardians and set AUDIENCE to students learning Three.js, so the readable telegraphs and generous retries double as a teaching example.
  • A seasonal event game: set SETTING to a snowy or autumn landscape and rewrite the objectives and result copy for a short promotional challenge with no gore.
  • A personal experiment: set TAGLINE to your own line and rewrite the help introduction for friends, keeping the same trail, Breath meter and three-hit combo loop.

Ink Wash Mountain Adventure: questions and answers

What do I actually play in the Ink Wash Mountain Adventure template?

Ink Wash Mountain Adventure is a single-screen 3D action game where you run a painted mountain trail and face three mechanical guardian dummies: Reed Sentinel, Stone Sentinel and Cloud Sentinel. You dodge telegraphed attacks, manage a regenerating Breath meter and land three-hit combos. Resolving each guardian opens the next stretch of trail, and the third leads to a quiet summit and a completion summary with retry and free-practice options.

How do I rename the game and change the mountain world for my own project?

Five variables control the identity of the game: BRAND sets the game name, WORLD the mountain route, SETTING the landscape theme, TAGLINE the line under the title and AUDIENCE the players named in the help introduction. The prompt asks the agent to rewrite every headline, paragraph and label for your values while keeping terrain coordinates, combat timing and the three-guardian structure intact.

Can I change the guardian names, objectives and interface text without touching the game logic?

Yes. The template keeps guardian display names, objectives, instructions, button labels, result copy and accessibility text in one content file, separate from the simulation and the 3D scene. You or your agent can rewrite that copy for a new setting while the combat system, timings and interface structure stay as they are, so the game still plays the same way.

How does the ink-wash look work if there are no image files to download?

The painted look comes from a custom full-screen shader that combines tonal wash bands, luminance edges, paper grain and depth mist, applied over procedural ridges, wet stone, drifting mist, rain and cinnabar markings. No textures are downloaded and no separate postprocessing library is used. Rain, thunder and impact sounds are synthesized locally, and all fonts, icons and scripts are bundled, so the build runs as static files.

What should I check before shipping this game on a real site?

Play a full run on desktop and on a phone to confirm that keyboard, mouse and simultaneous touch controls behave the same, since they share one simulation. Check that dodge invulnerability and combo inputs feel readable, that the reduced-motion and accessibility behaviour is present, and that the build stays under the stated size limit. The game saves only your best completion time and sound preference, so there is no backend to configure.

How do I build an ink wash mountain adventure with AI?

Copy the full prompt (Pro) from this page or run npx vibefather add ink-wash-mountain-adventure, replace [BRAND], [WORLD], [SETTING] and [TAGLINE] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.

Which AI model built the Ink Wash Mountain Adventure demo?

The Rainveil Guardian Trial case was built by Kimi K3.1 Pro in Kimi Code; the Cloudpine Moonlit Trial case was built by DeepSeek V4.1 Flash in DeepSeek Harness. Each build used the published prompt with nothing added, so you can compare the models side by side.

What tech stack and pages does the Ink Wash Mountain Adventure template use?

Ink Wash Mountain Adventure is a single-page site built with Three.js, with generative / canvas, 3d / webgl and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.

Is the Ink Wash Mountain Adventure template free to use?

Ink Wash Mountain Adventure is a Pro template: the brief, stack and variables are public, and the full prompt, the source code of the live demo and a commercial license come with VibeFather Pro. Its DESIGN.md is free for personal projects.

Does the Ink Wash Mountain Adventure template work on mobile?

Yes. Every Ink Wash Mountain Adventure build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.