全技法一覧（191件）

Web Design Lab の全191技法をカテゴリ別に一覧。CSS・JavaScript・Canvas・SVG・WebGL・Python の表現技法を、ライブデモとコピーできるコード付きで。

レイアウト & グリッド (9)

CSS Grid マガジンレイアウト — grid-template-areas で名前付きエリアを定義し、雑誌の誌面のようにヒーロー・索引・ヘッダーを組む。複雑な誌面構成を宣言的に表現できる。
Flexbox ホーリーグレイル — ヘッダー・フッターと固定幅の両サイド＋伸縮する中央カラムを Flexbox で構成する定番の3カラム管理画面レイアウト。
CSS-only Masonry風グリッド — column-count と break-inside: avoid だけで、高さの異なるタイルを石積み状に並べる Masonry 風ギャラリー。JSのライブラリ不要。
Subgrid カード整列 — grid-template-rows: subgrid で各カードが親グリッドの行ラインを継承し、本文の長さが違っても見出し・価格・ボタンの高さがピタリと揃う料金表。
Container Queries 適応カード — container-type と @container で、置かれたコンテナの幅に応じて同じカードが縦積み↔横並びへ切り替わる。スライダーで挙動を体感できる。
aspect-ratio メディアグリッド — aspect-ratio をCSS変数で制御し、1:1/4:3/16:9などの比率を保ったままタイルを敷き詰める画像ギャラリー。比率切替も滑らかに。
CSS multi-column テキスト — column-width・column-rule・column-span で新聞風の段組み本文を組む。ドロップキャップや見出しの段ぶち抜きも実演。
ベントグリッド — grid-column / grid-row の span で大小のタイルを組み合わせる、近年流行のベント風ダッシュボードレイアウト。クリックで発光パルス。
Sticky スタックスクロール — position: sticky と top のずらしで、スクロールするとカードが重なり積み上がるストーリーテリング向けレイアウト。進捗バーをJSで連動。

タイポグラフィ (13)

グラデーションテキスト — background-clip: text で文字をグラデーションに切り抜き、背景位置のアニメで色を流します。ヒーロー見出しやロゴに最適です。
テキストアウトライン（中抜き文字） — -webkit-text-stroke で塗りのない輪郭文字を作り、塗りレイヤーと重ねてホバーで色が流れ込みます。バナーやポップな見出しに使えます。
文字ごと出現アニメ — JSでテキストを1文字ずつspan化し、遅延を付けて波打つように出現させます。ページロード時の見出し演出に向いています。
タイプライター効果 — ターミナル風UIで複数のフレーズを1文字ずつ打って消すループ。点滅カーソル付きで、ヒーローの動的キャッチコピーに使えます。
縦書きレイアウト — writing-mode: vertical-rl で日本語を縦組みにし、和風の段組みを表現します。詩・俳句・和テイストのサイトに最適です。
ネオンサイン文字 — 多重 text-shadow で発光する管を再現し、不規則な点滅アニメで本物のネオンらしさを出します。ナイトライフ系やレトロなサイトに。
グリッチテキスト — 疑似要素でRGBをずらした2枚のコピーを clip-path で切り抜き、デジタルノイズ風のグリッチを作ります。サイバー／テック系の見出しに。
可変フォント風ウェイトアニメ — JSで文字ごとに font-weight をsin波で連続変化させ、可変フォントのような波打つ太さ変化を再現します。動的なロゴやヘッダーに。
擬似3D押し出し文字 — 多層 text-shadow で立体的に押し出した文字を作り、マウス追従でわずかに傾けます。レトロでインパクトのある見出しに使えます。
テキスト解読（スクランブル） — ランダムな記号から正しい文字へ左から順に解読されていく演出をJSで実装。ハッカー風・読み込み完了の表現に向いています。
キネティックタイポグラフィ — 大きな単語が拡大・回転・スライドしながら次々と飛び込み、躍動的に入れ替わるループ演出をJSで実装します。語ごとにアニメ種別を切り替えて単調さを抑え、入場と退場をなめらかに繋ぎます。ヒーローやオープニングの強いキャッチに最適です。
画像で塗った文字 — 見出しテキストを background-clip: text で写真やアニメグラデにくり抜き、背景をゆっくり動かして文字の中で景色が流れて見える表現です。picsum画像とCSSグラデを重ね、文字の輪郭の中だけに動く絵を閉じ込めます。インパクトのあるヒーロー見出しに向いています。
スクロールで一語ずつ着色 — 段落をword単位に分割し、内部スクロールの進行に合わせて薄い文字色から明るいブランド色へ一語ずつ変化させる読み進めハイライト。IntersectionObserverで各wordの着色を制御します。記事やストーリー系のリードに最適です。

アニメーション & トランジション (11)

