フリップ時計

フリップ時計は、20世紀中期のクラシックな機械式フリップ時計にインスパイアされた、カード反転アニメーションで時間を表示するデジタル時計です。これらの象徴的な時計は、その独特な視覚的魅力とノスタルジックな魅力で人気を博し、物理的に反転するカードを使って変化する数字を表示していました。

このツールは、各桁の変化ごとにリアルなページめくりアニメーションでクラシックなフリップ時計の効果を完璧に再現します。ダウンロード不要でブラウザ上で直接動作し、全画面モード、12/24時間形式の切り替え、オプションの秒表示を備えています。

用途：デスク時計、オフィス装飾、ライブ配信背景、プレゼンテーションタイマー、ポモドーロテクニック、大画面ディスプレイなど。すべての時間計算はローカルで行われ、プライバシーを保護します。

各桁カードは、現在値を表示する上半分と次の値を表示する下半分に分割され、X軸を中心に0degから-180degまで回転する第3の絶対配置レイヤーで構成されます。親要素にperspective: 600pxを設定することで、回転が垂直方向の潰れではなく3D奥行きとして認識され、フリッピングレイヤーのbackface-visibility: hiddenにより、ミラーされた裏面が透けて見えるのを防ぎます。will-change: transformを設定すると、ブラウザはレイヤーを独自のコンポジタサーフェスに昇格させるため、フレームごとにテキストを再描画する代わりにGPU上でフリップが実行されます。

時刻はUnixエポックからのミリ秒単位のDate.now()から取得されますが、単純なsetInterval(fn, 1000)はタイマーがベストエフォートでスケジュールされるためドリフトが発生し、ずれが蓄積します。本ツールでは1000 - (Date.now() % 1000)を計算して次のティックをスケジュールし、実際の壁時計の秒境界に合わせ、フリップ遷移にはrequestAnimationFrameを使用します。これにより、タブがフォーカスを失ったりモニターがスリープ状態になったりした際にアニメーションが自動的に一時停止します。Page Visibility API（document.visibilityState）はvisibilitychange時に表示桁を再同期し、ユーザーが数分後に戻った際に古い値が表示されるのを防ぎます。

表示のフォーマットは、Intl.DateTimeFormatのhourCycleオプション（'h23'で24時間表示、'h12'で12時間AM/PM表示）を使用してブラウザのロケールから読み取ります。サマータイムへの移行は暗黙的に処理されます。getHours()などのDateメソッドがオフセットシフトを含むローカル時刻を返すため、春には02:00から03:00にスキップし、秋には01:00が2回表示されますが、追加のロジックは不要です。