A hand-built, framework-free reading experience that makes a long-form story feel like a physical book.
I built this project to explore what a book can feel like in a browser. The page uses a two-page spread, cover transitions, directional page turns, chapter wayfinding, and a small “photo darkroom” for replacing images locally.
The Chinese story included in the demo, Stories on the Road / 故事在路上, gave the interface its railway and four-season visual language. It is the example carried by the design, not the thing this repository is licensing as reusable code.
- A cover that opens into a real two-page reading surface
- Forward and backward page-turn animation
- Sequential and random reading routes
- A chapter rail that follows the current season
- Keyboard navigation with the left and right arrow keys
- A local photo-replacement flow presented as a “darkroom”
- Responsive scaling that keeps the spread composed on mobile screens
- No framework, backend, analytics, or external API
That is intentional. This began as one self-contained webpage, and portability is part of the idea: open index.html, read the source, and see the whole interaction without a build system.
The HTML contains the CSS, JavaScript, and demo data. Images live in assets/images/ because keeping them as Base64 made the original file roughly 32.8 MB. Moving only the images out keeps the page readable while preserving the single-file implementation.
GitHub therefore reports this repository primarily as HTML. The page still uses CSS and JavaScript—the browser always does—but they are written inside the HTML document rather than stored as separate .css and .js files.
You can open index.html directly. A small local server is better when editing image paths:
python -m http.server 4173Then visit http://127.0.0.1:4173/.
There is no package to install and no generated code to rebuild.
- Edit the metadata and visible interface copy in
index.html. - Find
STORY_SPREADSto replace the demo text. - Find
BOOK_DATAto change spread artwork and background images. - Start with the
:rootvariables when changing the book size, paper color, ink color, timing, or easing.
See CUSTOMIZATION.md for the data shape and image notes. The thinking behind the visual system is in DESIGN.md.
.
├── index.html # the complete interface and interaction
├── assets/images/ # demo images kept outside the HTML
├── docs/ # design notes, customization guide, preview
├── .github/workflows/ # GitHub Pages deployment
├── CONTRIBUTING.md
├── NOTICE.md # rights for the bundled demo content
└── LICENSE # MIT license for the code
The interface code and web design implementation are available under the MIT License.
The bundled story, photographs, illustrations, title, and editorial identity are demo material and are not included in the MIT grant. Replace them with content you own before publishing a derivative project. See NOTICE.md.
Designed and built by ZY-Aggressive.
中文说明
这是一个以网页设计和交互实现为开源主体的单页项目。它尝试把长内容做成真正具有封面、双页结构、翻页方向、章节路线和阅读节奏的浏览器体验。
项目刻意保留为一个 index.html：CSS、JavaScript 与示例数据都写在页面内部，不需要框架、包管理器或构建流程。图片单独放在 assets/images/，是为了避免 Base64 让 HTML 膨胀到约 32.8 MB。
页面中的《故事在路上｜还好，我出发了》是设计演示和创意来源，不是本仓库希望开放复用的内容主体。MIT 许可覆盖网页代码与设计实现，不覆盖故事、照片、插画和编辑品牌内容。
本地运行、换内容和换主题的方法见上方英文说明以及 定制文档。