staggered リスト出現 — リスト各行を時間差でフェード＆スライドインさせる演出。タスク一覧や検索結果の登場アニメーションに使えます。
モーフィングローダー — SVGパスの点群をイージング補間して滑らかに形を変えるローディング表現。待機画面のアクセントに最適です。
無限マーキー — トラックを複製しtranslateX(-50%)で継ぎ目のない横スクロールループを実現。お知らせ帯やロゴ流しに使えます。
イージング比較デモ — linearからback・anticipateまで複数のtiming-functionを同時に走らせて違いを体感できます。モーション設計の学習に。
パルス通知バッジ — アイコン右上のカウントを波紋とポップで強調する通知バッジ。更新時のアテンション喚起に使えます。
スケルトン→表示遷移 — シマー付きスケルトンから実コンテンツへなめらかに切り替えるロード演出。体感速度の向上に役立ちます。
クリップパス円ワイプ — clip-path: circle() を補間し、クリック地点を起点に円が広がってパネルを切り替えるトランジション。
グラデ見出し＆光沢 — background-clip: text と背景アニメで文字を発光させ、各文字を浮遊させる見出し演出。ヒーローのキャッチに。
3Dフリップカード — ホバーで反転しつつポインタ追従で傾く立体カード。preserve-3dとCSS変数で会員証やプロフィールカードに。
数字ロール（オドメーター） — 各桁が 0-9 の縦ストリップを translateY で回転させ、機械式オドメーターのように数値を更新する演出。桁ごとに僅かな遅延を付けて転がる質感を出します。カウンターやKPI表示のアクセントに。
ブラーイン出現 — 見出しや要素を blur(12px)+scale+opacity 0 の状態から、鮮明・等倍へ連続して立ち上げる登場演出。要素ごとに時間差を付けてフォーカスが合う瞬間を演出します。ヒーローや見出しの初動に。

マイクロインタラクション (11)

マグネティックボタン — カーソルの位置に応じてボタンが磁石のように引き寄せられ、内部要素も視差で追従します。ヒーローのCTAやナビに使うと注目を集められます。
3Dティルトカード — マウス位置を回転角に変換し、CSSのperspectiveでカードが立体的に傾き光沢が走ります。商品カードやプロフィールカードの演出に最適です。
リップル波紋ボタン — クリック位置を起点に波紋が全面へ広がるマテリアルデザイン風の押下フィードバック。あらゆるボタンに汎用的に組み込めます。
アニメ下線リンク — 純CSSの疑似要素だけで作る4種のホバー下線（左伸び・中央展開・スワップ・枠線）。ナビゲーションやテキストリンクの質感を高めます。
ハンバーガー→×モーフ — 3本線がtransformで滑らかに×へ変形するメニュートグル。aria-expandedも同期し、モバイルナビの開閉ボタンにそのまま使えます。
いいねハートバースト — クリックでハートが弾み、放射状に色とりどりの粒子が飛び散る「いいね」ボタン。SNSやレビューのリアクションUIに使えます。
昼夜トグルスイッチ — 太陽が月に変わり、空が夜になって星が現れるアニメ付きスイッチ。ほぼ純CSSで動き、ダークモード切替などの設定UIに向きます。
スターレーティング — ホバーでプレビュー、クリックで確定し、矢印キー操作にも対応した5段階の星評価。レビュー投稿やアンケートの入力UIに使えます。
テキストスクランブル — 文字をランダムに揺らしながら正しい単語へ収束させるレトロな演出。requestAnimationFrameで実装し、ヒーロー見出しのアイキャッチに最適です。
紙吹雪サクセスボタン — 押すとボタンが完了状態へ変化し、canvasで紙吹雪が物理落下する達成感の演出。購入完了やフォーム送信成功のフィードバックに使えます。
磁力グリッド — ドットの格子がカーソルの磁場で引き寄せ・反発し、近づくほど大きく波打って歪みます。待機中は仮想カーソルが巡回して常に動き、pointermoveで本物に追従。ヒーロー背景やインタラクティブな装飾に使えます。

背景 & グラデーション (12)

