フロントエンドの表現力を広げるため、実験的にインタラクティブなWebページ「MIDNIGHT WINDOW」を制作しました。
MIDNIGHT WINDOW | Nob
雨の夜、作業中の部屋をテーマにした小さな体験型ページです。
画面内には押せる場所が4か所あり、それぞれ操作すると異なる反応が起こります。
今回使用した主な技術は、Astro / TypeScript / SCSS / Canvas / CSS Animationです。
どうしてもサイバーパンクな世界観にしたかったのですが、自分で描けなくてイメージは生成AIに作ってもらって、
どこにどんなアニメーションを適用するか、
どんな動きにするか、
どんな技術を使用するか、
をかんがえながら実装しました。
特に意識したのは、「すべてを同じアニメーション手法で作らない」ことでした。
雨はCanvas、時計や湯気はCSS Animation、キーボード入力やカップ・ランプなどの操作はTypeScriptで制御しています。
また、一枚絵のように見える画面も、背景・カップ・雨・湯気・UIなどをレイヤーとして分離し、ユーザー操作に応じてそれぞれを動かせるように設計しました。
アニメーションそのものだけではなく、
コップを持ちながらタイピングは無理、
雨が降った時に曇るのはどの部分か
など「押した結果として何が起きると自然か」を考えながら実装したのも今回のテーマです。
まだ追加したい演出もありますが、まずはひとつの作品として公開しました。
押せる場所は4か所あります。ぜひ探してみてください。
