18-3 Messenger & Visual Novel Views

Don't just read a manuscript written in dialogue — play it! One line of frontmatter turns a note into a messenger screen with chat messages arriving in real time, or a visual novel game screen alive with backgrounds, characters, and background music. 🎮💬

← Home: ObsiKO 101 · Related: 18-2 Character Codex & References · 18-1 E-book & Web Novel Viewer

1-Minute Summary ⏱️

view: messenger → a messenger view inside a phone frame 💬, view: visualnovel → a full-screen visual novel view 🎮
Write the script using the <<name:image>> reference from 18-2 Character Codex & References — the alignment suffix (|--/--|) becomes the speech-bubble direction or standing position.
Click (Space/Enter) to advance one line of dialogue at a time, ← to rewind, and ▶ auto-play is available too.
Background music, sound effects, screen effects, emotion motions, exits — both views understand the same direction syntax.

1. How to Write a Script — Shared Syntax ✍️

Add view: messenger or view: visualnovel to the frontmatter, and the matching item ("Messenger View" / "Visual Novel View") appears inside the View menu (👁) at the top.

💡 Just two rules to follow: ① The view: value must be English — messenger/visualnovel (webnovel/book for web novels and books). Case doesn't matter, and visual novel can be shortened to vn or visual-novel, but a Korean value like 메신저뷰 won't make the item appear. ② A dialogue line must start with the <<name:image>> token to be recognized as dialogue (put it mid-sentence and it just renders as narration).

---
view: messenger
---
<<Background:alley-night.png>>
<<Seoyeon:seoyeon-default.png|-->> [10:23] Where are you? Are you here yet?
<<Minjun:minjun-hurry.png--|>> Sorry, sorry, 5 more minutes!!
<<Seoyeon:seoyeon-pouting.png!shake|-->> Overslept again, didn't you?
%%shake%%
Minjun broke into a sprint at full speed.
<<Minjun:->>

Syntax	Meaning
`<<name:image>> dialogue`	That character's line (image = expression)
`<<background name:image>>`	Scene transition — messenger = chat wallpaper, visual novel = stage background (a `type: background` entry)
`[10:23]`	Placed before a line, sets its timestamp (messenger)
`# Heading`	A scene label (chapter marker)
A plain sentence	Narration (stage directions)
`> Blockquote`	Messenger = a pinned notice at the top (like a group chat notice 📢), visual novel = a system alert in the center of the screen
`---`	A divider — in visual novel, everyone exits and background music stops (scene cleanup)
`%%comment%%`	A note that doesn't appear on screen

Alignment suffix: Attach |-- (left) or --| (right) after the image name; leave it off for center. In messenger, this becomes the speech-bubble direction (right = "me"); in visual novel, it becomes where the character stands. You can also just pick it in step 3 of << autocomplete!

Put a File Where the Dialogue Goes 📎

Put an attachment where the dialogue would go, like <<Seoyeon:seoyeon-default.png>> ![[selfie.jpg]], and — - Image → messenger = a photo bubble (click to enlarge), visual novel = a CG in the center of the screen - Audio ([[voice.mp3]]) → messenger = a voice message with a play button - Any other file → messenger = a file card - Use just the token with no text, and in messenger that character's image is sent as a photo.

Direction Syntax 🎇 — Shared by Both Views!

Syntax	Effect
`![[song.mp3]]` (or a line with only music)	Background music — loops; when the track changes, the old track fades out while the new one fades in, overlapping into a smooth crossfade 🎵
`[ding-dong](bell.mp3)` inline in a sentence	Sound effect — plays once, right before that line 🔔
`%%shake%%` `%%flash%%` `%%fade%%`	Screen effects — shake · flash · fade to black (Korean aliases like `%%흔들림%%` also work)
`!jump` `!shake` `!nod` after an image	Emotion motion — messenger = the bubble bounces, visual novel = the character bounces (`!jump`/`!shake`/`!nod`)
`<<name:->>`	Exit — messenger = a "○○ has left" system message, visual novel = the character exits the stage

2. Messenger View 💬 — Chat in Real Time

A phone frame appears in the center of the screen, and one message arrives with every click.

It feels genuinely real: for a message on the left, a "••• typing" bubble appears first; for a message on the right (you), it's typed out letter by letter in the input box at the bottom before being sent! A just-sent message briefly shows the read receipt "1" before it disappears.
Timestamps: write [10:23] for that exact time, or leave it out and a natural-feeling fake time passes. When the same person sends several messages in a row, the timestamp appears only on the last bubble, just like KakaoTalk.
A message with just 1–3 emoji shows up big, with no bubble 😆
Group chat notice 📢: put a > blockquote in the script and a pinned notice bar appears at the top of the chat (like a KakaoTalk group notice). It's collapsed by default and expands when tapped. A notice placed before the first line of dialogue shows up at the top as soon as you open the view, and every time playback passes a new > quote, the notice content is swapped in at that moment.
Links feel like a real messenger 🔗: a web address placed in dialogue or narration opens when clicked, with a preview card (title, description, thumbnail) appearing below the bubble. [[wiki links]] also show up as a card that takes you to that note when clicked. Links inside narration are laid out as neat pill buttons, one per line. (Web preview images are filled in on desktop and iPad/iPhone.)
Theme ◐: Default · Kakao · iMessage · Dark — even the input box color changes with it.
Controls: ▶ auto-play (×1/×1.6/×2.4 speed) · ⏭ skip to the end · ⏮ restart from the beginning · ♪ mute · ◐ theme · ← rewind one step (effects rewind along with it). To close, press the ‹ (back) button at the top-left of the phone frame or Esc. Your reading position is remembered per document!

3. Visual Novel View 🎮 — Just Like a Game Screen

A background fills a full-screen stage, and characters stand at left, center, or right to deliver their lines.

Stage: switches via background references (a smooth transition plus a subtle Ken Burns zoom). The speaking character stays sharp and bright, while a silent character quietly steps back and dims. Even swapping a character's expression (image) happens as a smooth crossfade — the new image is preloaded and blended in.
Dialogue box: a frameless, cinematic gradient — the speaker's name appears near their standing position in the color shade with an outline, and the dialogue types out like a typewriter (with Markdown formatting and highlight colors supported).
Branching choices: put a [[wiki link]] on a narration line and it becomes a choice button! [[#Heading]] jumps within the document, and [[other document]]/[[other document#Heading]] leads to a different episode. An interactive story, complete! 🌿
Ending: when the content runs out, the screen fades and shows "The End" — the lingering mood included.
Controls: click/Space = next, ← = rewind, ▶ auto-play (×1/×1.7/×2.6 speed), hold down on the screen (or hold Ctrl) = skip, 🔇 mute, and adjust text speed/size from ⚙. Your reading position is remembered too, of course.

🎬 Same manuscript, three different theaters: you can view a single script as a novel in the Web Novel View, as a chat drama in the Messenger View, or as a game in the Visual Novel View. Just change the view value!

🤖 The AI Agent knows this syntax completely: ask it "turn this novel into a messenger-view script" or "write a branching-choice visual novel episode with Seoyeon and Minjun," and it checks the registered characters' actual image filenames and produces a script that follows the syntax correctly. If a needed character doesn't exist yet, it'll create the frontmatter note first.

← Previous: Character Codex & References · Home · Next: Export →