アニメーショングラデーション — background-position をアニメーションさせ、4色のグラデーションが無限にループする背景。ヒーローセクションやランディングページの土台に使えます。
メッシュグラデーション — 複数の radial-gradient を重ねて有機的な色面を作り、JSで各色溜まりを漂わせるメッシュ背景。SaaSやポートフォリオのヒーローに最適です。
SVGノイズ質感 — feTurbulence で生成した粒状ノイズをグラデーションに重ね、上質なマット質感を演出。ボタンでノイズの粗さを切り替えられます。
動く幾何学パターン — canvas で三角格子を描き、サイン波に沿って各点を明滅させる動的背景。テック系のLPやダッシュボードの背景に使えます。
オーロラ光背景 — ぼかした光の帯をゆっくり揺らし、星空とともに夜空のオーロラを再現するCSS背景。ダークテーマのヒーローに映えます。
ドット/グリッド背景 — CSSのドット格子にマウス追従のスポットライトを重ねた背景。マスクで照らした部分だけドットを濃く見せます。ダッシュボード向け。
回転グラデーションボーダー — @property で角度を回転させた conic-gradient のボーダーがカードの縁を発光させる演出。価格表やバッジカードに使えます。
blobモーフィング — JSで制御点の半径を補間し、SVGパスを滑らかに変形させる有機的な背景。遊び心のあるLPの主役背景になります。
シルクウェーブ — 半透明のサイン波リボンを canvas で加算合成し、しなやかに流れる絹のような発光背景を描きます。高級感あるヒーローに。
レトロ・パースグリッド — 夕焼け空に沈む太陽とパースの効いたグリッドを手前へ流す、80年代風シンセウェイブ背景。CSSのみで完結します。
浮遊する幾何オブジェクト — 半透明の円・三角・リング・カプセルがゆっくり漂い、マウス位置に応じて視差で奥行きが動く没入感のある背景。前景に短いコピーを置けばヒーロー風に。SANKOU!系の「背景が動く」トレンドを自己完結のCSS/SVGで再現します。
プログレッシブブラー — 下端に向かって段階的に強くぼかす backdrop-filter 層を mask グラデで重ね、写真の上に置いた固定ナビと見出しの可読性を高める手法。Apple/iOS 風の上品なフェードブラーで、ヒーローやアプリUIに使えます。

グラス / ニューモーフィズム (7)

ガラスカード（backdrop-filter） — backdrop-filter で背景をぼかした半透明のガラスカード。マウスに追従する光沢で、料金プランや特集カードの主役に使えます。
ニューモーフィックボタン — 背景と同色＋二方向シャドウで浮き沈みするニューモーフィズムのボタン群。押すと凹む立体感で、トグルやアイコン操作に向きます。
ニューモーフィックカード — 凹凸のパネルや進捗バーを組み合わせたニューモーフィズムのプロフィールカード。やわらかなダッシュボードUIに最適です。
フロストナビバー — スクロールするコンテンツの上で背後が透けるフロストガラスのナビバー。スクロール量に応じて濃さが変わり、ヘッダーに活用できます。
クレイモーフィズム — 内外の二重シャドウでぷっくり膨らんだ粘土風カード。やわらかく親しみやすいUIやSNS系コンポーネントに向きます。
3Dチルト・ガラスログイン — マウス位置に合わせて立体的に傾くガラス調のログインパネル。perspective と backdrop-filter を組み合わせた没入感のあるフォームです。
ニューモーフィック・トグル＆スイッチ — スライドトグルとセグメントスイッチを備えたニューモーフィズムの設定パネル。状態を文章で反映する設定UIのサンプルです。

3D & パースペクティブ (8)

3Dカードフリップ — transform-style: preserve-3d と backface-visibility を使い、クリックで表裏が回転するカード。会員証や商品カードの詳細表示に使えます。
3D回転キューブ — 6面を3D空間に配置したキューブが自動回転し、ドラッグで手動回転もできます。ローディングやヒーロー演出のアクセントに最適です。
マウス連動パララックス層 — 複数レイヤーをマウス位置に応じて異なる量だけ動かし、奥行きを演出します。ヒーローセクションの没入感を高める手法です。
3Dカルーセル — パネルを円柱状に配置し前後ボタンと自動送りで回転する3Dカルーセル。ギャラリーやプロダクト紹介の回遊導線に使えます。
perspectiveホバーグリッド — マウス位置に追従してカードが3D傾斜し、光沢が動くインタラクティブなグリッド。サービス紹介やメニューカードを印象的に見せます。
奥行きレイヤースタック — 同じ図形をZ軸方向に積層し、マウスで覗き込むように傾けて立体感を出すデモ。ロゴやキービジュアルの演出に応用できます。
3Dドットグローブ — canvasに球面分布した点を透視投影で回転描画する地球儀風アニメーション。ドラッグ操作対応で、データ可視化やテック系の背景に向きます。
3Dページめくり — CSS perspective と rotateY で本のページがめくれる演出。ボタンで前後にめくれ、自動ループにも対応。ページの裏表と影で立体感を出します。電子書籍やポートフォリオの導入演出に向きます。

スクロール演出 (15)

