Googleマトリックス 3D

👇 下にスクロールして体験を始めよう!

基本情報

概要

Googleマトリックス 3D では、緑のコードレインが手前と奥のレイヤーに分かれて降り続けます。

制作者

ルグーグ(elgooG)

公開日

2023-04-24

ステータス

ルグーグで体験可能

イースターエッグを試す

制作の背景

核となるアイデア

1999 年以来、映画『マトリックス』(The Matrix)のコードレインは SF 映画を象徴する視覚記号のひとつであり続けています。黒地に流れる緑の文字は、終わりのない機械世界を思わせ、シリーズ全体の雰囲気を一瞬で伝えるビジュアルになりました。

着想と開発

出発点はやはり『マトリックス』です。緑のデジタルレインをそのまま引き継ぎつつ、この版では前後の空間を広げ、コードレインがもう少し近く、もう少し深く感じられるようにしています。

イースターエッグ体験

見どころ

ページを開くと、緑の文字がいくつものレイヤーに分かれて現れます。近くを通る列もあれば、奥で静かに流れる列もあり、その下にはGoogle風のホームがそのまま残ります。ロゴもボタンも検索ボックスも、雨越しにきちんと見えます。

仕組み

このエフェクトはホームの上に重なる WebGL canvas として動きます。2D ページと同じマトリックス風の文字テクスチャを使いながら、3D の深度設定で列同士の距離を分け、平面的ではない見え方を作っています。

試し方

  1. 上のボタンを押して Googleマトリックス 3D を開きます。
  2. コードレインが手前と奥の層に分かれて落ちる様子を見ます。
  3. 緑の文字が流れ続けていても、検索ボックスはそのまま使えます。
  4. 2D の Googleマトリックスに戻りたいときは、I'm Feeling Lucky を押します。

Googleマトリックス 3D は、同じ非公式トリビュートを立体的なレイヤー感で見せるバリエーションです。前後の層を強調しながらも、検索ボックスは使えるままなので、見た目の深さと使いやすさが両立しています。

まとめ

Googleマトリックス 3D は、少し時間をかけて眺めるとよさが出ます。検索語を打ち込み、明るい緑の列がページの前後を通り過ぎるのを見て、落ち着いた平面寄りの 2D 版と見比べてみてください。

よくある質問(FAQ)

Googleマトリックス 3D とは?

Googleマトリックス 3D は、Googleマトリックスのコードレインを、より奥行きのあるレイヤー表現にした非公式のビジュアルトリビュートです。

緑の文字が手前と奥の層を流れるので、ホーム全体が光る雨の中にしまわれたように見えます。

それでも体験の本質は視覚演出のままで、スコアや勝敗はありません。検索ボックスを使いながら、奥行きが変化する様子を眺めるのが楽しいページです。

緑のコードレインがGoogleの上に立体的な層を作り、その下では検索ボックスをそのまま使い続けられます。

Google