ひとつの形に、控えめなレイヤーを。
チケットに箔の仕上げを加え、
光を手の動きに合わせよう。
傾きと光沢が一緒に反応します。
ポインター → 制限された傾き + 動く反射考え方 / 動きに応える素材
箔のカードは、小さな効果が調和することで生まれます。輪郭は鮮明に、色は流れ、粒子は手触りを感じさせ、カードを傾けると反射が動く。文字はその上に静かに重なります。
5つのパレット、切り欠き、素材の調整、PNG保存を備えたウェブカードをつくり、各レイヤーを分けて観察します。準備なしで試せます。サンプルの編集にはJavaScriptとシェーダーの基礎が役立ちます。
角丸の長方形から始め、中央より少し下の両側から円を引くとチケットになります。切り欠きと角の半径は独立しています。角は親しみやすさを、切り欠きは特徴を生みます。
モデルがひとつのパスを生成します。CSSはプレビュー、Canvasは書き出し画像を同じパスで切り抜きます。偶奇規則で円の重なりを除き、形を共有することでPNGにも同じ輪郭を保ちます。
試してみよう： 「形」を選び「レイアウト」を開きます。切り欠きをゼロにし、角を丸めて、通常のカードとチケットを比べましょう。横長も試してください。
3色を幅広い帯として混ぜ、低い周波数のノイズで曲げます。直線的すぎるグラデーションを避け、少しのスペクトル色を加えて虹色の変化をつくります。
色の角度でサンプリングの向き、虹色の強さでスペクトルの寄与を変えます。ポインターはハイライトと色の位相を少し動かし、応答する素材にします。
試してみよう： 「箔」で真珠とグラファイトを比べましょう。虹色をゼロから増やし、色の角度を回します。形と文字は固定され、色だけが変わります。
微細な変化で表面をつくります。点描は粒と雲状の変化、ヘアラインは一方向の線、プリズムは交差する細い模様。素材の明るさを変え、文字はぼかしません。
模様はカード座標で計算するため、傾けても表面に固定されます。一定の擬似乱数を使い、毎フレーム粒を置き換えてちらつかせません。
試してみよう： 「質感」で同じパレットの3種類を粒子50%で比べ、ゼロにもしてみましょう。手触りが感じられる最小の量を探してください。
カード上のポインター位置を−1から+1に正規化し、傾きと反射の中心を同時に動かします。幅広い柔らかな帯と細いハイライトで光沢をつくります。
CSSの遠近法で奥行きを、シェーダーで光沢を動かします。経過時間に合わせて傾きをなめらかに変え、ポインターが離れると静止位置へ戻ります。動きを減らす設定では光だけが反応します。
試してみよう： 「光」を選び、マウス、タッチ、矢印キーを試しましょう。光沢0%と100%を比べます。レイアウトのX・Y傾きで角度を固定すると、ポインター追従はオフになります。
箔は装飾、タイトルと会員情報がカードの意味を伝えます。文字は上のレイヤーなので粒子を変えても鮮明です。自動の文字色はパレットに合わせ、長いタイトルは幅に収まります。
「文字」で自分のカードにしましょう。3Dの姿勢はプレビューだけの演出です。書き出しは現在の素材、光、配置、文字を保ち、長辺1600pxの平面画像になります。角と切り欠きは透明です。
試してみよう： 「文字」でタイトルと会員情報を変更し、読みやすい文字色を選んで表面を保存しましょう。
実践 / 一枚のカード、ふたつの仕上げ
タイトル、縦横比、切り欠きは同じまま、真珠・点描・粒子25%・光沢30%で一枚保存しましょう。
真夜中とプリズムに切り替え、光沢を増やして光を動かし、もう一枚保存します。雰囲気と読みやすさを比べ、同じシリーズにできるか考えましょう。
カードに戻る ↑WebGLで箔を、Canvas 2Dで文字を描き、共通のパスで切り抜きます。CSSが遠近感をつくります。描画ライブラリーは不要です。
const p = {
x: clamp((clientX - bounds.left) / bounds.width * 2 - 1, -1, 1),
y: clamp((clientY - bounds.top) / bounds.height * 2 - 1, -1, 1)
};
const tilt = { x: -p.y * 12, y: p.x * 16 };
// Move the material highlight from the same input.
const light = { x: p.x, y: p.y };
// Clip the exported face using the preview's path.
context.clip(new Path2D(cardPath), 'evenodd');HTMLを保存してブラウザーで開き、テキストエディターで編集します。スタイル、画像、形、シェーダー、操作を内蔵。WebGLを使えない場合も簡易な色のプレビューを表示します。
個別のソース： 形とポインターのモデル · 箔のシェーダー · 編集と書き出し.