スクロールリビール — IntersectionObserverで画面に入った要素を順番にフェードアップ表示します。LPやカードリストの登場演出に最適。
scroll-snapギャラリー — CSS scroll-snapで各スライドにピタッと吸着する横スワイプギャラリー。ドット連動で現在位置も表示します。
スクロール進捗バー — ページの読み進み度を上部バーと円形リングで可視化します。長文記事やブログの定番UX。
パララックス背景 — 複数レイヤーをスクロール速度差で動かし奥行きを演出します。ヒーローセクションのビジュアルに。
stickyスクロールストーリー — position:stickyでビジュアルを固定したまま、スクロールに連動して中身を切り替えるストーリーテリングUI。
数字カウントアップ — 要素が画面に入った瞬間、実績数値を0からアニメーションで加算表示します。サービス紹介の統計に。
横スクロールセクション — 縦スクロール量をtransformで横移動に変換するピン留めセクション。ポートフォリオや工程紹介に映えます。
スクロール文章ハイライト — スクロール進捗に合わせて文章を単語ごとに点灯させ、読み手の視線を導きます。引用や物語の見せ場に。
スクロール3D回転カード — スクロール量をrotateYに割り当て、カードを立体的に回転させます。CSS 3D transformの応用デモ。
スプリットスクリーン（左右逆スクロール） — 内部スクロールに連動して左パネルは上へ、右パネルは下へと逆方向に動く分割画面。中央の境界線を境に視差が生まれ、対比のあるヒーローやストーリー導入に映えます。
ナラティブ・スクロール — スクロール進行で章（シーン）が切り替わり、背景色と見出しテキストがフェードで入れ替わる没入演出。3〜4シーンで物語のように読み進めるストーリーテリングUIです。
スクロールで画像が全画面に拡大 — スクロール進行で中央の画像が小さなカードから全画面へとなめらかに拡大し、キャプションが浮かび上がるシネマティック演出。プロダクトやポートフォリオの見せ場に。
純CSSスクロール出現（animation-timeline: view()） — animation-timeline: view() を使い、JavaScript無しで複数カードをビューポート進入時にopacity+translateYで出現させます。@supportsでガードし非対応ブラウザでは普通に表示。
純CSS読書進捗バー（animation-timeline: scroll()） — animation-timeline: scroll() で上部の進捗バーがスクロールに連動して伸びます。JavaScript無しで実装でき、長文記事の読了率表示に最適。
スクロール速度スキュー — rAFでスクロール速度を算出し、速くスクロールするほど要素をskewY/scaleYで歪ませます。手を止めると線形補間でなめらかに元へ戻る慣性演出。

Canvas エフェクト (12)

パーティクル接続（星座） — 近い粒子同士を線で結び星座のように見せる定番表現。マウス付近の粒子も結線します。ヒーロー背景やローディング演出に最適です。
マウス追従粒子トレイル — ポインタの軌跡に沿って虹色の粒子を放出し、加算合成で発光させるインタラクティブ演出。カーソル装飾やゲームUIに使えます。
花火アニメーション — 打ち上げ弾が頂点で爆発し放射状に火花が飛ぶ物理風の花火。自動打ち上げに加えクリックでも発射できます。お祝い・達成演出に。
降雪・雨エフェクト切替 — ゆらゆら舞う雪と斜めに降る雨をボタンで切り替えられる天候エフェクト。季節のランディングページやヒーロー背景に重ねて使えます。
マトリックスレイン — カタカナや数字が緑の軌跡で流れ落ちる映画風デジタルレイン。残像合成と先頭の発光で雰囲気を出します。テック系の演出やイントロに。
多層サイン波アニメ — 振幅と周波数の異なる正弦波を加算合成しネオン状に発光させる波形ビジュアル。音楽・オーディオ系のヘッダー背景に向いています。
お絵描きキャンバス — ポインタ操作で線を描き、色パレットと太さスライダー、クリア機能を備えた簡易ペイント。署名入力やメモ、落書き機能の土台になります。
重力で集まる粒子フィールド — マウスへの引力で粒子が集まり、クリックや右クリックで弾け飛ぶインタラクティブな重力シミュレーション。遊び心のある背景やヒーローに。
フローフィールド（流れ場） — 三角関数で作った疑似ノイズの流れ場に沿って大量の粒子が漂い、繊細な流線アートを描く生成的ビジュアル。アンビエントな背景に最適です。
オーディオビジュアライザー（Web Audio） — 合成オシレータの和音を AnalyserNode で解析し、周波数バーと波形を同時に描く音響ビジュアル。マイク不要で再生ボタンから開始でき、音楽系UIやヒーロー演出に使えます。
パーティクル文字 — テキストのピクセルをサンプリングし、その座標へ無数の粒子が集まって文字を形成。マウスを近づけると弾け、離れると吸い寄せられて戻るインタラクティブ表現です。
メタボール（リキッド） — 動き回る複数の円が近づくと滑らかに融合して見えるメタボール表現。距離場のしきい値で輪郭を描き、粘性のある液体のような有機的ビジュアルを生成します。

