サンプルコード

このステップのポイント
  • タイトルをクリックすると GitHub のリポジトリや CodePen のサンプルコードにアクセスできます。
  • アイコンをクリックするとデモ動画を閲覧できます。
  • アイコンをクリックするとデモを試せます。

インタラクティブな歌詞カードを実装した作例です

p5.js を使った作例です

three.js を使った作例です

マウス操作に反応するインタラクティブな作例です

全画面キャンバスに歌詞を描画する作例です

3Dモデルを使った複雑な処理を含む作例です

発声中のフレーズと現在のビートの情報を表示するシンプルな作例です

script タグで TextAlive App API を読み込み、ビルドツールを何も使わない作例です

Lottie で Adobe After Effects からエクスポートされたアニメーションを使ってアニメーションする作例です

React を使った作例で、TextAlive ホストがあればフォントや配色などを調整可能です

発声中のテキストを表示したりTextAlive ホストの有無により再生コントロールの表示状態を切り替えたりする作例です

次のステップ

ぜひ、 TextAlive App API を使って魅力的なリリックアプリを作ってみてください!

GitHub でトピック textalive を、Twitter でハッシュタグ #TextAlive#TextAliveApp を使うと、リリックアプリの作例が見つかるかもしれません。

Tips

画面右上の をクリック(タップ)するとサイドバーが出るのはご存知でしたか?