What is Yin.Story?

Yin.Story is a nonlinear story editor that uses tree structures (similar to mind maps) to build open-ended story branches, providing excellent narrative visualization.

Quick Start

In Yin.Story, there are two main categories you need to create: Scenes and Events. A scene can contain multiple events, and activating an event leads to the next scene.

Scenes

Scenes display the current story. You can set:

• Media: background video, image, background audio
• Events: events that can be triggered in this scene
• Cover: clickable thumbnails for re-enterable nodes in the story path

Built-in scene types:

Scene	Description
Basic Scene	General-purpose story scene
Communication Scene	Simulated chat app with 12 message types
Text Scene	Full-screen scrolling text
Dialogue Scene	Dialog box with typewriter effect and voice-over
Scene Group	Group scenes for seamless transitions, preserving playback state

Scene Group

Scene groups allow you to group multiple scenes and preserve playback progress and playback state when switching between them, enabling seamless transitions.

Events

Events activate actions within a scene. Available event types:

Event	Trigger	Description
Text Button	Click	Button with text, rich style presets
Media Button	Click	Button with image/video as the main body
Progress Bar	Interactive	Supports click, long-press, auto-drain
Auto Event	Scene end	Automatically triggered when scene playback finishes
Back Event	Click/Gamepad	Navigate back along the story path

Back Event

Automatically returns to a previous scene in the story path. Supports configurable step count (set to -1 to bind to gamepad B button). Button appearance is fully customizable.

Tips

Pop up text or media tips within a scene to display extra information without switching scenes:

• Text Tip: Rich text popup with background image, customizable style
• Media Tip: Full-screen image or video preview

Communication Scene Message Types

The communication scene includes rich message types to simulate real chat experiences:

Type	Description
Text Message	Plain chat text
Selector Message	Choice-based replies with message chains or scene jumps
Notice Message	System notification style
Transfer Message	Amount + unit + description, with automatic receipt matching
Media Message	Image/video, tap to view fullscreen
Voice Message	Audio playback bar
File Message	Icon + filename + size + preview
Face Message	Transparent webm stickers
Link Message	Thumbnail + title, can jump to a scene
Event Message	Activatable event node within a selector message

Media Object

Scene media supports rich control options:

• View: video or image as background
• Audio: audio playback paired with an image
• Background Audio: cross-scene background music
• Media Fit: fill, cover, contain, none, scale-down display modes
• Loop: set loop start time for interval looping
• Played Time: precisely control when events appear
• Duration: duration for image-only scenes

Event Layout

Each scene can independently set the layout of event buttons:

• Direction: row / row-reverse / column / column-reverse
• Justify: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch
• Align: flex-start, flex-end, center, stretch, baseline
• Padding: constrain layout to a bounding box
• Space Adjust: ignore button size, position by point

Layout is controlled globally by the theme, with per-scene override support.

Event Styles

Each button event supports four style layers:

• Normal Style: base CSS, supports transitions
• Hover Style: triggered on mouse hover
• Enter Style: entrance animation (Animate.css)
• Leave Style: exit animation

Multiple events entering simultaneously are automatically staggered by 150ms.

Theme System

The theme system provides global visual consistency:

• Event Theme: unified layout, text button presets, media button presets
• Scene Theme: unified layout presets, communication app presets, dialogue box presets, text scene presets
• Custom Fonts: import font files, reference by FontFamily in styles

Cover System

Create clickable covers for scene nodes, supporting:

• Main Media: image or video cover
• Hover Overlay: transparent sticker layer on hover
• Hide on Hover: hide the main media on hover

Gamepad Support

Full gamepad support across editor, story browser, and web pages — with button mapping, axis mapping, and cross-scene auto-focus.

Save Editor

Built-in JSON save editor in the story player for viewing and modifying save data directly.

Editor

The Yin.Story editor is built with Yin.Object. Thanks to its hot-reload capability, edits you make in the editor are reflected in real-time in the story. We recommend placing the editor and story windows side by side for the best editing experience.

Getting Started

If you don't need logic like "different affection levels lead to different plot branches", you can skip the Script section of this documentation.