SVG エフェクト (8)

パスドローイング(手書きアニメ) — stroke-dasharrayとdashoffsetでSVGの線が描かれていく演出。グラフやロゴ、署名の登場アニメに使えます。
SVGモーフィング(形状変形) — pathのd属性の頂点を線形補間して形を滑らかに変える技術。ライブラリ無しでブロブやハートへ連続変形します。
グーフィルター(粘性融合) — feGaussianBlurとfeColorMatrixで要素同士が溶け合うメタボール表現。ローダーやメニュー展開の演出に最適です。
波形セパレーター — 速度の異なる波SVGを重ねて横スクロールさせ、セクションの境界を動的に区切ります。LPのヒーロー下端に好適。
円形プログレスゲージ — 円のstroke-dashoffsetで進捗を可視化し、中央の数値をカウントアップ。ダッシュボードやスキル表示に使えます。
アニメーションアイコン — ホバーやクリックで状態が切り替わるSVGアイコン集(メニュー/いいね/完了/通知)。マイクロインタラクションに。
グラデーションテキスト(流動) — linearGradientをSVGのanimateで横移動させ、見出しに流れる色とアウトライン描画を与えます。タイトルの主役に。
液体ディストーション — feTurbulenceとfeDisplacementMapでノイズ歪みを与え、有機的にうねる液体表現を作るSVGフィルター。背景演出に。

WebGL / Three.js (9)

回転3Dトーラスノット — Three.jsの標準マテリアルと三点照明で質感を出した回転オブジェクト。製品紹介やヒーローセクションの主役要素に使えます。
パーティクルフィールド — 数千の点をTHREE.Pointsで一括描画し、マウスで視点が緩やかに動く粒子空間。背景演出やランディングの没入感づくりに向きます。
ワイヤーフレーム地形 — 平面メッシュの頂点を正弦波で変位させて波打たせるレトロな立体地形。シンセウェーブ調のビジュアルやダッシュボード背景に最適です。
インタラクティブ立方体 — ポインタのドラッグで回転し、離すと慣性で滑らかに減速する6色立方体。製品の3Dプレビューや操作デモのUI部品として活用できます。
グラデーション球 — 頂点カラーで上下2色を補間し、継ぎ目のないグラデーションをまとった球体。ブランドカラーの象徴やヒーローのアクセントに使えます。
DNA二重らせん — らせん上に球を並べ横棒で対を結んだ回転する二重らせんモデル。科学・医療・バイオ系サイトのキービジュアルに向きます。
脈動する二十面体 — 頂点を法線方向に呼吸させたワイヤー二十面体を、加算合成の光の粒で包んだ幻想的な造形。テック系やAIプロダクトの象徴ビジュアルに最適です。
アニメーション・シェーダー背景 — フルスクリーンの板ポリにフラグメントシェーダーで描く、時間で流れるグラデと簡易ノイズの背景。マウスで色相が微妙に変化します。ヒーローや背景演出に最適です。
フレネル発光の球 — フレネル項で縁だけが光るシェーダーマテリアルの球が回転。内側は暗く縁が明るいリムライト風で、暗い背景に映えます。テック系の象徴ビジュアルに向きます。

カスタムカーソル (9)

追従カスタムカーソル — 即時追従のドットと遅延追従のリングを線形補間(lerp)で重ねた2層カーソル。サイトのブランド演出やインタラクティブなナビに使えます。
カーソルトレイル — canvasにマウスの軌跡を残光として描く虹色トレイル。ヒーローセクションやランディングページの遊び心ある背景演出に向いています。
マグネティックカーソル — 一定半径内でボタンをカーソル方向へ引き寄せ、ラベルに弾力を持たせる磁石風インタラクション。CTAボタンの注目度を高めます。
ブレンドモードカーソル — mix-blend-mode:difference でカーソル下の色を反転させる円。カラフルな作品集やポートフォリオの印象的なアクセントになります。
ホバー拡大カーソル — 要素ホバーで円が拡大し、data-labelの文字をカーソル内に表示。カードギャラリーやリンク集の操作ヒント提示に最適です。
スポットライトカーソル — CSSの radial-gradient マスクをカーソルで動かし、暗い画面の周辺だけを照らして隠れた層を見せる演出。謎解きや段階的開示の表現に使えます。
弾力ジェリーカーソル — 移動速度から伸び量と角度を計算し、進行方向へ伸縮する粘性カーソル。体積保存風のscaleで“びよん”とした有機的な動きを表現します。
フラッシュライト追従 — 暗いヒーローをカーソル追従の radial-gradient マスクで懐中電灯のように照らし、隠しテキストや画像を浮かび上がらせる演出。離れた周辺は闇に沈みます。謎解きや段階的開示の表現に使えます。
画像トレイル — マウス移動の軌跡に沿って画像が次々に出現し、短時間でフェード消滅する Codrops 定番のイメージトレイル。移動量が閾値を超えるたびに次の画像を循環表示します。ポートフォリオやヒーローの没入演出に最適です。

