Skip to content

maziminds/atrament-visual-novel-template

Repository files navigation

Atrament Visual Novel Template

Author in Ink. Render with Atrament. Ship a polished visual novel to web, PWA, or single-file HTML — with character portraits, emotion swaps, themed dialog boxes, and pill choices out of the box.

License: MIT Built with Atrament Ink Preact PWA

A starter template for building visual novels with Atrament and Ink.

Live demo: Play now

Left-anchored dialog box with speaker name plate Right-anchored portrait with banner Scene background behind the dialog box Pill choice buttons Pill choices over a scene

What this template adds on top of Atrament

Atrament already ships the runtime engine, choice/scene/markup system, save/load, audio, input, and PWA builds. This template layers a visual-novel UI on top of it:

  • Character portraits with per-character emotion swaps (# CHAR: <name> resolves to characters/<name>/<emotion>.png via a <name>_emotion VAR)
  • VN-style dialog boxes anchored to left or right portraits (vn_left / vn_right paragraph classes), with themed name plates
  • A separate narrative box for portrait-less prose between character beats (vn_narrative)
  • Pill choice buttons (PILL_PRIMARY / PILL_SECONDARY) with a slate-gradient locked-pill skin for Atrament's # UNCLICKABLE tag, plus a re-skinned click-to-continue and timer bar
  • One CSS token file (theme.css) drives every colour in the UI; three CSS variables tune all portrait geometry — works with portrait, half-body, or full-body art
  • A structured root/game/story/ folder layout (state.ink, helpers.ink, chapters/) with enforced INCLUDE order in story.ink
  • A self-documenting demo chapter (_demo.ink) that exercises every feature with inline-commented tags — doubles as a copy-paste cheat sheet

Everything else (backgrounds, audio, player input, conditional content, the toolbar binding mechanism, # CHECKPOINT, save/load, build targets) is stock Atrament — see atrament.ink and the @atrament/web-ui README.

Where to go next

You want to… Read
See what the template provides (every tag and class) TEMPLATE.md — the feature catalog

Built on

  • Atrament Web UI by Serhii "techniX" Mozhaiskyi — the runtime engine, choice/scene/markup system, save/load, and PWA scaffolding.
  • inkjs — JavaScript port of Ink by Inkle, the narrative scripting language.
  • Preact — the UI runtime.

Acknowledgments

Huge thanks to Serhii "techniX" Mozhaiskyi — the author and maintainer of Atrament. Beyond building the engine this template stands on, he personally helped shape this template through reviews, testing, and patient guidance on the engine's internals. This project wouldn't exist in its current form without him. Go check out his work and give Atrament a star.

License

MIT. See LICENSE.md — upstream Atrament copyright preserved.

About

Web-based visual novel template built on Atrament + Ink. Character portraits with emotion swaps, side-anchored dialog boxes, pill choice buttons, themed name plates, click-to-continue, and timer bars. One CSS token file themes everything. Builds to web, PWA, or standalone single-file HTML. MIT.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Contributors