Life Units：カウントダウンタイマーを生きた3Dワールドに

Life Unitsは、カウントダウンタイマーを浮島の上の3Dボクセルオブジェクトに変える無料Webアプリです。日数が経つとパンケーキの山が一口ずつ減り、時間は木、分はコーヒーカップ、秒は卵からかえるヒヨコで表現されます。普通のブラウザタブで動くコンシューマー品質の3D表現の公開例として、Urbano DXが開発・運用しています。

Life Unitsを開く

浮かぶボクセル島の上で動く5つのタイマー。それぞれが独立したアニメーションオブジェクト

タイマー作成画面。パンケーキ、木、コーヒー、ヒヨコ、角砂糖の5モデルと5種類の単位から選択

プロダクト概要

Life Unitsは、ログイン不要の無料Webアプリです。各カウントダウンタイマーが小さな3Dシーンとして表現され、雲が流れる浮島の上に並びます。チップチューン効果音とピクセルアートUIを備え、数字だけのタイマーでは物足りない人のためのプロダクトです。

パンケーキ、木、コーヒー、ヒヨコ、角砂糖の5モデル
残り時間に応じてモデルが目に見えて減っていく
秒から日数まで、カスタム単位のカウンターにも対応
無料・アカウント不要・timers.urbanodx.comで公開中

構築したもの

react-three-fiberによる全画面3Dシーンと、残り時間をそのままジオメトリに反映させる減少システムを実装しました。タイマーはブラウザ内に保存されるため、バックエンドなしの静的バンドルとしてnginxから配信しています。

three.jsによるプロシージャルなボクセルアバター
時間とジオメトリを連動させたアニメーション
統計ビュー、モデル選択、ピクセルUI
技術構成：Vite、React 19、TypeScript、three.js、react-three-fiber、nginx

この事例が示すこと

コンシューマー品質の3D表現、遊び心のあるプロダクトデザイン、細部へのこだわりは、ゲームエンジンではなくWebの技術で実現できます。マイクロインタラクション、パフォーマンス管理、使っていて楽しいUIという同じ姿勢を、業務ソフトウェアにも適用します。

インストール不要、普通のブラウザタブでリアルタイム3D
遊び心と工学的な規律の両立
意図的な習慣としての磨き込み
ダッシュボードやフォームにとどまらないフロントエンドの幅