UIコンポーネント (15)

アコーディオン — 見出しのクリックで本文を滑らかに開閉するアコーディオン。max-heightアニメとaria属性で、FAQやヘルプの折りたたみ表示に使えます。
タブ切替（下線インジケーター付き） — 選択タブへ下線インジケーターがスライド移動するタブUI。offsetLeft/Widthでの位置計算により、商品情報や設定画面の切替に使えます。
モーダルダイアログ — ネイティブ<dialog>要素を使ったモーダル。フォーカストラップやESC閉じがブラウザ標準で動作し、確認や課金導線に使えます。
トースト通知 — 成功・警告など種類別の通知を右下にスタック表示し、残り時間バーとともに自動消滅。操作後のフィードバック表示に使えます。
ドラッグ並べ替え — HTML5 Drag and Dropでリスト項目の順序を入れ替え。挿入位置のヒント線付きで、タスクの優先順位付けや並び替えUIに使えます。
カルーセル / スライダー — 自動再生・矢印・ドット・スワイプに対応した軽量カルーセル。translateXによる横移動で、バナーや特集の回遊表示に使えます。
ツールチップ — 上下左右の方向別に出る吹き出し型ツールチップ。CSSの擬似要素とdata属性が中心で、補足説明や用語解説に使えます。
レンジスライダー（単一・価格帯） — 進捗グラデ付きの単一スライダーと、2ハンドルの価格帯スライダー。input[type=range]の装飾で、フィルターや絞り込みに使えます。
無限スクロール — IntersectionObserverで末尾到達を検知し追加読み込みするフィード。スピナーと上限制御付きで、タイムラインや一覧表示に使えます。
トグルスイッチ＆セグメント切替 — チェックボックスを土台にしたON/OFFスイッチと、インジケーターが動くピル型セグメント。設定画面や表示期間の切替に使えます。
ステップ進捗（ステッパー） — 完了・現在・未到達を色分けし前後に移動できるマルチステップUI。接続線とチェック表示で、購入手続きやオンボーディングに使えます。
ドラッグ探索ギャラリー — 画像タイルの帯をPointer Eventsで横にドラッグして探索するギャラリー。待機中はゆっくり自動で流れ、離すと慣性で滑り、端ではゆるく戻ります。作品集や横長の回遊コンテンツに使えます。
コマンドパレット（⌘K / Ctrl+K） — ⌘K/Ctrl+Kで開く検索ボックス付きモーダル。入力でフィルタ、↑↓で候補移動、Enterで実行、Escで閉じます。アプリの素早い操作導線に使えます。
スワイプカード（Tinder風） — 重なったカードをPointer Eventsでドラッグし、左右に振り切ると回転しながら飛んで消え次が前面に。しきい値未満は元に戻ります。マッチングや選別UIに使えます。
:has()で純CSS連動 — JS無しで:has()を使い、ラジオ選択でカードがハイライト＆詳細パネルが開き、同意チェックでボタンが活性風に変化。状態連動UIをCSSだけで実現します。

フォーム & 入力 (10)

フローティングラベル — 入力時にラベルが上へ縮小移動する定番のフォームUI。:placeholder-shown とトランジションだけで実現し、ログインや登録画面に使えます。
リアルタイムバリデーション — 入力のたびに正規表現で氏名・メール・電話を即時検証し、枠色とメッセージで結果を表示。全項目が有効になると送信ボタンが解放されます。
パスワード強度メーター — 文字数・大小文字・数字・記号の条件を判定し、4段階のバーと色で強度を可視化。表示切替や条件チェックリスト付きで会員登録に最適です。
OTP（ワンタイムコード）入力 — 6桁の認証コードを1桁ずつ入力するUI。自動フォーカス移動・ペースト分配・Backspace戻り・照合とシェイク演出を備えた二段階認証向けです。
カスタムチェック / ラジオ — :has() を活用してチェックボックス・カードラジオ・トグルスイッチをCSSだけで装飾。アクセシブルな見た目のリッチな選択UIを構築できます。
ファイルドロップゾーン — ドラッグ＆ドロップとクリックでファイルを追加し、画像はサムネイル・他は拡張子バッジで一覧表示。個別削除やサイズ整形を備えたアップロードUIです。
オートコンプリート — 入力に応じて候補を絞り込み一致部分をハイライト表示。矢印キー・Enter・Escのキーボード操作に対応したアクセシブルなコンボボックスです。
吹き出し付きレンジスライダー — つまみの位置に金額の吹き出しが追従するレンジ入力。CSSカスタムプロパティで塗りと吹き出し位置を連動させ、価格や予算選択に使えます。
タグ入力フィールド — Enterやカンマでタグを追加し、Backspaceや×で削除できる複数入力UI。重複防止とチップ生成のアニメーション付きで、スキルやキーワード入力に便利です。
マルチステップ・ウィザード — アカウント→プロフィール→確認の3ステップに分けた入力フォーム。上部の進捗インジケータと次へ/戻るボタンでスライド遷移し、最後に入力内容をまとめて確認できます。

