1投稿＝1作品、全135件。動画1本と画像2枚、本文、リプ欄の文がそろっています。上から順に投稿する想定で並べています。
ブラックホールを描くなら、光が曲がるところまで入れたい。 「事象の地平線」はプラネタリウムの上映を案内するサイトです。 中央のブラックホールの周りで背景の星が曲がり、スクロールで近づくほど光るガスの円盤が大きくなります。 右下の時間の進みは x1.00 から下がり、画面の動きもゆっくりになります。 光の通り道を少しずつ曲げながら進めるレイマーチで、重力で光が曲がる様子を近似しています。ライブラリなしのシェーダー1本です。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/jishou-no-chiheisen/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/jishou-no-chiheisen.md
画像の説明文（代替テキスト）: ブラックホールへ近づき、円盤が大きくなる動画とPC・スマホ画面
雨の日の窓ガラス越しに、夜の街を見せるページ。 「雨の都市」はサイバーパンクの街を、雨の窓から見るサイトです。 ガラスを滴が流れ、滴の中には外のネオン看板が小さく映ります。 指でなぞると結露が拭われてそこだけ街がはっきり見え、しばらくすると曇りが戻ります。 滴の屈折は、滴の面の向きに合わせて背景の画像をずらして読む方法です。結露はなぞった跡をマスクに描き、時間で薄めて戻しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/ame-no-toshi/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ame-no-toshi.md
画像の説明文（代替テキスト）: 雨粒の流れる窓越しにネオン街が屈折する動画とPC・スマホ画面
暗い背景に、割れ目から漏れる光を入れると一気に熱を帯びます。 「マグマ」は火山の地殻を描いたサイトです。 黒い地殻の割れ目の下を溶岩が光って流れ、カーソルの周りで地殻が開きます。 スクロールで白熱に近づいて火の粉が増え、最後は冷えて暗い赤の筋だけが残ります。 溶岩の色は、温度を黒から赤、橙、白へ写す黒体放射(熱い物の光り方)の近似です。温度ひとつで色が決まるので、スクロールと連動させやすくなります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/magma/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/magma.md
画像の説明文（代替テキスト）: 黒い地殻の割れ目から溶岩が光り、火の粉が舞う動画とPC・スマホ画面
サイトの文字やボタンを、つかんで投げられたら。 「重力」は最初、真鍮の文鎮を売る普通の商品サイトに見えます。 スクロールした瞬間、見出しの文字やボタンが落ちてぶつかり、跳ねて画面の底に積もります。 拾って投げることもでき、ページの先頭に戻すと元の場所に並び直します。 物理はライブラリなしの自前で、文字を1文字ずつ回転する四角として扱っています。最初に表示位置を測ってから transform で動かすので、見た目を崩さずに切り替えられます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/juuryoku/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/juuryoku.md
画像の説明文（代替テキスト）: 文字やボタンが重力で落ちて積もる動画とPC・スマホ画面
幕を引いて中身を見せるなら、布が本当に揺れてほしい。 「布」は赤いビロードの緞帳のサイトです。 左右の幕が中央で閉じていて、横に引くかスクロールすると開き、暗い舞台の見出しが現れます。 幕は風で揺れ、つかんだ所が持ち上がります。 布は点をばねでつないだ格子(質点ばねモデル)です。隣、斜め、ひとつ先の3種類のばねを入れると、伸びにくく折れ目のある布になります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/nuno/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/nuno.md
画像の説明文（代替テキスト）: 赤いビロードの幕が風に揺れ、引くと開く動画とPC・スマホ画面
時間の流れを、光の角度と色だけで伝えられるか。 「石と光」はゴシック大聖堂の一日を、9時から20時半までスクロールで進めるサイトです。 ステンドグラスの色の光が石の床と壁に落ち、光の筋の中で埃が舞います。 スクロールで太陽が動くと、光の角度と長さと色が変わっていきます。 窓の光は、床や壁の点から太陽の方向へ線を戻し、窓に当たったらそのガラスの色で照らす計算です。ライブラリは使っていません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/ishi-to-hikari/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ishi-to-hikari.md
画像の説明文（代替テキスト）: 大聖堂の石にステンドグラスの光が落ち、時刻で動く動画とPC・スマホ画面
縦に長いページは、いまどこまで来たかが分かりにくい。 「泡になる前に」は人魚姫の海を、海面から200mまで潜るサイトです。 右端の水深がスクロールに合わせて増え、下へ行くほど光が減って暗くなります。 最後は題名の文字が泡になって上へ昇り、画面が白く抜けます。 泡は、題名を一度見えないcanvasに描き、文字のある点から粒を出しています。水深の数字はスクロール位置を0〜200に写しているだけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/awa-ni-naru-mae/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/awa-ni-naru-mae.md
画像の説明文（代替テキスト）: 海面の光から深海へ潜り、題名が泡になって昇る動画とPC・スマホ画面
粒が集まって文字になる表現を作りたい。 「磁石」は砂鉄を撒いた白い紙のサイトです。 カーソルが小さな棒磁石になり、近づけると砂鉄が磁力線に沿って並び、見出しの上を通ると文字の形に集まります。 離すと、砂鉄はゆっくり元の散らばりに戻ります。 PCでは102,400粒をGPUで動かしています。磁場は二つの極からの力の足し算で、文字の形は見出しを描いた画像の濃さの傾きで粒を寄せています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/jishaku/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/jishaku.md
画像の説明文（代替テキスト）: カーソルの磁石で砂鉄が並び、文字が現れる動画とPC・スマホ画面
暗いページは、文字が読めなくなるのが悩みどころです。 「森の赤」は赤ずきんの夜の森を歩くサイトです。 カーソルがランタンになり、照らした所だけ木立と文章が浮かびます。 スクロールで霧が濃くなり、最後は奥で狼の目が二つ光ります。 霧は、視線を少しずつ奥へ進めて光を足していく計算(レイマーチング)で描いています。文章は丸いマスクをカーソル位置に合わせて毎フレーム動かすだけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/mori-no-aka/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/mori-no-aka.md
画像の説明文（代替テキスト）: 霧の森でカーソルのランタンが木立と文章を照らす動画とPC・スマホ画面
ヒーローの背景に、ゆっくり揺れるオーロラを置きたい。 緑から青へ、上端だけ薄い紫に変わる光の帯が夜空で揺れています。 カーソルや指を動かすと、その位置に帯の裾が引き寄せられます。 帯はノイズで揺らした線を3層重ね、上へ行くほど暗くなるように明るさを落としています。裾の輝きを少し強めると、オーロラらしい形になります。WebGL1のシェーダー1枚で、ライブラリは使っていません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/aurora/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/aurora.md
画像の説明文（代替テキスト）: 夜空のオーロラの帯がカーソルに引かれて揺れる動画とPC・スマホ画面
太さだけで動く見出しは、色がなくても目に入る。 「Breathe」の7文字が、4秒吸って6秒吐く周期で太くなったり細くなったりします。 カーソルを近づけた文字だけ、さらに太く広がります。 使っているのは可変フォント(太さや幅を連続で変えられるフォント)の wght と wdth の軸。 1文字ずつ span に分けて、少しずつ時間をずらして値を書き換えると、左から右へ波が渡ります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/breathing-type/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/breathing-type.md
画像の説明文（代替テキスト）: Breatheの文字が太さと幅を変えて呼吸し、カーソルを近づけた字がさらに太る
すりガラスのカードは見慣れた。厚いガラスの屈折を出したい。 白い紙の文章の上に厚いガラス板が1枚乗り、奥の文字が少し拡大されてずれます。 縁の丸みでは文字が大きく曲がって色が割れ、カーソルを動かすと板が寄って傾きます。 背景の文章を canvas に描いてテクスチャにし、シェーダーで板の向きから屈折を計算しています。 色ずれは赤と青のずらし幅を3%に抑えるのがこつで、6%にすると縁が虹色になりすぎます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/glass-card/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/glass-card.md
画像の説明文（代替テキスト）: 文章の上の厚いガラス板が文字を拡大して曲げ、カーソルに寄って傾く
製品の中身を見せるなら、部品をばらした分解図がいちばん伝わります。 「鋼の関節」は大型機体の肘の関節ユニットを紹介するサイトです。 スクロールするほど部品が離れていき、照準の印が部品を追いかけます。 途中で線画に切り替わり、最後はまた組み上がります。 部品はすべてコードで作った円柱やギアで、モデルファイルは使っていません。部品ごとに離れる向きと距離を持たせ、スクロール量で位置を補間しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/hagane-no-kansetsu/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/hagane-no-kansetsu.md
画像の説明文（代替テキスト）: 金属の関節がスクロールで分解図になり、線画に変わる動画とPC・スマホ画面
ロゴや文字を、粒子が集まって組み替わる形で見せたい。 炭色の画面で、クリーム色の粒子の塊が「形」の文字から球、立方体へと組み替わります。 組み替えの間だけ速い粒子がティールに色づき、カーソルで向きが変わります。 粒子の位置と速度は GPU 上のテクスチャに置き、目標の形へ毎フレーム引き寄せています。 3つの形の点を同じ順番に並べておくと、粒子が散らばらず帯のように移動します。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/morph-particles/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/morph-particles.md
画像の説明文（代替テキスト）: 粒子の塊が文字から球、立方体へ組み替わり、移動中の粒が色づく
サイトの背景に、動画を使わずに動く煙を入れたい。 ほぼ黒の画面で、線香から白い煙が一筋立ち上ります。 カーソルが通った道にも煙が残り、渦を巻いて消えていきます。 中身は流体の計算(ナビエ–ストークス方程式)を GPU で解くソルバです。カーソルの道に速さと煙の濃さを足し込み、浮力で上へ流します。 開いた直後に150ステップ先まで計算しておき、最初の1枚から煙が立つようにしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/smoke-trail/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/smoke-trail.md
画像の説明文（代替テキスト）: 線香から白い煙が立ち上り、カーソルの通った道にも煙が渦を巻く
9pxの注記を、カーソルを当てたときだけ読めるようにする。 白い紙の太い見出しの上で、カーソルの位置だけ半径150pxの凸レンズになります。 レンズの中は1.7倍に拡大され、外周でなめらかに元の大きさへ戻ります。 画面の内容を一度 canvas に描いてテクスチャにし、WebGL で貼り直しています。 中心の55%は一様に拡大し、外周の帯で倍率を1に戻すと、境目で絵が途切れません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/cursor-lens/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/cursor-lens.md
画像の説明文（代替テキスト）: カーソルの位置が凸レンズになり、小さな注記が拡大されて読める
紙を破る手応えは、画面の上でも出せます。 「ちぎる」は手でちぎれる紙の見本帖のサイトです。 なぞった線で紙が破れ、破れ目に繊維の毛羽が立ち、紙片は床に落ちて積もります。 破れた穴の下から本文が見えてきます。 紙は多角形として持ち、なぞった経路で2つに分けています。経路に細かいギザギザを足し、破れた辺に短い線を毛羽として描くと、紙らしい破れ目になります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/chigiru/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/chigiru.md
画像の説明文（代替テキスト）: なぞった線で紙が破れ、紙片が落ちる動画とPC・スマホ画面
作品一覧を、縦スクロールのまま横に流して見せたい。 映画館の特集上映6本が横一列に並び、下へスクロールすると板が右から左へ流れます。上の細い線で、いまどこまで来たかが分かります。 GSAP の ScrollTrigger で区画を画面に固定し、縦に送る距離を横の移動距離と同じにするのが要点。指の動きと板の動きが1対1になるので、操作がずれて感じません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/horizontal-pin/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/horizontal-pin.md
画像の説明文（代替テキスト）: 縦にスクロールすると、映画の板が横一列に右から左へ流れる様子
紙を扱うサイトなら、ページの切り替えも紙をめくる動きが似合う。 和紙工房の画面が右下の角から斜めに巻き上がり、奥から次の画面が現れます。カーソルを左右に動かすと、めくれる量をそのまま操作できます。 シェーダーの中で、紙を細い筒に巻きつけたときの位置を画素ごとに計算します。めくれた紙の裏に元の画面を12%だけ透かすと、紙らしく見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/page-curl/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/page-curl.md
画像の説明文（代替テキスト）: 和紙工房の画面が右下から巻き上がり、奥から次の画面が現れる様子
ベントー型のレイアウトは、触ると組み変わるだけでぐっと楽しくなる。 大小8枚のタイルが詰まった書体の見本帳で、カーソルを乗せた1枚が広がり、まわりのタイルが滑って場所を譲ります。広がったタイルにだけ説明文が出ます。 CSS grid の dense 詰めでクラスを付け替え、動きは FLIP(変わる前と後の位置の差を transform で埋める手法)で付けます。これで押し出されたタイルも一緒に滑ります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/bento/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/bento.md
画像の説明文（代替テキスト）: 大小のタイルの1枚が広がり、まわりのタイルが滑って場所を譲る様子
パンくずリストを、本当にパンくずにしたらどうなるか。 「パンくず」はヘンゼルとグレーテルの絵本サイトです。 読み進めた道に粒が落ち、放っておくと鳥の群れが来て一粒ずつ食べていきます。 残った粒を押すと、その場所まで戻れます。 鳥は群れの動き(boids)の、離れる・揃える・寄るの規則で飛んでいます。粒はページの縦位置に固定しているので、上へ戻ると自分の歩いた道が見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/pankuzu/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/pankuzu.md
画像の説明文（代替テキスト）: 夜の森に落ちたパンくずを鳥がついばむ動画とPC・スマホ画面
夜と昼のように、同じ部屋の2つの姿を1枚の枠で見せたい。 夜の居間の写真が、カーソルの横位置に合わせて波に溶け、昼の白い部屋へ入れ替わります。触らずにいると、途中の状態から自動で行き来します。 シェーダーで変位マップ(ずらす量を決める模様)を作り、出てくる写真と押し出される写真を逆向きにずらしながら混ぜます。ずらす量を画像の幅の1〜2割に抑えると、写真が崩れません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/displacement-hover/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/displacement-hover.md
画像の説明文（代替テキスト）: 夜の居間の写真が、カーソルに合わせて波に溶け昼の部屋へ入れ替わる様子
溶岩ランプのような、粘りのある背景が欲しいとき。 画面の右半分で蝋の塊が上下し、近づくと粘りながら一つにまとまります。 カーソルや指の位置には小さな塊が遅れてついてきて、他の塊と合体します。 形は円の距離関数を smin(なめらかな最小値)でまとめるだけで、くっつく所が自然に丸くなります。陰影は形から高さを作り、その傾きに光を当てて出しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/lava-lamp/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/lava-lamp.md
画像の説明文（代替テキスト）: 蝋の塊が粘りながら合体する背景の動画とPC・スマホ画面
文字同士がとろっとつながる見出しは、どう作るのか。 紺の画面で「Liquid」の字がゆっくり太り、隣の字と橋をかけてつながります。 カーソルについてくる雫が字に触れると、ひとつの面に溶け合います。 文字を「縁からの距離」の数値に置き換えて、どこで切るかのしきい値を上下させています。 距離の計算は Jump Flooding という方法で、最初とリサイズ時に1回だけ行います。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/sdf-liquid-type/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/sdf-liquid-type.md
画像の説明文（代替テキスト）: Liquidの文字が液体のように太ってつながり、カーソルの雫と溶け合う
見る角度で色が変わる、玉虫色の質感の出し方。 「鱗」は竜の背を歩く探索ゲームのサイトです。 画面いっぱいの鱗をカーソルでなでると、波紋が広がって鱗が一枚ずつ傾き、緑から金に光ります。 火の区画では、画面を押し続けると竜が火を吐きます。 色は薄膜干渉(シャボン玉の色が変わる仕組み)の近似で、鱗ごとに膜の厚さを少しずつ変えています。色の範囲を深緑と金に絞ると、派手になりすぎません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/uroko/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/uroko.md
画像の説明文（代替テキスト）: 竜の鱗がなでた所から波打ち金に光る動画とPC・スマホ画面
ホログラム箔の虹色は、画像を貼っても動かない。 紺の画面に箔押しした見出しが1本。カーソルを動かすと、銀の上を虹が走ります。 何もしなくても、色の帯はゆっくり流れます。 色は薄膜干渉(シャボン玉と同じ、薄い膜で光が強め合う現象)を波長ごとに計算して出しています。 光源はカーソルの位置。箔の粒はノイズで面の向きを乱して作り、きらめきにだけ使います。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/holo-foil/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/holo-foil.md
画像の説明文（代替テキスト）: 箔押しの見出しの上を、カーソルの動きに合わせて虹色が走る
背景に置く動きは、ずっと見ていられるものがいい。 黒い画面で、粒子がノイズでできた流れに乗り、白い筋を残しながら進みます。 筋は約1.7秒で消え、カーソルの周りには渦ができて、その中の粒子が藍色になります。 流れはカールノイズ(ノイズの傾きを90度回したもの)から作っています。 流れが一か所に吸い込まれないので、粒子が溜まらずに画面全体を回り続けます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/flow-field/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/flow-field.md
画像の説明文（代替テキスト）: 粒子が流れに乗って白い筋を描き、カーソルの周りに藍色の渦ができる
墨のにじみを、クリックで起こせたら。 白い紙色の画面で、クリックした場所から墨が一滴、丸く広がります。 縁から細い筋が伸びて外側に薄墨の輪が残り、カーソルを動かすと墨をかき回せます。 煙のパーツと同じ流体ソルバを使い、浮力をゼロにして、にじむ広がりを足しています。 渦を強くすると丸が花びら状に割れるので、弱めに抑えるのが要点です。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/ink-drop/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ink-drop.md
画像の説明文（代替テキスト）: クリックした所から墨が丸く広がって筋を伸ばし、カーソルでかき回せる
スクロールするたびに模様が組み変わる背景。 「万華鏡」は、筒の中をのぞいているように見えるサイトです。 真ん中の円だけは本文が読め、その外側は色ガラスの破片が鏡写しで画面いっぱいに増えます。 スクロールで筒が回り、分割数が6から16へ増えて模様が細かくなります。 シェーダーで角度を扇形ごとに折り返しているだけで、破片はPCで14枚しかありません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/mangekyou/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/mangekyou.md
画像の説明文（代替テキスト）: 中央の本文の周りで色ガラスの模様が回る動画とPC・スマホ画面
カーソルの見た目を変えると、ページの印象まで変わる。 クリーム色の紙に黒い大文字のポスター。カーソルの代わりに黒い塊が遅れてついてきて、文字の上では白く反転します。 速く動かすと尾を引き、止まるとひとつにまとまります。 6つの円を、前の円を追うばねでつないでいます。 SVG のぼかしフィルタで円どうしをくっつけ、mix-blend-mode: difference で重ねると、下の色に合わせて反転します。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/blob-cursor/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/blob-cursor.md
画像の説明文（代替テキスト）: 黒い塊のカーソルが尾を引いて追い、文字の上で白く反転する
スクロールで物がくるっと回るページは、連番画像を用意しなくても作れます。 金属の結び目が60コマの連番で1周し、スクロールを戻すと逆に回ります。左下にはコマ番号と、保持しているメモリの量が出ます。 連番は画像ファイルを使わず、Canvas で全コマを先に描いて取っておきます。表示はスクロール位置をコマ番号に直して drawImage するだけ。同じ番号なら描き直さないのがコツです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/image-sequence/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/image-sequence.md
画像の説明文（代替テキスト）: スクロールに合わせて金属の結び目が1コマずつ回る連番アニメーション
画面の切り替えを、液体が流れ込むように見せたい。 黒い管理画面を、淡いレモン色が左から波打ちながら覆い、大きな一語の告知画面に変わります。カーソルを左右に動かすと、境目がついてきます。 境目は x 座標にノイズを足し、しきい値で2画面を分けて作ります。境目の縁を明るく、その内側に暗い線を1本入れるだけで液体らしく見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/liquid-wipe/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/liquid-wipe.md
画像の説明文（代替テキスト）: 黒い管理画面をレモン色の液体が波打ちながら覆い、告知画面に変わる様子
スクロールの量を、そのまま経過した年数として見せる方法です。 「百年の棘」は眠れる森の美女の城を、茨が覆っていくサイトです。 0年から100年までの数字と茨の伸びが、同じスクロール量で進みます。 最後の区画で茨の先に花が開き、城がまた見えてきます。 茨は文字の書き換え規則(L-system)で枝分かれを作り、SVGの線にしています。線の描き始めをずらす stroke-dashoffset をスクロールに連動させると、線が伸びて見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/hyakunen-no-toge/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/hyakunen-no-toge.md
画像の説明文（代替テキスト）: 城を茨が覆い、年数が0から100へ進む動画とPC・スマホ画面
導入企業のロゴの帯は、継ぎ目が一瞬でも見えると安っぽくなる。 架空のチーム名を並べた帯が2本、逆向きに流れ続けます。カーソルを乗せた帯は秒速60pxから8pxまでゆっくり落ち、ドラッグすれば手で送れます。 ロゴの列を2回並べ、translateX を1周分の幅で割った余りで動かすと継ぎ目が出ません。ホバーでは速度の目標値だけを変えると、動きがなめらかにつながります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/logo-marquee/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/logo-marquee.md
画像の説明文（代替テキスト）: 架空のロゴを並べた帯が2本、逆向きに途切れず流れる様子
手元の写真の色味がばらばらで、サイトの中でそろわない。 白黒の写真に斜めの境目があり、左は元の写真、右は紫と砂色の2色刷りになっています。カーソルで境目を動かすと、元の写真と見比べられます。 明るさ(輝度)を計算して、紫から砂色までの間の色に置き換えるだけのシェーダーです。暗い側の色を十分に暗くしておくと、塗り絵のようになりません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/duotone/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/duotone.md
画像の説明文（代替テキスト）: 写真の斜めの境目の左が白黒、右が紫と砂色の2色刷りになる様子
白い大理石の面を、写真なしで背景にする方法です。 石の筋が数本だけ、白い面の上をゆっくり流れます。 斜めに差す窓の光が面に映って横へ移り、カーソルや指の位置にも磨いた石の光が映ります。 筋はノイズで座標をゆがめ(ドメインワープ)、そこに sin の帯を重ねて作っています。ゆがめる処理を2段にすると、石らしい不規則な流れになります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/marble/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/marble.md
画像の説明文（代替テキスト）: 白い大理石の筋が流れ、光が映り込む背景の動画とPC・スマホ画面
ホラーの演出を、ページの壊れ方だけで作る。 「笑う男」は最初、表情の研修をする普通の会社のサイトに見えます。 スクロールするたびに走査線と色ずれが増え、文字が震えて、ところどころ「笑」の字に変わります。 中央のトランプは裏返るたびに絵柄が変わります。 崩れ方はビデオテープのノイズを真似たシェーダー1枚にまとめ、壊れ具合の値をスクロール量で上げています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/warau-otoko/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/warau-otoko.md
画像の説明文（代替テキスト）: 企業サイトがスクロールでVHSノイズに崩れる動画とPC・スマホ画面
フェードアウトだけだと、消える瞬間が印象に残らない。 白地の「Erase」をなぞると、触れた所だけ砂になって右へ流れ、紫に色づきながら薄れます。 約3秒で砂が戻って語が元に戻り、速くなぞるほど遠くへ飛びます。 文字を一度 canvas に描き、2pxおきに点を拾って約4万個の粒子にしています。 粒子ごとに「定位置・飛散・帰還」の状態を持たせると、壊れて戻る動きが作れます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/type-to-dust/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/type-to-dust.md
画像の説明文（代替テキスト）: Eraseの文字をなぞると砂になって風に流れ、数秒で元の形に戻る
金属のボタンを、画像を使わずに描けないか。 黒い面にアルミ・真鍮・黒染めのボタンが3つ。削り目に直交する光の帯が、カーソルを追って横切ります。 押すと縁の面取りが浅くなり、ボタンが沈みます。 ヘアラインは縦の位置だけで決まる一次元のノイズです。 光は異方性反射(筋の向きで光り方が変わる反射)の式で計算し、筋に直交する1本の帯にしています。3つの違いは色とパラメータだけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/brushed-metal/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/brushed-metal.md
画像の説明文（代替テキスト）: ヘアライン金属のボタン3つの上を、カーソルを追って光の帯が走る
数式の図形を、そのまま動く背景にできる。 紺の画面に、ローレンツ方程式の2枚の翼が白い粒で浮かびます。 クリックすると粒を一か所に集めて撒き直し、1本の線が約10秒で翼全体に広がります。 粒子1つずつがこの方程式の解で、GPU 上で毎フレーム積分しています。 積分は RK4 という精度の高い方法を1フレームに3回。係数は σ=10、ρ=28、β=8/3 です。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/attractor/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/attractor.md
画像の説明文（代替テキスト）: ローレンツの翼が白い粒で浮かび、クリックで1本の線から広がり直す
影を画像で用意すると、光を動かしたときに形が合わなくなります。 「影絵」は障子紙に切り絵を並べたサイトです。 カーソルがランプになり、木やうさぎや子どもの影がランプと反対側へ伸びます。 ランプを近づけるほど影は大きく、縁はぼけていきます。 影は、ランプから光を少しずつ進めて切り絵に当たるかを調べる計算(2Dのレイマーチ)で求めています。縁のぼけは炎の大きさの分だけ広げています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/kagee/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kagee.md
画像の説明文（代替テキスト）: 障子紙の切り絵の影がランプの位置で伸びる動画とPC・スマホ画面
旗がはためく動きは、点とばねで作れます。 淡い灰の画面に、竿から深い青緑の布が1枚。風を受けてはためき、布に書いた文字が波打ちます。 カーソルを右に寄せるほど風が強くなります。 布は37×25の点をばねでつないだものです。 隣同士のばね、斜めのばね、2つ隣とのばねで形を保ち、その結果を three.js の平面に書き戻して陰影を付けています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/cloth-flag/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/cloth-flag.md
画像の説明文（代替テキスト）: 竿に付いた青緑の布が風ではためき、布の文字が波打つ
押す前からボタンが反応すると、つい触りたくなる。 暖かい黒の画面に、蛍光イエローのボタンが1つと白い枠のボタンが4つ。 カーソルが近づくと一番近いボタンだけが寄ってきて、ラベルはさらに少し先に動きます。離れるとばねで揺れて戻ります。 距離はボタンの縁から測り、120px以内で寄せています。 寄る量は最大で半径の30%。ラベルだけ0.45倍余分に動かすと、奥行きが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/magnetic-buttons/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/magnetic-buttons.md
画像の説明文（代替テキスト）: カーソルが近づくとボタンが寄ってきて、離れるとばねで戻る
視差スクロールを入れたら、層ごとの速さがどこか不自然になった。 誌面の5つの層が奥行き方向に並び、スクロールすると手前の層ほど大きく速く動きます。ピントの合った真ん中の札だけがくっきりして、前後の層はぼけます。 全部の層に同じ量の移動を与えて、速さの差は CSS の perspective と translateZ に任せるのが要点。ぼけは奥行きの距離に比例させ、6pxまでに抑えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/depth-layers/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/depth-layers.md
画像の説明文（代替テキスト）: 誌面の5層がスクロールで速さを変えて動き、真ん中の札だけ鮮明な様子
3Dのガラスは、向こう側が歪んで見えないと本物らしくなりません。 「十二時まで」はシンデレラの舞踏会のサイトです。 右上で0時までの残り時間を数え、中央のガラスの靴が背後の見出しを屈折させて揺れます。 0時か「鐘を鳴らす」ボタンで金の飾りが消え、素朴な色に戻ります。靴だけはガラスのまま残ります。 屈折は、靴を消した背景を一度画像に描き、靴の面の向きに合わせてその画像をずらして読む方法です。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/juuniji-made/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/juuniji-made.md
画像の説明文（代替テキスト）: ガラスの靴が見出しを歪め、鐘で金の装飾が解ける動画とPC・スマホ画面
製品紹介から比較表へ、画面ごと切り替える遷移がほしい。 黒い舞台の製品が、左から進む前線のところだけ粗いブロックに砕け、白い比較表に置き換わります。前線から離れた所はくっきりしたままなので、途中で止めても何の画面か分かります。 ブロックの大きさを前線からの距離で変え、2の累乗に丸めるのがコツ。丸めないと縦の筋が出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/pixelate/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/pixelate.md
画像の説明文（代替テキスト）: 製品画面が左から進む前線で粗いブロックに砕け、白い比較表に変わる様子
料金表で、年払いにすると何が変わるかを一目で伝えたい。 細い罫で区切った3列の料金表で、月払いと年払いを切り替えると、価格が一桁ずつ下から回って入れ替わります。おすすめの列の青い枠も、そのたびに描き直されます。 各桁を、0から9を縦に並べた帯にして translateY で回します。下の桁から70ミリ秒ずつ遅らせると、数字を読む順に止まります。桁幅は tabular-nums でそろえます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/pricing-table/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/pricing-table.md
画像の説明文（代替テキスト）: 月払いと年払いを切り替えると、価格が一桁ずつ回って入れ替わる料金表
写真に、新聞や雑誌の印刷のような質感を足したい。 コートの写真が印刷の網点で刷られていて、カーソルを左右に動かすと点の間隔が3pxから16pxまで変わります。細かいと写真に、粗いと新聞の紙面に見えます。 45度に回した格子のマスごとに明るさを測り、暗いほど点の半径を大きくします。格子を45度に傾けると、画面のピクセルと干渉した縞が出ません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/halftone/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/halftone.md
画像の説明文（代替テキスト）: コートの写真が網点で刷られ、カーソルで点の粗さが変わる様子
ドラッグした線で、ページを本当に斬れたら。 「一閃」は包丁のサイトで、紙色の画面に二文字の見出しと一本の包丁だけが置いてあります。 ドラッグで斬ると、画面が線で二つに割れ、下側が重力で回りながら落ちていきます。 割れ方は、画面の四角を斬った直線で2つの多角形に分け、clip-path で切り抜いています。下側は同じ中身を複製して、重力と回転をつけて落としています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/issen/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/issen.md
画像の説明文（代替テキスト）: ドラッグした線で画面が割れ、下半分が落ちる動画とPC・スマホ画面
にじむグラデーションの背景を、画像に書き出さずに動かす。 いくつかの色の点が画面の右側でにじみ合い、時間でゆっくり漂います。 カーソルや指に一番近い点だけが寄ってきます。 各点からの距離で重みをつけて色を混ぜる計算(ガウス混合)です。混ぜる前に色を光の量の値に戻してから足すと、混ざった色が濁りません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/mesh-gradient/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/mesh-gradient.md
画像の説明文（代替テキスト）: 複数の色がにじみ合って漂う背景の動画とPC・スマホ画面
告知の帯に、奥行きをつけて回したい。 黒い画面で、文字を貼った3本の円筒が別々の速さと向きで回ります。 奥に回った文字は小さく暗く沈み、ドラッグやスクロールで加速して、惰性で元の速さに戻ります。 Three.js の円筒の側面に、canvas に描いた文字をテクスチャとして貼っています。 文言の繰り返し回数を整数にそろえて横幅を合わせると、継ぎ目が消えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/kinetic-marquee/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kinetic-marquee.md
画像の説明文（代替テキスト）: 文字を貼った3本の円筒が回り、ドラッグで加速して惰性で戻る
高級感のある背景に、布の質感を使いたい。 画面いっぱいの深紅のビロードの幕。襞の稜線が桃色に光り、光を動かすと毛並みの明暗が入れ替わります。 襞は数十秒かけて形を変えます。 縁が光るフレネルと、正面が暗くなる逆フレネルを、毛が立っているか寝ているかで切り替えています。 寝た毛の斑では明暗が逆になるので、同じ光で色が入れ替わって見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/velvet/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/velvet.md
画像の説明文（代替テキスト）: 深紅のビロードの幕で、光を動かすと毛並みの明暗が入れ替わる
隠しておいた文字を、虫めがねで探してもらう仕掛け。 「レンズ」は紙に文章を組んだサイトです。 カーソルに虫めがねが付いて動き、レンズの中だけ文字が1.6倍に拡大され、縁で色がずれます。 行間には、レンズを通したときだけ読める黒い一行が隠れています。 表と裏の2枚の絵を用意し、レンズの内側だけ裏の絵を屈折させて読むシェーダーです。色のずれは、赤・緑・青を縁でだけ少しずらして出しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/lens/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/lens.md
画像の説明文（代替テキスト）: 虫めがねが拡大し、隠れた一行が見える動画とPC・スマホ画面
フォームに打った文字が、その場で粒子になって集まる。 白い画面に散らばった黒い粒が、約1秒で入力欄の文字の形に集まります。 別の文字を打つと一度散って集まり直し、動いている粒だけ橙になります。カーソルを近づけると粒がよけます。 文字を canvas に描いて点を拾い、各粒子の行き先にしています。 行き先へ引くばねの力を GPU で計算し、文字が変わったら行き先のテクスチャだけ書き換えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/text-particles/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/text-particles.md
画像の説明文（代替テキスト）: 散らばった黒い粒が入力した文字の形に集まり、打ち直すと組み直す
押したときの手応えを、ボタンの見た目で伝えたい。 白い画面に朱・藍・黒のゼリーのボタンが3つ。押した所がへこんで反対側が膨らみ、離すとぷるんと揺れて戻ります。 揺れは約0.8秒で収まります。 輪郭は36個の点をばねでつないだ SVG のパスです。 押した点の近くを中心へ、反対側を外へ動かし、全体の大きさにも別のばねを付けています。WebGL は使っていません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/jelly-button/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/jelly-button.md
画像の説明文（代替テキスト）: ゼリーのボタンが押した所でへこみ、離すとぷるんと揺れて戻る
暗いトーンのサイトで、照らした所だけ文字を読ませたい。 真っ暗な画面で、カーソルの光が当たった所だけ白い文字と暖かい光が現れます。 光の外では、見出しは輪郭線だけ、本文は暗い灰色です。 同じレイアウトを2層重ね、上の層を CSS の mask-image(円形のグラデーション)で切り抜いています。 JS はカーソル位置を CSS 変数に書くだけ。縁を150pxから320pxにかけて消すと柔らかくなります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/spotlight-reveal/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/spotlight-reveal.md
画像の説明文（代替テキスト）: 暗い画面でカーソルの光が当たった所だけ白い文字が現れる
可変フォントの軸を、スライダーに直結させるとどうなるか。 「鼻が伸びる」はピノキオのサイトです。 「うそ」のスライダーを上げると見出しが太く長くなり、糸で吊られた木の人形の鼻も伸びます。 人形は糸の物理で揺れ続け、カーソルで操作棒が傾きます。 見出しは font-variation-settings の太さ(wght)をスライダーの値で毎フレーム書き換えています。字間も一緒に広げると、伸びた感じが強く出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/hana-ga-nobiru/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/hana-ga-nobiru.md
画像の説明文（代替テキスト）: スライダーで見出しと人形の鼻が伸びる動画とPC・スマホ画面
長いページだと、いま何枚目を読んでいるのか分からなくなる。 会場案内のカードが下から上がってきて、前のカードの上に重なります。前のカードは少し縮んで奥に下がり、上端の帯だけが残るので、帯の段数で進み具合が分かります。 全カードを同じ親の中に置き、position: sticky の top をカードごとに22pxずつずらすだけで積み上がります。JS が足すのは縮小と白いベールの濃さだけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/stacking-cards/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/stacking-cards.md
画像の説明文（代替テキスト）: 会場案内のカードがスクロールで下から上がり、前のカードに重なる様子
フェードだけの画面切り替えは、何が変わったのか伝わりにくい。 紙色の画面の上を、からし色の縦帯が左の列から順に上から下へ通り抜け、通った列から白い製品画面に変わります。途中では帯が階段のように並びます。 画面を9本の列に分け、列ごとに少しずつ遅らせて帯を動かすだけ。中身は帯が列を覆いきった瞬間に入れ替えます。WebGL は使わず、CSS の transform で作れます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/shutter/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/shutter.md
画像の説明文（代替テキスト）: からし色の縦帯が列ごとに上から下へ通り、白い製品画面に変わる様子
お客さんの声を一覧で並べると、どれも読まれずに流される。 暗い机にクリーム色のカードが束になっていて、一番上を横に払うと宙を回って束の底に入り、次の声が出てきます。束の厚みで、まだ続きがあると分かります。 CSS 3D でカードを少しずつずらして重ね、ドラッグ中は先頭のカードを指の動きに合わせて回します。払うときに必ず回転を付けると、紙らしく見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/testimonial-deck/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/testimonial-deck.md
画像の説明文（代替テキスト）: カードの束の一番上を払うと宙を回って底へ入り、次の声が出る様子
目に見えない空気の流れを、煙の線で見せる。 「空力」はスーパーカーと風洞のサイトです。 黒地に白い煙の線が流れ、その曲がり方で車体の形が分かります。 カーソルで風が乱れ、スクロールで風速が上がると線が引き伸ばされ、車の後ろに渦ができます。 風は流体の計算(ナビエ–ストークス方程式)で、車の形を空気が入れない場所として入れています。煙は左端から17本の線を流し込み続けているだけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/kuuriki/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kuuriki.md
画像の説明文（代替テキスト）: 風洞の煙の線が車体に沿って流れ、渦を作る動画とPC・スマホ画面
写真を、等幅の文字だけで描いてみたい。 黒い画面に、白い文字だけで工業用ミシンの写真が描かれています。カーソルで文字の大きさが変わり、小さいと写真に、大きいと記号の列に見えます。 マスごとの明るさに合わせて、暗い順に並べた16文字から1字を選んで描きます。文字は先に Canvas で一列の画像にしておき、シェーダーから切り出して使います。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/ascii-image/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ascii-image.md
画像の説明文（代替テキスト）: 白い等幅の文字だけで描いたミシンの写真が、カーソルで粗さを変える様子
スクロールに速さをつけたいときの背景です。 止まっているときは星がほぼ点で、下へスクロールするほど速くなり、星が長い光の筋に伸びます。 一番下まで行くと「到着。」の短い区画が出てきます。 星は画面中心からの角度と距離(極座標)で並べ、距離を対数にして手前ほど速く流しています。速度に合わせて尾の長さを伸ばすと、加速して見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/warp-stars/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/warp-stars.md
画像の説明文（代替テキスト）: 星がスクロールで光の筋に伸びる加速の動画とPC・スマホ画面
グリッチ表現を、画像も canvas も使わずに入れたい。 黒い画面の見出しが、数秒ごとに横へ裂けて、すぐ元に戻ります。 裂けた瞬間、字の縁に銅色と青のずれがはみ出します。 使っているのは SVG フィルタだけです。 縦方向にだけ変わるノイズ(feTurbulence)で文字を横にずらし(feDisplacementMap)、壊れるたびにノイズの種を替えます。HTML の文字のままなので、選択もできます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/glitch-type/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/glitch-type.md
画像の説明文（代替テキスト）: 黒地の見出しが数秒ごとに横へ裂け、銅色と青のずれを出して戻る
3Dの形を、文字だけで描けないか。 「文字の世界」は島の地形や壺を漢字で描いたサイトです。 ドラッグで回すと、光の当たり方に合わせて文字がその場で入れ替わります。 明るさに合わせて、空白から「一」「口」を経て「鬱」まで、16段の字を使い分けています。 3Dの場面を小さな画像に描き、1画素を1文字に置き換えるシェーダーです。字の濃さは、実際に描いて測った値で並べています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/moji-no-sekai/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/moji-no-sekai.md
画像の説明文（代替テキスト）: 漢字で描かれた島と壺がドラッグで回る動画とPC・スマホ画面
封蝋の半透明なやわらかさは、シェーダーで出せる。 ベラム紙の上に深紅の封蝋がひとつ。カーソルについてくる光で、縁の盛り上がりと彫りの陰影が変わります。 クリックすると押し直しになり、彫りの深さが戻ります。 蝋らしさは2つの工夫で出しています。 薄い所ほど赤く透ける厚みの透過と、面の向きを計算するときの差分幅を3pxと広く取って角を丸めることです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/wax-seal/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/wax-seal.md
画像の説明文（代替テキスト）: 深紅の封蝋の陰影が光の位置で変わり、クリックで押し直される
宇宙の背景を、回り続ける銀河にする。 黒い画面に傾いた渦巻銀河。102,400個の星が回っていて、内側ほど速いので腕が少しずつ巻き込まれます。 カーソルの位置には弱い引力があり、腕がそちらへ引かれます。 星の初期配置は対数螺旋(中心から一定の角度で開いていく渦)で決めています。 色は半径ごとに変え、中心は暖色、腕は青白、所々に赤い塵を混ぜます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/galaxy/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/galaxy.md
画像の説明文（代替テキスト）: 十万個の星の渦巻銀河が回り、カーソルの方へ腕が引かれる
画面の中に、つかんで引っぱれる物がひとつあると楽しい。 骨色の紙に麻の縄が1本垂れて、余った分が床に溜まっています。 つかんで引くと縄全体がついてきて、離すと揺れてから床の摩擦で止まります。 縄は70個の点を Verlet 積分(前の位置との差を速度として使う計算)で動かし、隣との距離を毎回元に戻しています。 2つ先の点との距離も保つと、縄に硬さが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/rope/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/rope.md
画像の説明文（代替テキスト）: 吊られた麻の縄をつかんで引くと全体がついてきて、床で止まる
画面に触れた所が水面のように波打つ表現は、仕組みが意外と短いです。 「鏡よ鏡」は白雪姫の魔法の鏡を、画面全体で作ったサイトです。 鏡文字の見出しが裏返り、正しい向きに揃います。 カーソルや指が触れた所だけ鏡面が波打ち、縁は銀の曇りで黒ずみます。 波は波動方程式(周りとの高さの差で次の高さを決める計算)を1フレームずつ進めています。その傾きで中身をずらして描くと、鏡が揺れて見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/kagami-yo-kagami/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kagami-yo-kagami.md
画像の説明文（代替テキスト）: 鏡文字が正位置に揃い、触れた所が波打つ動画とPC・スマホ画面
方眼の背景を、カーソルで押せるようにする。 方眼紙の上で、カーソルのまわりの格子がレンズのように膨らみ、押された線だけ群青になります。 離れると0.5秒ほどで元に戻ります。 格子点を、カーソルからの距離に応じて外へずらし、ばねで戻しています。 並び順が崩れない式でずらすので、中心に点が溜まらず格子のまま膨らみます。描画は Canvas2D だけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/reactive-grid/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/reactive-grid.md
画像の説明文（代替テキスト）: カーソルのまわりの格子が膨らみ、押された線だけ群青になる
次の場面を、文字の形の穴からのぞかせたい。 星の出た夜の画面に「夜明け」の三文字だけ穴が開き、その中に朝の空が見えます。スクロールすると字が大きくなり、字の中心から円が開いて、山頂の朝が全面に出ます。 手前の Canvas に destination-out で字と円を塗ると、その形だけ消えて奥の絵が見えます。穴の字は太いウェイトにするのが大事です。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/mask-reveal/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/mask-reveal.md
画像の説明文（代替テキスト）: 夜空の「夜明け」の字の穴から朝の空が見え、円が開いて全面に出る様子
暗い色のサイトだと、画面の切り替えが沈んで目立たない。 画面が砂のように下へ崩れ落ち、崩れている縁だけが琥珀色に光って、その下から次の画面が出てきます。見出しは最後まで崩れずに残ります。 ノイズの値がしきい値を超えた所から順に崩していきます。見出しの範囲だけしきい値を上げておくと、途中でも文字が読めます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/noise-dissolve/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/noise-dissolve.md
画像の説明文（代替テキスト）: 画面が砂のように崩れ落ち、縁だけ琥珀色に光って次の画面になる様子
氷の下に文字を閉じ込めたように見せたい。 「永久凍土」は氷と結晶のサイトです。 中央の氷の板の下で見出しが屈折して揺れ、クリックするとひびが走って、欠片が外へ順に落ちていきます。 画面の四辺からは霜が結晶のように伸びてきます。 ひびは、板を最初からボロノイ(点の縄張りで区切った形)の欠片に分けておき、クリック点に近い順に落としているだけです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/eikyuu-touido/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/eikyuu-touido.md
画像の説明文（代替テキスト）: 氷の板にひびが走り、欠片が落ちて見出しが出る動画とPC・スマホ画面
項目の多いサイトだと、メニューを開いても全体が見渡せない。 花屋の案内で、見出しに触れると上から大きなパネルが降りてきて、中の項目が列ごとに少し遅れて浮かびます。後ろのページは暗くなって少し奥へ沈みます。 パネルは高さを変えずに clip-path の inset で開くと、中身の組み直しが起きず軽く動きます。暗くするのはページ側に filter をかけ、ナビは白いまま残します。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/mega-menu/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/mega-menu.md
画像の説明文（代替テキスト）: 見出しに触れると大きなパネルが降り、後ろのページが暗く沈む様子
グリッチ風の加工は、写真全体にかけると何の写真か分からなくなる。 雨上がりの交差点の写真で、明るい光の筋だけが縦に並び替わって流れ、建物はそのまま残ります。下の紫のメーターで、写真のどれだけが動いているかが分かります。 列ごとに上から見ていき、明るさが範囲内のピクセルが続く区間だけを明るさ順に並べ替えます。範囲を中間の灰色より上にしておくと、建物が動きません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/pixel-sort/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/pixel-sort.md
画像の説明文（代替テキスト）: 夜の交差点の写真で、明るい光の筋だけが縦に並び替わって流れる様子
金属の液体を描くと、ただの灰色の塊に見えがちです。 銀色の液面が大きくうねり、カーソルや指の位置から細かい波紋が広がります。 見出しの文字も液面に上下反転して薄く映り、波で歪みます。 効いているのは映り込む景色の作り方です。暗い部屋に細長い窓の白い帯を11本描いた環境を作り、波の傾きで反射させています。帯の縁をほとんどぼかさないと、金属らしく見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/liquid-chrome/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/liquid-chrome.md
画像の説明文（代替テキスト）: 銀色の液体が波打ち、波紋が広がる背景の動画とPC・スマホ画面
つまみを回すと部屋が暗くなる、手触りのあるUIを作りたい。 「スイッチ」は机の上を3Dで描いたサイトです。 真鍮のつまみで明るさ、スイッチで色温度、レバーで光の向きが変わります。 文章の紙も同じ値を受け取り、明るさと色味と影の向きが3Dの部屋と一緒に変わります。 3D側のライトと HTML 側の CSS 変数に同じ値を渡すのが要点です。つまみは離した後も少し回り続けるよう、慣性をつけています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/switch/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/switch.md
画像の説明文（代替テキスト）: 真鍮のつまみを回すと部屋と紙の明るさが変わる動画とPC・スマホ画面
見出しを、筆で描いてから墨を流すように出したい。 生成りの紙の上で、明朝の文字の輪郭が線で走り、そのあと墨が字の下から上へ満ちていきます。 スクロールすると位置に合わせて進み、止めると自動でゆっくり往復します。 SVG の text のまま、破線のずらし量(stroke-dashoffset)で輪郭を描き、塗りは下から上へのグラデーションの位置を動かしています。 パスに変換しないので、文字の差し替えも簡単です。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/outline-reveal/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/outline-reveal.md
画像の説明文（代替テキスト）: 明朝の見出しが輪郭線で描かれ、下から墨で塗られていく
シャボン玉を描くと、虹色がただのグラデーションになりがち。 骨色の壁の前に薄い膜の球がひとつ浮かび、カーソルに遅れてついてきます。 色の縞は重力の向きに並び、時間とともに上から色が消えて、26秒で割れます。クリックでも割れます。 膜の厚さを nm 単位で持ち、赤・緑・青の波長ごとに干渉の強さを計算しています。 上を薄く下を厚くし、厚さがゼロに近づくと黒くなるので、割れる直前の黒い斑点まで出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/soap-bubble/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/soap-bubble.md
画像の説明文（代替テキスト）: 虹色の縞が流れるシャボン玉がカーソルを追い、時間がたつと割れる
群れの動きは複雑に見えて、規則は3つだけ。 クリーム色の紙の上を、2,560羽の黒い鳥が流れます。 カーソルは天敵で、近づくと群れが割れて避け、離れると数秒で戻ります。 1羽ごとに近くの鳥だけを見て、離れる・向きをそろえる・寄る、の3つで速度を変えています。 計算は GPU で、全羽の位置と速度をテクスチャに持っています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/boids/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/boids.md
画像の説明文（代替テキスト）: 黒い鳥の群れが紙の上を流れ、カーソルが近づくと割れて避ける
下へスクロールしているのに、上へ登っていく見せ方。 「雲の上まで」はジャックと豆の木のサイトです。 スクロールすると豆の蔓に沿って上昇し、右下の高さが0mから2,400mまで増えます。 雲の中を抜けると空の色が変わり、雲海の上に巨人の城の輪郭が見えます。 蔓は曲線に沿って管を作る TubeGeometry(Three.js)で、描く範囲をスクロール量に合わせて伸ばしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/kumo-no-ue-made/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kumo-no-ue-made.md
画像の説明文（代替テキスト）: 豆の蔓に沿って雲を抜け、城まで上る動画とPC・スマホ画面
やわらかい物に触れる感じを、画面で出せないか。 麻色の机に橙色の塊がひとつ。上から落ちて床で潰れ、揺れながら丸に戻ります。 カーソルを近づけると輪郭が凹み、クリックで弾くと転がります。 輪郭の64個の点をばねでつなぎ、中の面積から内圧を計算して外へ押し返しています。 潰れるほど強く押し返すので、離すと自然に元の形に戻ります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/soft-blob/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/soft-blob.md
画像の説明文（代替テキスト）: 橙色のやわらかい塊が落ちて潰れ、カーソルで凹み、クリックで転がる
会員証のカードを画面に置くと、どうしても平らな画像に見える。 黒いカードがカーソルの位置に合わせて3Dで傾き、白いハイライトと細い虹の反射が面の上を走ります。 触らずに2秒たつと、カードは自分でゆっくり傾きはじめます。 作り方の要点は、perspective を親要素に置いて、カードには rotateX/Y だけを渡すこと。影を傾きと逆の向きに動かすと、カードが台から浮いて見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/tilt-card/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/tilt-card.md
画像の説明文（代替テキスト）: 黒い会員証がカーソルに合わせて3Dに傾き、光と虹の反射が面を走る様子
実績の数字を、ただ増えるだけのカウントアップで終わらせたくない。 光の速さ 299,792,458 m/s を、9本のドラムが桁ごとに回って数え上げます。下の桁は速く回ってぼけ、上の桁は繰り上がりのときだけ動きます。 各桁の位置は「一つ下の桁が9から0へ送る間だけ回る」という式で決めます。ぼかしは1フレームの移動量に比例させるので、速い桁だけがぼけます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/eased-counters/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/eased-counters.md
画像の説明文（代替テキスト）: 9本のドラムが桁ごとに回り、光の速さの値を数え上げる様子
落ちて積もる砂の動きは、マス目の規則だけで作れます。 「砂」は大きな一文字の上に砂が降り積もるサイトです。 上から3色の砂が落ちて横画の上に山を作り、押した所には選んだ色の砂を注げます。 「文字を消す」を押すと、乗っていた砂が崩れて床に溜まります。 マス目ごとに、下が空なら落ちる、斜め下が空なら滑る、を繰り返すセルオートマトンです。滑る確率を砂の種類で変えると、山の傾きが変わります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/suna/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/suna.md
画像の説明文（代替テキスト）: 文字の上に色の砂が積もり、文字を消すと崩れる動画とPC・スマホ画面
読み込み中の画面は、数字ひとつあれば足ります。 紙色の幕の真ん中で大きな数字が0から100まで回り、繰り上がるときだけ上の桁が一緒に回ります。途中で3回つかえてから加速し、100で一拍置いて幕が上に抜けます。 桁は0から9、最後にもう一度0を縦に並べた帯を、translateY で回して作ります。つかえる間を入れると、本物の読み込みらしく見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/loader-count/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/loader-count.md
画像の説明文（代替テキスト）: 紙色の幕の中央で大きな数字が桁ごとに回って100になり、幕が上がる様子
ファーストビューを、画面を斜めに割った構図にしたい。 紫の夜と金色の昼が一本の斜線で隣り合い、カーソルを動かすと斜線の角度が変わって、夜・星・金の面・球がそれぞれ違う速さで動きます。 斜めの分割は clip-path の polygon と CSS の tan() で書きます。斜線と影も同じ polygon で切ると、ずれません。カーソルへの追従を少し遅らせると、重さが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/diagonal-hero/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/diagonal-hero.md
画像の説明文（代替テキスト）: 紫の夜と金の昼を分ける斜線が、カーソルで傾き層ごとに動く様子
色ずれの効果は、出しっぱなしだとすぐにうるさくなる。 モノクロのダンサーの写真で、カーソルを速く動かすと輪郭が赤・緑・青の3つにずれ、止めると1つに戻ります。止まっているあいだは色がまったく出ません。 シェーダーで、色の3つのチャンネルをそれぞれ別の向きにずらして読みます。左右対称にずらすと立体写真のように見えるので、3方向に散らすのがコツです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/rgb-shift/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/rgb-shift.md
画像の説明文（代替テキスト）: モノクロのダンサーの写真が、カーソルの速さで赤緑青の3色にずれる様子
同じ風を当てても、素材によって反応を変えたい。 「わら・木・れんが」は三匹の子豚の家を3つの区画で見せるサイトです。 カーソルが狼の息になり、わらの家は束と文字が飛び散り、木の家はたわんで傾きます。 れんがの家は動かず、息が壁で止まって周りへ流れます。 風は流体の計算(ナビエ–ストークス方程式)で、その風速を毎フレーム読み出して文字やわらに渡しています。れんがは風の速さを0にする四角として入れています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/wara-ki-renga/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/wara-ki-renga.md
画像の説明文（代替テキスト）: 狼の息でわらが飛び、木が傾き、れんがが残る動画とPC・スマホ画面
画面の下から炎が立つ背景を、動画を使わずに入れたい。 炎は画面の下45%にとどまり、上は黒のまま見出しを置けます。 カーソルや指の横位置で、その真上の炎が高くなります。火の粉も少しだけ舞います。 上へ流れるノイズを高さとともに冷まし、その値を黒から深紅、橙、黄、白の色に写しています。薪の量のむらをノイズで足すと、高い炎と低い炎が交ざります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/ember-fire/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ember-fire.md
画像の説明文（代替テキスト）: 画面下から炎が立ち、カーソルで高くなる動画とPC・スマホ画面
空港の案内板のパタパタは、CSSで作れます。 黒い板に時刻・行き先・搭乗口が並び、1文字ずつ上下の板が回って次の便に切り替わります。 数字からA〜Zへ一枚ずつ送られ、目的の文字で止まります。 1つのセルは上下2枚ずつ、計4枚の板でできています。 上の板を0度から-90度へ倒し、下の板を90度から0度へ起こす、CSS 3D の回転2つで動きます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/split-flap/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/split-flap.md
画像の説明文（代替テキスト）: 案内板の文字が上下の板の回転で一枚ずつ送られ、次の便に変わる
カーボン柄を画像で敷くと、拡大したときに粗が出る。 画面全体が綾織りのカーボン。カーソルの位置に光があり、動かすと繊維が斜めに光って織り目の流れが浮かびます。 織りは動かず、動くのは光だけです。 繊維の束は画像を使わずに、マス目の座標から計算しています。 (列−行)を4で割った余りで縦糸と横糸のどちらが上かを決めると、2/2の綾織りになります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/carbon/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/carbon.md
画像の説明文（代替テキスト）: 綾織りのカーボンの壁で、カーソルの光に沿って繊維が斜めに光る
ページが古びていく演出は、画像を差し替えなくても作れます。 「竜宮」は浦島太郎の竜宮城を、海の底として描いたサイトです。 右下の時計は今の時刻から数え始め、下へ進むほど速く回ります。 最後に玉手箱を開けると煙が広がり、画面がセピアに褪せて文字がかすれます。 煙と潮は同じ流体の計算で動かしていて、開けた瞬間にそこへ煙を注ぎ込むだけです。古びた見た目は、色あせと粒状のノイズを少しずつ強めて出しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/ryuuguu/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ryuuguu.md
画像の説明文（代替テキスト）: 藍の海に金箔が舞い、玉手箱の煙で画面が古びる動画とPC・スマホ画面
雪を降らせると、平たく見えてしまう。 深い緑黒の夜に、遠くは細かくゆっくり、手前は大きくボケた雪が落ちます。山影の中に小屋の灯りがひとつ。 カーソルを横に動かすと、一時的に風が吹きます。 1粒ごとに「どれだけ手前か」の値を持たせ、それで落ちる速さ・横揺れ・大きさ・ボケを変えています。 遠い粒ほど数を多くすると、奥行きが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/snow/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/snow.md
画像の説明文（代替テキスト）: 奥は細かく手前は大きくボケた雪が夜の山に降り、カーソルで風が吹く
ニュートンのゆりかごは、物理の計算がそのまま見た目になる。 左端の球が落ちると、中央の3球は動かず、右端の球だけが跳ね上がります。 球をつかんで引いて離すと、同じことが起きます。 各球は振り子の運動方程式で動かし、ぶつかった瞬間に隣同士の角速度を入れ替えています。 静止時に球の間へ2%の隙間を空けておくと、計算の誤差で勝手にぶつかりません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/pendulum/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/pendulum.md
画像の説明文（代替テキスト）: ニュートンのゆりかごで端の球が落ち、反対の端の球だけが跳ね上がる
自作のカーソルが、丸い点がついてくるだけで終わってしまう。 この作品の黒い点は、速く動かすほど進む向きに楕円に伸び、ボタンやリンクの上に来ると輪に変わります。 伸びるほど細くなるので、ゴムのような手触りが出ます。 コツは、短い方の径を「1÷√伸び率」にして面積を保つこと。色は mix-blend-mode: difference の白にしておくと、灰緑の地でも青いボタンの上でも消えません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/elastic-cursor/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/elastic-cursor.md
画像の説明文（代替テキスト）: 黒い点のカーソルが速さで楕円に伸び、ボタンの上で輪に変わる様子
スクロールの途中で、落ちていた物を浮かせたい。 「月へ帰る」はかぐや姫の竹林のサイトです。 夜の竹林で一本だけ内側から光る竹があり、花びらが落ちてきます。 読み進めると重力が逆になり、花びらと文字が浮き上がって、最後は月へ向かって昇ります。 花びらの動きはGPUでまとめて計算していて、重力の向き(プラスとマイナス)をスクロール量で入れ替えるだけで、落下が上昇に変わります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/tsuki-e-kaeru/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/tsuki-e-kaeru.md
画像の説明文（代替テキスト）: 光る竹の林で花びらと文字が浮き、月へ昇る動画とPC・スマホ画面
ページの入口に、扉を開けるような場面がほしい。 倉庫の扉2枚に「開場」の二字が一字ずつ載り、スクロールで扉が左右に割れていきます。奥にはアーチの通路が5層あり、琥珀色の光ごと近づいてきます。 扉は左右に動かしながら14度ずつ回転させると、perspective で台形に見えて重さが出ます。通路の層は手前ほど拡大率を大きくします。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/curtain-split/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/curtain-split.md
画像の説明文（代替テキスト）: 「開場」の字が載った扉が左右に割れ、奥のアーチの通路が近づく様子
ロゴを別の形へ変形させると、途中でねじれて結び目ができることがある。 白い壁の藍色のしるしが、円→四角→三角→星→V と変わって円に戻ります。縁ににじみと粒があり、紙に水彩のインクを置いたように見えます。 どの形も96個の点で描き直し、真上の点を0番にそろえてから点ごとに補間するのが要点。始点から遠い点ほど少し遅らせると、形が流れるように変わります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/logo-morph/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/logo-morph.md
画像の説明文（代替テキスト）: 藍色のしるしが円から四角、三角、星、V へと形を変えて円に戻る様子
サイトの一番下は、社名を画面幅いっぱいに置くだけで締まる。 黒い地に大きな社名が一語、端から端まで敷かれています。カーソルが近い字ほど太くなり、触らずにいると太さの波がゆっくり左から右へ通ります。 可変フォントの太さ(wght)を、カーソルとの距離から1文字ずつ決めるのが要点。幅は細い状態と太い状態の両方を測ってから font-size を決めるので、太っても右にはみ出しません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/giant-footer/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/giant-footer.md
画像の説明文（代替テキスト）: 画面幅いっぱいの社名が、カーソルに近い字ほど太くなるフッター
クリックした所だけを照らす表現は、光の計算1本でできます。 「三本目のマッチ」はマッチ売りの少女の、雪の夜の路地のサイトです。 タップした場所でマッチの火がつき、光の届く範囲だけ暖かい色と幻の言葉が見えます。 火は7秒で消え、マッチは3本だけです。 光は、火からの距離で明るさを落とす式をシェーダーで計算しています。近いほど背景の色を暖色に寄せるので、照らされた範囲がそのまま見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/sanbonme-no-match/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/sanbonme-no-match.md
画像の説明文（代替テキスト）: 雪の路地でマッチを擦り、火の周りだけ暖色になる動画とPC・スマホ画面
告知ページの写真は、出てくる瞬間に目が止まるようにしたい。 紙と同じ色のタイルが写真を覆っていて、左上から斜めに一枚ずつ消え、その下から倉庫の展示室の写真が現れます。閉じているときは、紙面の空いた枠に見えます。 タイルは CSS grid で16×9枚並べて写真に重ねます。一列ずつ順に消すと読み込みのバーに見えるので、斜めの順番に少しばらつきを足して遅らせます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/curtain-reveal/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/curtain-reveal.md
画像の説明文（代替テキスト）: 紙色のタイルが左上から斜めに消え、下から展示室の写真が現れる様子
プールの底で揺れる光の網を、背景に敷く。 水面を通った光が底で結ぶ網が、ゆらゆらと動き続けます。 網の縁には少し虹色がにじみ、カーソルや指の位置から波紋が広がって網が歪みます。 網はボロノイ(点の縄張りで区切った模様)の境界を細く尖らせた線です。2層を重ねて交わる所を明るくし、赤と青を少しずらして虹の縁を出しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/caustics/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/caustics.md
画像の説明文（代替テキスト）: プールの底の光の網が揺れ、波紋で歪む動画とPC・スマホ画面
文字を曲線に沿って流すなら、SVGだけで足ります。 白い画面を横切るS字の線の上を、案内の文字列が流れます。 スクロールした分だけ進み、止めていると一定の速さで流れ続けます。 SVG の textPath に曲線を指定し、startOffset(文字の開始位置)を毎フレーム動かしています。 文字列を2回繰り返しておき、半分の長さで割った余りを使うと、継ぎ目なく回ります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/text-on-path/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/text-on-path.md
画像の説明文（代替テキスト）: S字の曲線の上を案内文の文字列が流れ、スクロールで進む
スクロールを、穴に落ちていく時間として使えないか。 「落ちていく」は不思議の国のアリスのうさぎの穴のサイトです。 スクロールすると穴の中を真下へ落ち、壁に貼られた時計や鍵や瓶が通り過ぎます。 途中で「飲んで」の文字は小さく縮み、「食べて」の文字は画面からはみ出すほど大きくなります。 穴は内側を向けた長い円柱(Three.js)で、真下を向いたカメラをスクロール量だけ下げています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/ochite-iku/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ochite-iku.md
画像の説明文（代替テキスト）: うさぎの穴を落ち、文字が縮んだり巨大化したりする動画とPC・スマホ画面
金色を黄色のグラデーションで塗ると、金に見えない。 黒い画面に金箔を貼った円盤がひとつ。継ぎ目と割れから下地の赤土がのぞきます。 カーソルの光で、しわに沿って光る場所が変わり、クリックで貼り直せます。 金の色は反射の計算から出し、箔は少し傾けた正方形の格子で区切っています。 重なった所は明るく、隙間は暗くします。剥がれはノイズのしきい値で決め、円盤の縁ほど多くしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/gold-leaf/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/gold-leaf.md
画像の説明文（代替テキスト）: 金箔を貼った円盤の光り方がカーソルで変わり、割れから赤土がのぞく
夜の背景に、ぽつぽつ灯る光がほしい。 炭色の夜に琥珀色の光が別々の周期で灯っては消え、下の川面に横長に映ります。 カーソルの近くの蛍は、ゆっくり寄ってきます。 明滅は1匹ごとに周期を2.4〜5.6秒でずらし、灯るのは速く、消えるのは遅くしています。 光は加算合成なので、重なった所は明るくなります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/fireflies/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/fireflies.md
画像の説明文（代替テキスト）: 琥珀色の蛍が別々の周期で明滅し、川面に映ってカーソルに寄る
クリックした場所に、水面の波紋を立てたい。 暗い池の底に「水」の一文字が沈んでいて、数秒おきに雫が落ちて波紋が広がります。 クリックで大きな波紋、カーソルでなでると細かい波が立ち、底の文字がゆらぎます。 水面は波動方程式を格子の上で解いた高さの場です。 高さの傾きから面の向きを求め、その分だけ水底の画像をずらして読むと、屈折して見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/ripple-click/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ripple-click.md
画像の説明文（代替テキスト）: 暗い水面に波紋が広がり、水底の水の字が屈折してゆらぐ
白黒の画面に色が戻る瞬間を、スクロールで見せたい。 「黄色い道」はオズの魔法使いのサイトです。 開くとセピア一色の平原で竜巻が巻いています。 下へ進むと竜巻が散って色が戻り、黄色いれんがの道の先にエメラルドの都のガラスの塔が見えてきます。 色の戻りは、画面をセピアにした絵と元の絵をスクロール量で混ぜているだけです。竜巻は16,384個の粒をGPUで回しています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/kiiroi-michi/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kiiroi-michi.md
画像の説明文（代替テキスト）: セピアの竜巻から色が戻り、黄色い道を進む動画とPC・スマホ画面
写真のホバー効果が、拡大かフェードばかりになりがち。 劇団の稽古場の写真が、カーソルのまわりだけ空気のように波打ち、縁に赤と青の色ずれが出ます。写真の外に出ると波は止まります。 仕組みは WebGL のシェーダーで、画像を読む座標に「時間で流れるノイズ」と「カーソルから広がる同心円の波」を足すだけ。ずらす量を画像の3.5%までに抑えると、何の写真かが崩れません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/hover-distort/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/hover-distort.md
画像の説明文（代替テキスト）: 舞台写真がカーソルのまわりだけ波打ち、縁に赤と青の色ずれが出る様子
セクションの切り替えが、下へ流れていくだけで平らに見える。 黒い幕に「入口」の二字が穴として開き、奥に珊瑚色の部屋が透けています。下へ送ると字が30倍まで大きくなり、「口」の縦の画を抜けて奥の画面に入ります。 SVG の mask で字の形に穴を開け、scale を3乗の曲線で大きくするのが要点。拡大の中心を字の縦画のまん中に置かないと、抜けた感じが出ません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/zoom-through/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/zoom-through.md
画像の説明文（代替テキスト）: 黒い幕の「入口」の字の穴が大きくなり、奥の珊瑚色の部屋へ抜ける様子
空港の案内板のように、パタパタと文字が変わるローダーを作りたい。 黒い板が左から順に倒れ、LOADING → FONTS → IMAGES → SHADERS → READY と読み込みの段階を言葉で出します。倒れている板の下の小さな LED だけが緑に光ります。 1文字を4枚の面に分け、上半分が手前に倒れたあとで下半分が追って落ちるように CSS 3D で回します。目的の字までに中間の字を2〜3枚はさむと、板が回って見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/flap-loader/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/flap-loader.md
画像の説明文（代替テキスト）: 黒い反転フラップの板が順に倒れ、読み込みの段階名を表示する様子
水の流れを描くと、どうしても写真の劣化版に見えてしまう。 「川上から」は桃太郎の川のサイトです。 藍の川が画面を横切り、桃が波に合わせて揺れながら流れてきます。 スクロールで川を遡り、犬・猿・雉の節を過ぎると、夜の嵐になって雨と雷が走ります。 版画らしさは、光の当たり方を4段階に切り捨てて藍の3色に割り当てて出しています。桃は水面の高さへ引き寄せるバネで揺らしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/sites/kawakami-kara/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/kawakami-kara.md
画像の説明文（代替テキスト）: 木版画風の藍の川を桃が流れ、嵐になる動画とPC・スマホ画面
会社の沿革のページは、年と文が並ぶだけで読み飛ばされやすい。 手描きのような藍の線がスクロールに合わせて下へ伸び、線が届いた年の点が灯って、カードが起き上がります。最後に届いた年の見出しには橙の線が引かれます。 線は各年の点の位置を測って SVG の折れ線にし、stroke-dashoffset で伸ばします。48pxごとに±3.5pxの揺れを入れると、手で引いた線に見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/timeline/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/timeline.md
画像の説明文（代替テキスト）: 藍の線がスクロールで伸び、届いた年の点が灯ってカードが起きる様子
風景写真が1枚しかなくても、奥行きのある動きは付けられます。 霧のかかった山並みの写真で、カーソルを動かすと手前の松は大きく、遠くの尾根はわずかに動きます。境目をドラッグすると、視差の元になった奥行きの画像が見えます。 奥行きは、霞が濃いほど遠いとみなして写真の明るさから作ります。この作り方は、霧や霞のある風景写真でよく効きます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/depth-kenburns/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/depth-kenburns.md
画像の説明文（代替テキスト）: 霧の山並みの写真が、カーソルで手前ほど大きく動き奥行きが出る様子
空の背景の雲が、どうしても平たく見える。 カメラは雲海の上にあり、雲の上面の凹凸が太陽の向きに合わせて陰になります。 カーソルや指で、視線がわずかに動きます。画像は使っていません。 雲は、視線を少しずつ奥へ進めながら雲の濃さを足していくレイマーチで描いています。各点で太陽の方向にどれだけ雲があるかを見て暗くすると、厚みが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/volume-clouds/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/volume-clouds.md
画像の説明文（代替テキスト）: 雲海の上から厚みのある雲を見る背景の動画とPC・スマホ画面
溶ける文字を作ると、たいてい字が読めなくなる。 白い紙の上の墨の一字が、下の縁から列ごとに違う速さで垂れていきます。 ほとんどの列は少しだけ、ごく一部の列だけが長い滴になり、カーソルを当てた所は速く長く溶けます。 字の形は固定し、滴の量だけを毎フレーム下へ押し流しています。 列ごとにノイズで減り方を変えるのが要点で、これで自然なばらつきが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/melting-type/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/melting-type.md
画像の説明文（代替テキスト）: 墨の一字の下の縁から滴が列ごとに垂れ、カーソルの所が速く溶ける
陶器らしさは、釉薬のたまりと細かなひびで決まる。 白い画面に青磁の壺がひとつ。ゆっくり自転し、ドラッグで回せます。 カーソルの位置に光がついてきて、釉の照りと影が変わります。 壺は形を数式(SDF)で書き、視線を少しずつ進めて表面を探して描いています。 くぼみほど釉を厚く濃くし、貫入は3Dのボロノイ(点からの距離で区切る模様)の境目を線にしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/ceramic/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ceramic.md
画像の説明文（代替テキスト）: 青磁の壺が自転し、カーソルの光で釉の照りと貫入が見える
暗い背景に、ほとんど気づかないくらいの動きを足す。 ほぼ黒の画面に斜めの光が1本差し込み、その中でだけ埃が舞います。 手前の埃は大きくぼけ、奥は小さく鋭く見えます。カーソルを動かすと周りの空気が動き、埃が流れます。 埃は画面全体に16,384個ありますが、光の帯に入った粒だけを見えるようにしています。 帯の形は粒子と背景で同じ式から計算しているので、光と埃がずれません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/dust-in-light/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/dust-in-light.md
画像の説明文（代替テキスト）: 斜めに差し込む光の帯の中だけ埃が舞い、カーソルで空気が動く
鎖を描くと、輪が噛み合って見えるかで差が出る。 暗い画面の上部に、左右の金具から鋼の鎖が1本垂れています。 揺れると輪が軸まわりに回って幅が変わり、つかんで引くこともできます。 輪をつなぐ点は、隣との距離を一定に保つ計算で動かしています。 輪ごとに回転角を持たせて隣と90度ずらし、楕円の幅を回転角に合わせて細くすると、噛み合って見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/chain-links/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/chain-links.md
画像の説明文（代替テキスト）: 垂れた鋼の鎖が揺れて輪が回り、つかんで引ける
ボタンを押した手応えは、色が変わるだけだと弱い。 ボタンに触れると中心から細いリングが4本、少しずつ遅れて広がり、2.2秒で消えます。波が届いた隣のボタンは小さく揺れます。 リングは Canvas に線だけで描き、半径を経過時間に比例させて広げます。波が届いた要素に小さな反応を付けると、波に意味が出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/ripple-hover/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/ripple-hover.md
画像の説明文（代替テキスト）: ボタンに触れると中心から細いリングが何本も広がり、隣のボタンが揺れる様子
線画をスクロールで描かせると、長い線だけ速く見えてしまう。 麻色の紙に、鉢から茎、葉へと一本の線が伸びていき、葉は輪郭が閉じた瞬間に若草色で塗られます。右の手順の文字も、描き終わった段から濃くなります。 SVG の path の長さを getTotalLength() で測り、stroke-dashoffset をスクロールで減らすだけで線が伸びます。区間を path の長さの比で分けると、ペンの速さが一定に見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/line-draw/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/line-draw.md
画像の説明文（代替テキスト）: 麻色の紙に、鉢から茎、葉へと一本の線がスクロールで描かれる様子
画面の切り替えに、どこを押したかが残る動きがほしい。 夜の作業画面と朝の送信画面が、琥珀色の縁をもつ円で切り替わります。画面をクリックすると、その場所を中心に円が開き直します。 上の画面に clip-path: circle() を毎フレーム書き、半径をイージングで広げるだけ。開く時間を800ミリ秒より短くすると、円が見えないうちに終わります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/iris/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/iris.md
画像の説明文（代替テキスト）: 夜の画面と朝の画面が、琥珀色の縁をもつ円で切り替わる様子
よくある質問のアコーディオンは、JS で高さを測らなくても開閉できます。 図書館の利用案内で、質問を押すと答えがすっと開き、質問の文字に黄色のマーカーが左から引かれます。丸いボタンの「+」は回転して「−」になります。 答えの箱に display: grid を当てて、grid-template-rows を 0fr から 1fr へ動かすだけ。中身の量が変わっても、そのまま動きます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/faq-accordion/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/faq-accordion.md
画像の説明文（代替テキスト）: 質問を押すと答えがなめらかに開き、黄色のマーカーが引かれる様子
動画を使わずに、画面にフィルムの質感を足したい。 暗い画面全体に粒子が乗り、隅はビネットで沈み、ときどき縦の傷が走ります。カーソルを右へ動かすほど粒が増えます。 透明な WebGL の Canvas をページの一番上に重ね、毎フレーム違うノイズを描きます。粒の更新を1秒24回に間引くと、テレビの砂嵐にならずフィルムに見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/film-grain/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/film-grain.md
画像の説明文（代替テキスト）: 暗い画面全体にフィルムの粒子が乗り、ときどき縦の傷が走る様子
電気が走るような細い線は、太さをそろえるのが難しい。 暗い画面に青から白へ光る細い線が何本も流れ、線の上を明るさが走ります。 8本に1本だけ赤紫の線が混ざり、カーソルや指の位置に線が集まります。 線はノイズの等高線です。そのままだと場所で太さがばらつくので、傾きの大きさで割って、どこでも約1pxの太さにしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/plasma-sheet/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/plasma-sheet.md
画像の説明文（代替テキスト）: 青白い電気の線が走り、カーソルに集まる動画とPC・スマホ画面
長い文章を、1行ずつ読ませる見せ方を探している。 黒い画面に明朝の行が並び、スクロール位置にある1行だけピントが合って白く鋭くなります。 外れた行はにじみ、縁に青緑と紅の色ずれが出ます。 CSS の filter: blur と scale を、ピント位置からの距離で行ごとに計算して当てています。ライブラリは使っていません。 ぼけた行ほど text-shadow で色をずらすと、レンズらしさが出ます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/focus-blur-type/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/focus-blur-type.md
画像の説明文（代替テキスト）: スクロールに合わせて明朝の行が1行ずつピントを結び、白く鋭くなる
真珠を桃色で塗ってしまうと、作り物っぽくなる。 白い壁の前に真珠がひとつ。中心は乳白で、縁にだけ淡い桃と緑の色が出ます。 カーソルで光が動き、上下に動かすと色合いが寄ります。 真珠層の色は、厚みの違う3枚の薄膜で起きる干渉を平均して出しています。 視線が斜めになる縁ほど干渉色を強くし、表面の細かい凹凸で映り込みを少し崩します。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/pearl/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/pearl.md
画像の説明文（代替テキスト）: 白い壁の前の真珠の縁に淡い桃と緑が出て、カーソルで光が動く
雨の夜を描くとき、線を降らせるだけでは物足りない。 夜の路上に雨が降り、地面に当たった瞬間に小さな雫が2つ跳ねます。 街灯の近くを通る筋だけ暖色に光って濡れた地面に映り、カーソルを左右に動かすと雨が斜めになります。 雨粒は5,184本。GPU 上で落とし、地面に着いた印が立った瞬間に、同じ位置から跳ねの粒を生みます。 奥の雨は細く遅く、手前は太く速くしています。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/rain-streaks/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/rain-streaks.md
画像の説明文（代替テキスト）: 夜の路上に雨の筋が降って地面で跳ね、街灯の近くだけ暖色に光る
見出しの出し方に、少し遊びを入れたい。 白い紙の上に、「Hop in.」が1文字ずつ遅れて落ちてきます。 黒い床の線で跳ね、傾いて着地してから起き上がり、クリックすればいつでも落とし直せます。 文字ごとの span を translate と rotate で動かす、簡単な剛体の計算です。 床では速さに0.58を掛けて跳ね返し、床に触れている間だけ角度を戻すばねを効かせます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/bouncy-letters/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/bouncy-letters.md
画像の説明文（代替テキスト）: 見出しの文字が1字ずつ落ちて床で跳ね、傾いてから起き上がる
文字が化けてから元に戻るリンクは、短いコードで作れます。 行にカーソルを乗せると文字がカタカナや記号に崩れ、左から一文字ずつ正しい字に戻ります。いま戻っている一文字だけが青く光ります。 経過時間から「何文字目まで確定したか」を計算し、残りをランダムな字で描き直すだけで作れます。確定は1文字120ミリ秒。60ミリ秒より速いと読めません。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/scramble-link/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/scramble-link.md
画像の説明文（代替テキスト）: 目次の行に触れると文字が崩れ、左から一文字ずつ正しい字に戻る様子
セクションごとに背景色を変えると、境目がぱきっと切れて見える。 生成りの紙が、スクロールで若草・藤・薄紅へと移り、最後は墨色に落ちます。背景と一緒に文字色とアクセント色も変わり、右上に今の背景色が出ます。 色は OKLab という色の表し方で混ぜて、CSS 変数に書き戻すのが要点。ふつうの RGB で混ぜると、パステル同士の途中が灰色に濁ります。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/color-morph/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/color-morph.md
画像の説明文（代替テキスト）: スクロールで背景が生成りから若草、藤、薄紅、墨へと溶けて変わる様子
画面が切り替わる一瞬に、前の画面がちらっと見えてしまう。 藍色の波が下から画面を覆い、天井に届いた瞬間に中身が入れ替わって、引いたあとには次の画面が出ています。クリックすると波を呼べます。 波の境目は、周波数の違うサイン波3本を足して Canvas に描きます。1本だけだと機械的な揺れになります。振幅は画面の高さの8%までに抑えると、文字が読めるままです。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/wave-transition/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/wave-transition.md
画像の説明文（代替テキスト）: 藍色の波が下から画面を覆い、引くと次の画面に変わっている様子
タブの下線が横に滑るだけだと、少し物足りない。 観葉植物の定期便の案内で、タブを切り替えると細い下線が次のタブまで伸び、それから次のタブの幅に縮んで移ります。下のパネルも高さをなめらかに変えて入れ替わります。 Web Animations API で下線に3つのキーフレームを渡します。元の位置、両方のタブを覆う幅、次の位置。伸びる途中だけ線を少し太くすると、動きが読めます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/tabs-morph/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/tabs-morph.md
画像の説明文（代替テキスト）: タブの下線が隣まで伸びてから縮んで移り、パネルが入れ替わる様子
すりガラスのカードを作ったのに、ぼけがよく見えない。 色の光が流れる紙の上にカードが1枚あり、カードの中だけ後ろの色と罫がにじんで見えます。カーソルを動かすと、縁の光と照り返しが向きを変えます。 ガラスは backdrop-filter の blur と saturate で作ります。後ろに輪郭のはっきりした罫や文字を置くと、ぼけが比べて見えます。 作品ページと design.md はリプ欄に置いておきます。
作品ページ https://vale-stock.pages.dev/parts/frosted-card/ design.md（このデザインの設計書です。AIに渡すと同じ方向で作れます） https://vale-stock.pages.dev/md/frosted-card.md
画像の説明文（代替テキスト）: 色の光が流れる紙の上で、カードの中だけ後ろがにじんで見える様子
