Character-Split Sample -TextAlive-

TextAlive App APIを使った、歌詞の文字の輪郭線がアニメーションするものです。

実行するには、TextAlive APIのトークンが必要です。

It uses the TextAlive App API to animate the outlines of the text of the lyrics.

A TextAlive API token is required to run it.

Demo

https://misora.main.jp/ea4azmyb/outline/

Getting Started

Download and install Node.js on your computer (https://nodejs.org/en/download/).

Then, open VSCODE, drag the project folder to it. Open VSCODE terminal and install dependencies (you need to do this only in the first time)

npm install

Run this command in your terminal to open a local server at localhost:8080

npm run dev

Song

『初音ミク「マジカルミライ 2024」楽曲コンテスト』の受賞作品6曲

https://magicalmirai.com/2024/procon/

Resource

Three.js

GSAP

TextAlive api