ローダー & スケルトン (9)

スケルトンスクリーン — 読み込み中はプレースホルダを表示し、データ取得後に実コンテンツへフェードで差し替えるカードUI。商品リストやプロフィールの体感速度向上に使えます。
各種スピナー集 — リング・デュアル・オービット・バー・パルス・キューブの6種を純CSSで実装したスピナー詰め合わせ。用途に合うローディング表現をすぐ選べます。
プログレスバー — 不規則に進む疑似アップロードをパーセントとMB表示で見せる進捗バー。グラデーションが流れ完了状態も色で表現します。fetch進捗の可視化に最適。
シマー効果 — 光沢グラデーションが左から右へ流れるプレースホルダのリスト。行ごとに位相をずらし波打たせた、ライトテーマのローディング表現です。
ドットローダー集 — バウンド・チャット入力中・波の3パターンのドットアニメーションを純CSSで実装。軽量で省スペースな待機表現として汎用的に使えます。
円形カウントダウン — SVGリングのstroke-dashoffsetを操作し残り秒を可視化する円形タイマー。完了でリングと数字が赤に変化します。リダイレクトや自動遷移の予告に。
無限ループローダー — SVGの∞パス上をグラデーションの発光線がstroke-dashで滑らかに周回するローダー。ブランド感のある待機演出として印象的に使えます。
円形パーセントローダー — conic-gradientとrequestAnimationFrameでなめらかにカウントアップする円形プログレス。イージングと完了時のグロー演出付き。初回ローディング画面に。
オープニング演出（イントロ→本編表示） — 全画面のイントロ画面でブランド名とプログレスバーがカウントアップし、完了するとワイプ（clip-path）で本編コンテンツが現れる遷移演出。読み込みから本編へのつなぎを印象的に見せられます。「もう一度」ボタンでリプレイ可能。

データ可視化 (8)

Canvas棒グラフ — Canvas 2D APIで描く棒グラフ。高DPI対応・出現アニメ・ホバーで値ラベルを表示し、ダッシュボードの数値比較に使えます。
SVG折れ線グラフ — Catmull-Rom補間で滑らかにしたSVG折れ線と面グラデ。stroke-dashによる描画アニメで時系列データの推移を魅せます。
conic円グラフ — CSS conic-gradientだけで作るドーナツ円グラフ。回転マスクで出現させ、割合の内訳表示に最適です。
アニメ円形ゲージ — SVG円弧のstroke-dashoffsetと数値カウントアップを連動させた円形ゲージ。スコアやパフォーマンス指標の表示に使えます。
スパークライン — data属性の値からSVGの極小グラフを生成。前回比バッジ付きで、KPIカードやダッシュボードの省スペース指標に向きます。
リアルタイム波形 — Canvasで合成正弦波を毎フレーム描画するオシロスコープ風モニタ。グロー発光と一時停止操作で、信号やストリーミングデータの可視化に。
ヒートマップカレンダー — CSS Gridで組む貢献度カレンダー。日別の活動量を5段階の色で示し、コントリビューショングラフ風の活動量可視化に使えます。
レーダーチャート — SVGポリゴンで描く多角形レーダーチャート。2系列を重ねて中心から広がるアニメで表示し、スキルや評価の多軸比較に向きます。

画像エフェクト (12)

