---

Screenshots · Demo

---

Table of Contents

• About
• Getting Started
  • Prerequisites
  • Installation
  • Build
• Technical description
• Team
• Acknowledgements

---

About

Immerse yourself in the magical world of the night sky with Hatsune Miku! Fly on a little airplane, collecting words to your favorite music, and enjoy the unique kamishibai-style atmosphere. Start your musical adventure now!

Screenshots

Game

Start Page	Main Menu

Help Page	Credits Page

Getting Started

Prerequisites

• NodeJS v20

Installation

1. Clone the repo

$ git clone https://github.com/Antosik/magicalmirai24

2. Install dependencies

$ npm ci

3. Create .env file with the TextAlive application token

VITE_TEXTALIVE_TOKEN=<YOUR_TOKEN>

4. Launch development server

$ npm run dev

Build

$ npm run build

Technical description

Architecture and Project structure

See ARCHITECTURE.md

TextAlive manageability

App can be fully (or partially) managed by TextAlive App Customizer.

Fully managed

In fully-managed mode, everything is controlled by the TextAlive App Customizer.
Open this link - the app will instantly proceed to game mode and load custom song (宮守文学 - king妃jack躍). The TextAlive App Customizer is managing play/pause/stop and changeable parameters.

Partially managed

In partially-managed mode, user can navigate the menu and control the song to play.
Open this link, remove the song URL (メディア URL) and click reload (更新). The app will open the main menu, where users can select a song, but other processes are managed by the TextAlive App Customizer, like play/pause/stop and changeable parameters.

Changeable parameters

• volume={0-100} - a number from 0 to 100. Changes the volume. Default - 100.
• speed={1-100} - a number from 1 to 100. Changes the symbols speed. Default - 5.
• autoplay=on - enables the autoplay mode (Miku-san automatically collects all the lyrics)

Parameters can be changed with:

• TextAlive App Customizer
• Query parameters (for example, https://mirai24.antosik.me/?autoplay=on will enable autoplay mode)

Team

• Programming - Antosik
• Design - sdobnaya
• Translation - lemma

Acknowledgements

TextAlive App API

TextAlive App API は、音楽に合わせてタイミングよく歌詞が動くWebアプリケーション（リリックアプリ）を開発できるJavaScript用のライブラリです。

TextAlive App API について詳しくはWebサイト TextAlive for Developers をご覧ください。

Background Music

Marble Machine by Wintergatan.
Approved for non-commercial use.