04
暗号版
DECRYPT REVEAL
画面全体が暗号のかかった状態で立ち上がります。 カーソルを合わせたところから暗号が解けていき、 クリックすると一気に全体が読める形になります。
↓ 触ってみてください
単体で開く →
画面右下の青いタブから、動きの数値をその場で変えて試せます。
現段階では PC でのご覧を推奨します。 スマートフォンでは表示が簡略化され、動きも本来の見え方とは異なります。
HENKAKU COMMUNITY / hero study
いずれも同じ情報・同じレイアウトのまま、現れ方の質感だけを変えたものです。 01 は 06 の改善案で、同じバブルをどのブラウザでも同じように出せるよう作り直したもの。 02 はその泡を複数にしたもの、03 はさらに 05 の質感を重ねたものです。見比べてみてください。
下にスクロールすると、
6案がそれぞれ実物大で並びます。
そのまま画面上で触れます。カーソルを動かすと反応します。
BUBBLE REFRACTION / REBUILT
04 と同じ泡を、どのブラウザでも同じように出せるよう作り直したものです。 見た目の狙いは変えていません。違うのは中身で、04 が「ページを画像に変換する仕組み」に頼っていたのに対し、 こちらは画面上の文字や線の位置をブラウザに直接たずねて描き直しています。 その仕組みが Chrome の実験機能や、ブラウザごとに挙動の違う機能に依存していたことが、 環境によって泡が出なかった原因でした。 文字はそのまま画面に残っているので、泡が乗っていても選択・コピー・読み上げができます。
↓ 触ってみてください
画面右下のタブから、WebGL がない環境・動きを控える設定・タッチ環境の見え方をその場で切り替えて確認できます。
BUBBLE REFRACTION / A CROWD
泡を1つではなく複数にし、それぞれ勝手に漂わせたものです。 近づいたところは1つに融け、離れるとまた分かれます。 01 では泡がカーソルについて回るので「操作に反応する効果」に見えますが、 こちらはカーソルが泡を連れて歩くのではなく、みんなが集まってくる先を動かします。 同じところにカーソルを置いておくと、そこに集まってきます。
↓ しばらく眺めてみてください
くっついたり離れたりすること自体をコミュニティの動き方として見る、という FLOTANC さんの提案（8/17）から作った案です。
BUBBLE REFRACTION / RISOGRAPH
01 に、05 のリソグラフ（孔版印刷）の質感を重ねたものです。 紙の色を少し暖かくし、インクを刷り色に寄せたうえで、紙の粒とインクの粒を別々の版として上から刷っています。 粒は泡の上にも乗るので、泡だけが浮いて見えず、全体が一枚の刷り物として見えます。
↓ 触ってみてください
泡の仕組みは 01 と同じです。違いは上に重ねた質感だけなので、01 と並べて質感の有無を比べられます。
DECRYPT REVEAL
画面全体が暗号のかかった状態で立ち上がります。 カーソルを合わせたところから暗号が解けていき、 クリックすると一気に全体が読める形になります。
↓ 触ってみてください
画面右下の青いタブから、動きの数値をその場で変えて試せます。
RISOGRAPH
01と同じ演出に、リソグラフ（孔版印刷）の質感を重ねたもの。 わずかな版ズレとインクの粒立ちが入り、印刷物のような手ざわりになります。
↓ 触ってみてください
画面右下の青いタブから、動きの数値をその場で変えて試せます。
BUBBLE REFRACTION
透明な泡が画面の上を転がり、通り過ぎたところが光の屈折とともに解読されます。 泡はカーソルを追いかけて動きます。 環境によっては泡が出ないことがあります。その点を作り直したのが 01 です。
↓ 触ってみてください
画面右下の青いタブから、動きの数値をその場で変えて試せます。