clip-path ホバーリビール — clip-path の circle() をマウス位置から広げ、下の画像を円形に切り抜いて見せるホバー演出。商品やビフォーアフターの差分提示に使えます。
デュオトーン (mix-blend-mode) — モノクロ画像に2色のレイヤーを mix-blend-mode で重ね、雑誌風の2色グラフィックを生成。配色プリセットをワンクリックで切り替えられます。
Ken Burns スライドショー — 静止画をゆっくりズーム&パンしながらクロスフェードさせる映画的スライドショー。ヒーローバナーや背景演出に最適です。
before/after 比較スライダー — 透明な range と clip-path で2枚の画像を境界線で切り替えるビフォーアフター比較。加工前後やリフォーム事例の紹介に。
mix-blend-mode テキスト — difference ブレンドで背景色を反転して切り抜く大型タイポ。マウス追従の光スポットで色が躍動します。LP のキービジュアルに。
ホバーでカラー化ギャラリー — grayscale フィルターで全画像をモノクロ表示し、ホバー中の1枚だけをカラー&拡大。CSSのみで動くフォトギャラリーに使えます。
RGBずらしグリッチ — 同一画像を3枚重ねてチャンネルごとに着色・ずらし、走査線を被せたグリッチ風ホバーエフェクト。サイバー/音楽系サイトのアクセントに。
スポットライトマスク — radial-gradient のマスクで暗転した画像をマウス位置だけ明るく照らすスポットライト演出。インタラクティブな探索体験を演出できます。
CRT・VHSレトロ画面 — 画像にスキャンライン・色収差（RGBずれ）・微振動・ノイズを重ね、ブラウン管/ビデオ風のレトロ画面に変換します。走査グローやVHS風OSD（REC表示）も入り、エモい・サイバーパンク系のヒーローや作品アーカイブの演出に最適。canvasノイズは取得失敗時もCSSグラデにフォールバックします。
ハーフトーン網点 — 画像を canvas で解析し、各セルの明度をドット径に変換した印刷風ハーフトーン網点を描画。斜めに進む波でドット径が脈打ち、マウス近傍では網点が膨らんで反応します。雑誌/レコードジャケット風のグラフィックや没入系ビジュアルに。CORS失敗時は放射状グラデの網点へフォールバック。
ホバー・ディストーション — 画像にマウスを乗せると、その位置を中心に sin 波の歪み（ディストーション）が走る canvas エフェクト。ピクセル変位で水面や陽炎のような揺らぎを表現し、フォトギャラリーやヒーローに没入感を与えます。
RGBずれグリッチ — ホバー/マウス移動で R・G・B チャンネルが左右にずれるアナグリフ風グリッチ。mix-blend-mode:screen で重ねた3レイヤーをマウス速度に応じて分離し、サイバー/音楽系のアクセントに最適です。

Python (Pyodideブラウザ実行) (6)

Pyodide 対話型 REPL — Pyodideでブラウザ内にPythonランタイムを読み込み、入力した式や文をその場で評価・表示する対話シェル。print出力やエラー、入力履歴(↑↓)にも対応。
Pythonで計算しcanvas描画 (リサージュ曲線) — Python(math)でリサージュ曲線の座標列を計算し、canvasへネオン風にアニメーション描画。スライダーで周波数と位相をリアルタイム操作できる。
Pythonフラクタル生成 (マンデルブロ集合) — Pythonでピクセルごとにマンデルブロ集合を計算し、ImageDataとしてcanvasに着色描画。ボタンで見どころへズーム巡回でき、重い数値計算のブラウザ実行例になる。
Pythonデータ集計ダッシュボード — Python標準のstatisticsでランダム売上データを集計し、合計・平均・中央値・標準偏差をカード表示しつつバーチャート化。データ分析UIの雛形に使える。
Python数式リアルタイム評価グラフ — 入力した数式をPython側で許可関数に限定して安全評価し、f(x)の曲線をcanvasに即時描画。マウス追従でx・f(x)を読み取れる関数プロッタ。
Python素数の篩ビジュアライザ — Pythonでエラトステネスの篩を計算し、1〜150の格子上で素数を順次点灯アニメーション。アルゴリズム学習用の可視化デモ。

ページ遷移 / View Transitions (7)

View Transitions API 一覧⇔詳細 — ネイティブの View Transitions API で一覧と詳細の切替を自動モーフ。共有サムネに view-transition-name を割り当て、SPA風の滑らかな画面遷移を実現します。
FLIPアニメ並べ替え — FLIP（First-Last-Invert-Play）技法で並べ替え時の位置差分だけをGPUアニメ。シャッフル・ソート・カードクリックで滑らかにリオーダーするリスト遷移です。
カーテン遷移スライダー — 上下のパネルが中央で閉じ切る瞬間に裏でコンテンツを差し替えるカーテン演出。シーン切替やページ遷移のつなぎに使える劇的なトランジションです。
モーフィングナビ — ハンバーガーアイコンが×へモーフし、角の円が全面へ広がるメニュー遷移。clip-path とSVGの変形で、ヘッダーの開閉インタラクションを上質に演出します。
タブ下線スライド遷移 — アクティブタブの実寸を計測し、下線インジケーターを transform で滑走させるタブ切替。内容のフェードと同期し、文字数が違っても正確に追従します。
クリップパス画像リビール — 前面に次の画像を載せ clip-path の斜めワイプで切替えるギャラリー遷移。完了後に背面へ確定する二層構成で、無段差にスライドし続けます。
3Dカードフリップ遷移 — CSS 3D Transforms の preserve-3d と backface-visibility で表裏をY軸回転。クリックやキー操作でめくれるプロフィールカードの立体トランジションです。