Kodza

Kodza

AI が取得できる UI コンポーネントです。プレーンな HTML、CSS、JavaScript で、フレームワークもビルド工程も依存関係もありません。

kodza.dev · カタログ · ドキュメント · コンポーネントをリクエスト

依頼するだけ

Kodza は MCP サーバーでもあり、https://kodza.dev/api/mcp（Streamable HTTP）で利用できます。無料で、アカウントも API キーも不要です。AI に一度設定するだけです。

claude mcp add -t http kodza https://kodza.dev/api/mcp

あとは自分の言葉で、「ヒーローに Kodza の塗りつぶしボタンを追加して」と頼むだけです。AI は推測するのではなく、このリポジトリ内の正確なファイルと、その配置場所を取得します。

エディターで使う

Codex

codex mcp add kodza --url https://kodza.dev/api/mcp

VS Code（GitHub Copilot）

code --add-mcp '{"name":"kodza","type":"http","url":"https://kodza.dev/api/mcp"}'

Cursor（~/.cursor/mcp.json）

{ "mcpServers": { "kodza": { "url": "https://kodza.dev/api/mcp" } } }

マシン上で動かしたい場合は、npx -y kodza-mcp で同じサーバーをローカルで実行できます（kodza-mcp）。その他の設定はドキュメントをご覧ください。

できること

ツール	できること
search_components	機能や見た目（「ボタン 塗りつぶし ホバー」「固定ヘッダー」「日付ピッカー」など）からコンポーネントを検索したり、カテゴリを一覧表示したりします。
get_component	1 つのコンポーネントについて、正確な HTML、CSS、JS（またはダウンロード用コマンド）、設定（--kz-… 変数、修飾クラス、data- 属性）、各キーの役割、ダークモード用の値、プレーンなページ、WordPress、Shopify、React、Claude artifact への組み込み方を取得します。

読み取り専用です。コードを渡すだけで、プロジェクトには一切変更を加えません。取得されたコンポーネントと、それを取得したアシスタントを集計します。入力した内容は保存しません。

ファイルを使う

components/ 内の各フォルダーには、1 つのコンポーネントの HTML、CSS、必要に応じて JS が入っています。CSS を読み込み、HTML を貼り付け、JS を読み込むだけです。単なるコードなので、素の HTML ページ、WordPress、Shopify、React で使えます。

明日にでも公開できる品質で作られています。実際にそうなる可能性も高いでしょう。

• CSS が作用するのは kodza- クラスだけです。生成されたテーマガードにより、サイトの CSS がコンポーネントに影響するのを防ぎます。
• 設定には CSS 変数（--kz-…）を使い、バリエーションには修飾クラスまたは data- 属性を使います。
• 1 ページにいくつでも配置でき、すべてのコンポーネントで JS は 1 コピーだけで済みます。
• すべてのコンポーネントで、キーボード操作、視認できるフォーカス、prefers-reduced-motion に対応しています。
• AJAX テーマ、Swup、React など、後から読み込まれるコンテンツ向けに kodza:init と kodza:destroy を用意しています。

コンポーネント

コンポーネントは 115 種類あり、増え続けています。それぞれの名前からフォルダーを開け、デモは kodza.dev で動作します。

ボタン

コンポーネント	機能
3D Press Button	しっかりとした厚みのあるボタンです。表面が土台に沈み込み、素早くタップしても最後まで押し込まれ、小さく弾んで戻ります。キーキャップのようなもの、ブルータリズム建築風の板、押した状態を保つトグルなどに使えます。	デモ
Arrow Button	ホバーすると矢印が描かれ、ラベルを横に押しのけます。カーソルを離すと、矢印はボタンの中を通り抜けます。	デモ
Call Button	丸い電話アイコンが、小さなリング付きの「通話を予約」ボタンに展開します。タッチスクリーンでは展開した状態を保ちます。CSS のみで実装されています。	デモ
Copy to Clipboard	コマンドや AI に送る文章にコピー用ボタンを付けられます。アイコンは自ら描かれるチェックマークに変わり、ラベルはスクロールして「コピー済み」になります。	デモ
Fill Button	カーソルが入った正確な位置から塗りつぶされ、カーソルが出た位置に向かって空になります。ラベルがスクロールし、矢印がループします。	デモ
Hold to Confirm	取り消せない操作に適しています。押し続けるとインクのようなピルがボタンを満たし、途中で離すと元に戻り、最後まで押すとチェックマークが付きます。マウス、指、Space、Enter に対応しています。	デモ
Loading Button	処理状況を表示するボタンです。リングが現れる間にラベルが「デプロイ」から「デプロイ中」へスクロールし、リングが閉じるとチェックマークが付き、「デプロイ完了」になります。幅は変わりません。	デモ
Magnetic Button	ポインターが近づくとボタンがそちらへ傾き、文字はさらに少し動いて、ゆっくりと元に戻ります。クリック可能な領域もボタンに合わせて動きます。タッチスクリーンでは穏やかに動作します。	デモ
Morph Button	ホバーするとピル型のボタンが円形に縮まり、ラベルが矢印に置き換わります。クリック可能な領域は動きません。CSS のみで実装されています。	デモ
Roll Button	ホバーするとラベルが一文字ずつ上へスクロールし、カーソルを離すと同じようにスクロールし続けるボタンです。通常の CSS と数行の JS で実装できます。	デモ
Share Button	「共有」を押すと、オプションが背後からスライドして現れ、最後のオプションがピル型のボタンを押し広げます。その間に矢印が飛び出し、×印が描かれます。「リンクをコピー」はチェックマークに変わり、X と LinkedIn は小さなウィンドウで開きます。	デモ
Split Button	左側にメインの操作があり、その他のオプションは矢印の背後にあります。片側からもう片側へ色合いがスライドします。別の方法を選ぶとラベルが切り替わり、ボタンの幅も滑らかに変化します。	デモ

リンク

コンポーネント	機能
Arrow Link	進む方向を示すリンクです。通常時は山形、ホバー時は軸が描かれて矢印の先端が先へ進み、› が → に変わります。逆方向を示すバリアントもあります。純粋な CSS で実装されています。	デモ
External Link	サイト外へ移動するリンクであることを示します。文字の下に引かれた線が ↗ まで伸び、矢印が角に向かって弾むように飛び出し、その後を軸が伸びていきます。純粋な CSS で実装されています。	デモ
Highlight Link	ハイライトの線がリンクの文字の背後をなぞるか、文字の真下で単色のブロックが反転し、文字が白くなります。	デモ
Link Preview	リンクにカーソルを合わせると、移動先のカードがその上に展開されます。段落ごとにカードは 1 枚で、リンクからリンクへ滑らかに移動し、画像はクロスフェードし、文字は流れるように切り替わります。	デモ
Scramble Link	リンクにカーソルを合わせると単語がスクランブルし、左から右へ落ち着いていきます。記号が解読されるもの、文字自体がシャッフルされるもの、またはフリップ式表示のものがあります。	デモ
Underline Link	下線が左から入り、右へ抜ける、またはその逆に動きます。ペンのように、改行をまたいでテキストに沿って動きます。	デモ

フォーム

コンポーネント	機能
チェックボックス	本物のチェックボックスを描き直しました。インクが中心から広がり、チェックマークが自ら描かれます。一部だけが選択されている場合、すべて選択するチェックボックスにはダッシュが表示されます。カードにも対応しています。	デモ
カラーピッカー	使いやすいパネルを備えた本物のカラー入力です。彩度スクエア、色相スライダー、16 進数フィールド、プリセット、スポイト、コピー機能を備えています。プリセットを選ぶと、ハンドルが滑らかに移動します。	デモ
日付ピッカー	カレンダー付きの本物の日付入力です。月は移動した方向にスライドし、月名は切り替わり、選んだ日付へインクのマークが移動します。キーボード操作にも完全対応しています。	デモ
ファイルアップロード	本物のファイル入力にドロップゾーンを重ねています。ファイルをドラッグすると枠線が動き、各ファイルはサムネイルと進捗表示付きの行になり、大きすぎるファイルにはその旨が表示されます。	デモ
複数選択	タグ形式のフィールドで複数項目を選択できます。入力して絞り込み、選択してタグを追加します。削除したタグは縮んで消え、ほかのタグは滑らかに移動して空いた場所に収まります。	デモ
OTP 入力	ワンタイムコード用のフィールドです。1 つの本物の入力欄をセルとして描画します。数字が所定の位置に浮かび上がり、貼り付けや SMS の自動入力もそのまま使えます。入力が完了するとセルがインク色に変わります。	デモ
パスワード	目のアイコンに取り消し線が引かれるパスワードフィールドです。強度が上がるとメーターが伸び、判定が切り替わり、ルールにチェックが入ります。	デモ
ラジオボタン	グループ全体で 1 つのドットを使う本物のラジオボタンです。別の選択肢を選ぶと、インクのしずくのように伸びながらドットが移動します。	デモ
範囲スライダー	描画されたトラック上に、本物の範囲入力を配置しています。ハンドルから値のバブルが飛び出し、塗りつぶしが進むと目盛りが濃くなります。2 つのハンドルは交差せず、互いを押し合います。	デモ
検索オートコンプリート	本物の datalist を使った検索フィールドです。入力候補はグループ化されて展開し、入力した文字には下線が引かれます。「/」でフォーカスし、矢印キーと Enter キーで操作できます。	デモ
セレクト	装飾を施した本物のセレクトです。リストはフィールドから展開し、ハイライトは選択肢間をスライドして、値は選択した項目に切り替わります。ツールバー向けのピル型もあります。	デモ
星評価	星として描画された本物のラジオボタンです。ポインターの下で星が 1 つずつ点灯し、ラベルは「まあまあ」から「出荷済み」まで切り替わります。静的な評価は表示時に塗りつぶされます。	デモ
スイッチ	スイッチとして描き直した本物のチェックボックスです。インクがつまみの後ろのトラックを塗りつぶし、押している間につまみが伸びて、所定の位置に弾むように戻ります。ラベルやツールバーにも対応しています。	デモ
テキストフィールド	入力するとラベルが折りたたまれるテキストフィールドです。ボタンで内容を消去でき、有効な値を入力するとチェックマークが描かれ、ヒントはエラーメッセージに切り替わります。	デモ
テキストエリア	ラベルが折りたたまれ、テキストに合わせて高さが滑らかに変わるテキストエリアです。上限に近づくとリングが塗りつぶされ、残り 5 分の 1 の範囲では残り文字数が表示されます。	デモ

ナビゲーション

コンポーネント	機能
パンくずリスト	1行に収まらない場合、中央部分を「…」ボタンの後ろに折りたたみ、パンくずを1つずつ展開するパンくずリストです。	デモ
コマンドパレット	実際のダイアログ内に表示される⌘Kパレットです。入力に合わせて結果が絞り込まれ、一致した文字に下線が付き、ハイライトがその間を滑るように移動します。	デモ
コンテキストメニュー	クリックした正確な位置から開き、画面内に収まり、Shift + F10でキーボードからも操作できる右クリックメニューです。	デモ
ドロップダウンメニュー	ボタンから展開するメニューで、ハイライトが項目から項目へ滑るように移動します。アクションや選択肢に対応し、矢印キーと先頭文字で操作できます。	デモ
ホバーナビゲーション	リンクがピル状に並び、ポインターの下でハイライトが滑るように移動し、現在のページに戻って落ち着きます。インク版では、文字の端で文字色が白に変わります。	デモ
ページネーション	7つのスロットが常に同じ位置に保たれます。インクのピルがページへ滑るように移動し、変わる数字が所定の位置まで転がります。コンパクト版も含まれています。	デモ
スクロールヘッダー	ページ上部を空けるフローティングのガラスピルです。スクロールすると曇りガラスになり、読んでいる間は脇へ移動し、暗いセクションではダークガラスに変わります。	デモ
サイドバーメニュー	ページ上にスライドして現れるサイドパネルで、大きなリンクが1つずつせり上がります。実際のダイアログとして、フォーカスを内部に保ち、Escapeで閉じられます。GSAPは不要です。	デモ
スタッガー式水平メニュー	リンクを近いものから1つずつ表示し、逆順に呼び戻すボタンです。ラベルは「Close」へと切り替わります。GSAPは不要です。	デモ
ステッパー	4つのステップで進むフローです。線が伸び、完了した各ステップにチェックマークが描かれ、コンテンツは次に進む方向からスライドして表示されます。	デモ
目次	見出しから作られるサマリーカードです。インクのマーカーが読んでいるセクションに追従し、リングが埋まり、残り時間がカウントダウンします。スマートフォンではバーになります。	デモ
タブ	選択したタブへスライドするピル（または線）、横から現れるパネル、完全なキーボード操作パターンを備えたタブです。	デモ
トラップドアメニュー	Menuを押すと、ページがトラップドアのようにヒンジを軸に下へ開き、その下にあるメニューが現れます。縁が通るとリンクがせり上がり、画像がポインターに追従します。閉じると逆再生されます。GSAPは不要です。	デモ

オーバーレイ

コンポーネント	機能
Cookie Consent	誠実な Cookie 同意カードです。「拒否」は「同意」と同じくらい目立ち、「選択」を開くとカテゴリーが表示されます。選択内容は保存され、リンクからカードを再表示できます。	デモ
Dialog	開いたボタンから広がり、閉じるとボタンに戻る本格的なダイアログです。アラート版では、何かを削除する前に名前の入力を求めます。	デモ
Popover	トリガーから広がり、矢印がトリガーを指すパネルです。スペースがない場合は表示位置が反転します。クリックで開くほか、ホバーカードとしてホバーで開き、その場にとどまります。	デモ
Product Tour	ガイド付きツアーです。ページが暗くなり、スポットライトが各要素を切り抜いて次へ滑らかに移動します。移動に合わせて形を変え、カードも追従します。キーボードにも対応しています。	デモ
Sheet	右からスライドして現れるパネルです。スマートフォンでは下からせり上がり、ドラッグできるシートになります。途中と全開の位置があり、はじくと閉じます。	デモ
Toast	デッキのように積み重なり、ホバーすると広がる通知です。細いラインで残り時間を表示し、スワイプで閉じられます。読み込み中のトーストは成功表示に切り替わります。	デモ
Tooltip	グループごとに吹き出しを1つ表示します。最初のホバーでは待機し、その後はボタンからボタンへ滑らかに移動し、文言に合わせてサイズが変わります。キーボードショートカットも表示します。	デモ

フィードバックと読み込み

コンポーネント	機能
Alert	ページ内に表示するメッセージです。通知、成功、警告、エラーを色ではなくアイコンで区別します。アイコンはアニメーションで描画され、閉じたアラートは折りたたまれ、エラーではログが展開されます。	デモ
Empty State	リストが空のときに表示する内容です。近づくと反応する CSS のイラスト、人間らしい語り口のメッセージ、次のステップを示します。検索結果がない場合の別パターンもあります。	デモ
Progress	data-value によって制御されるバーまたはリングです。パーセンテージは走行距離計のように回転し、処理中はセグメントがスライドし、100 になるとチェックマークが描画されます。	デモ
Skeleton	コンテンツ自体から描画される骨格に、全体を横切る光沢を加えます。読み込み時には柔らかな境界が下へ走り、各骨格が行に変わります。後から読み込まれる画像には光沢が残ります。	デモ
Spinner	テキストに合わせたサイズで読み込み状態を表示します。呼吸するリング、12 本のバー、3 つのドット、または点字セルのようなターミナル表示から選べます。.is-done を追加すると、文字が切り替わる間にチェックマークが描画されます。	デモ
Top Loading Bar	ページの読み込み中に画面上部に表示される細いラインです。小刻みに進み、最後まで到達すると右へ消えていきます。サイト内のリンクを使うと自動で開始します。	デモ

データ表示

コンポーネント	機能
アコーディオン	ネイティブの を使った、回答を開く質問です。パネルは実際の高さまで開き、回答がせり上がり、プラス記号がマイナス記号に変わります。必要に応じて、一度に開く項目を1つにできます。	デモ
アバター	イニシャルまたは画像を4種類のサイズで表示し、形状（塗りつぶし、リング、バー、フェード）でステータスを示します。近づくと広がるグループでは、ポインターを合わせた顔の名前が表示されます。	デモ
バッジ	ソフト、塗りつぶし、ライブ、モノクロの小さなラベルと、ロールするカウントです。タグを削除すると縮んで消え、隣のタグが新しい位置へ滑らかに移動します。複数行にまたがる場合も同様です。	デモ
コードブロック	読み取りとコピーができるコードです。ファイル名、行番号、ハイライト行、ライトとウェイトのモノクロ構文表示に対応しています。コピーすると「コピー済み」に切り替わり、ターミナルではコマンドだけがコピーされます。	デモ
カウントダウン	日付までのリアルタイムカウントダウンです。変化する数字は表示窓から落ち、次の数字が入ってきます。ゼロになると数字がよけて、メッセージが表示されます。大きく表示することも、インラインで表示することもできます。	デモ
カウンター	画面に入ると、走行距離計のように数字が回転して所定の位置に収まります。右側の数字ほど多く回転し、最後に止まります。ゼロは一周します。スクリプトがなくても読み取れます。	デモ
フィルター切り替え	フィルター可能なグリッドです。インク色のピルがフィルターへ滑り、対象外のカードは後ろに下がり、ほかのカードは新しい位置へ滑らかに移動し、新しいカードが順に表示されます。	デモ
Kbd	少し立体感のあるキーボードのキーを、単体、組み合わせ、ショートカット一覧で表示します。実際にキーを入力すると、押したキーが沈みます。組み合わせ全体を押すと、その行が点灯します。	デモ
区切り線	画面に入ると中央から描画される線です。通常の線、ラベルやセクションタイトル付きの線、CSS のドットを囲む線、項目間の垂直線があります。	デモ
もっと見る	要求されるまで長いコンテンツを短く表示します。柔らかなフェードでテキストを切り詰めるか、残りの項目数を示すリストを表示します。実際の高さまで開き、ボタンの文言が切り替わります。	デモ
統計カード	主要な数値、その変化、背後の曲線を表示します。数値は回転し、曲線は描画され、ガイドがポインターに追従してその日の値を示します。矢印で傾向を表します。	デモ
テーブル	列をクリックすると並べ替えられるデータテーブルです。行は新しい位置へ滑らかに移動し、並べ替えられた列には淡い帯が付きます。ヘッダーは上部に固定され、スクロール中は端がフェードします。	デモ
タイムライン	スクロールに合わせて塗りつぶされるレールに沿って、日付付きのステップを表示します。インクが各ドットに届くと塗りつぶされ、各ステップは初めて表示されたときに所定の位置へせり上がります。最後に到達したステップにはマークが残ります。	デモ

カード

コンポーネント	機能
ボーダートレースカード	ホバーすると、ポインターが入った正確な位置からカードの枠線に沿って一本の線が描かれます。一方向、両方向、または四隅だけを描けます。	デモ
カード	全体をひとつのリンクでクリックできるエディトリアルカードです。画像が近づき、枠線がくっきりし、矢印がスライドして現れます。	デモ
展開カード	常にひとつが開いた状態になるカードの列です。別のカードをクリックすると、そのカードが広がり、ほかのカードは後ろに下がります。小さな画面では縦に積み重なります。	デモ
料金プラン	3つのプランをひとつのブロックにまとめ、注目プランを色付けして浮かび上がらせます。年払いに切り替えると、変わる数字だけが回転して新しい値になります。	デモ
スティッキーカード	スクロールするとカードが積み重なり、覆われたカードはそれぞれ後ろに下がって暗くなります。通常の position: sticky と数行の JS だけで実現しています。GSAP は不要です。	デモ

メディア

コンポーネント	機能
ビフォー／アフター	ひとつのフレームに2枚の画像とその間のハンドルを表示します。ドラッグしたり、クリックしてスライドさせたり、矢印キーで操作したりできます。初めて表示されたときに一度だけ少し動き、ラベルは脇に移動します。	デモ
カルーセル	スクリプトの読み込み前から動作する、ネイティブなスクロールスナップカルーセルです。読み込み後は、ページボタン、回転するカウンター、プログレスバーまたはドット、投げるように操作できるマウスドラッグが使えます。スクロール操作を妨げません。	デモ
フルスクリーンスライダー	カーテンのような動きで切り替わり、タイトルがマスクから浮かび上がる、画面いっぱいのスライドです。横向きまたは縦向きに対応し、ボタン、矢印キー、スワイプで操作できます。GSAP は不要です。	デモ
画像ギャラリー	エディトリアルな画像グリッドです。各画像がひと続きの動きでフルスクリーンビューアーに広がり、画像間はカーテンのように切り替わります。キーボードとスワイプにも対応しています。	デモ
ライトボックス	記事を囲むと、記事内の画像がすべて大きく開きます。画像は元の位置から画面いっぱいに広がり、矢印またはスワイプで次の画像へ進み、Escape キーで元の位置に戻ります。	デモ
ズームレンズ	ポインターの下を拡大して表示します。少し遅れて追従する円形レンズで高解像度ファイルの細部を表示するか、画像そのものをポインターに向かって拡大します。	デモ

テキストエフェクト

コンポーネント	機能
Annotated Text	段落が表示されると、重要な単語に手描き風の線が描かれます。下線、取り消し線、丸囲み、マーカーから選べます。	デモ
Eye Glyph	穴のある文字が目に変わります。瞳はポインターを追い、まつげが上に伸び、まばたきすると本物のまぶたが閉じます。つつくとウインクします。	デモ
Marquee	途切れずに流れ続けるテロップです。ポインターの下で滑らかに停止し、両端でフェードします。どちらの方向にも動かせます。	デモ
Scroll Text Reveal	段落がスクロールして通り過ぎると、単語が一つずつ明るくなり、戻ると再び暗くなります。フェード、ぼかし、浮き上がりから選べます。GSAP は不要です。	デモ
Shimmer Text	忙しいインターフェースが「まだ処理中です」と伝えるように、光の帯がテキスト上を横切ります。ループ、ホバー時、またはポインターに追従する動きが選べます。	デモ
Text Reveal	画面に入ると文字が書き込まれるように現れます。マスクからせり上がる行、焦点が合う単語、または文字から選べます。一度だけ再生します。	デモ
Typewriter	人間らしいリズムと自然なカーソルでフレーズを入力します。変更箇所だけを入力し直すか、エディターのように選択してから上書き入力します。	デモ
Word Rotator	文中の単語が次々に変わります。古い単語が消えると同時に次の単語の文字がせり上がるか、単語が裏返ります。単語に合わせてスペースが変わり、文全体も動きます。	デモ

画像エフェクト

コンポーネント	機能
Hover List Preview	行にポインターを合わせると、ポインターに追従する1つのフレームに画像が表示されます。リストを下に進むと、次の画像へ切り替わります。パネルモード、キーボード操作、タッチ対応のサムネイルも含まれます。	デモ
Image Hover	画像が独自のフレーム内でポインターに反応する4つの方法です。ゆっくりズームする、焦点が合う、角が丸くなる、またはカーソルに合わせて動く効果があります。	デモ
Image Reveal	画面に入ると姿を現す画像です。カーテンが下から、横から、またはアイリスのように開き、画像はわずかなズームから落ち着きます。	デモ

背景とテクスチャ

コンポーネント	機能
Grain	インライン SVG のノイズ1つで作るフィルムグレインです。フィルムの次のコマのように毎秒10回変化し、セクションのテキストの下や写真の上に表示されます。粒子には2色を指定できます。ダウンロードは不要です。	デモ
Interactive Dots	細かなドットのフィールドを背景にしたヒーローです。ポインターが砂に手を入れたようにドットを押しのけ、ドットは元に戻ります。クリックすると波が広がります。キャンバスは1つだけで、誰も見ていないときは休止します。	デモ
Pattern Background	独自のパターンで縁取られたヒーローです。グリッドはコンテンツに合わせて配置され、4本の細線が端に沿って走り、四隅にはトンボが付きます。それ以外の部分はフェードアウトします。グリッド、ドット、十字、斜線から選べます。画像は不要です。	デモ

スクロール

コンポーネント	説明
トップへ戻る	画面を少し下にスクロールすると丸いボタンが表示され、読み進めるにつれてリングが塗りつぶされます。ホバーするとラベルが展開し、クリックすると矢印が飛び立ちます。	デモ
横スクロール	下にスクロールするとセクションが固定され、カードが横にスライドします。画像はフレーム内でゆっくり動き、カウンターが切り替わります。タッチ操作ではスワイプできます。	デモ
無限スクロール	投稿と同じサイズのプレースホルダーが光りながら現れ、画面が跳ねることなく投稿に切り替わります。自動で2回読み込んだ後はボタンが表示されるため、フッターまで移動できます。	デモ
スクロール表示	ブロックがスクロールに合わせて登場します。フェード、マスクから浮かび上がるライン、または clip-path で現れる画像から選べます。同時に表示されるブロックは順番に登場します。	デモ
固定スクロール表示	ブロックが固定され、スクロールに合わせて大きなメッセージが順番に登場します。各行はそれぞれのマスクから消え、次の行が浮かび上がります。	デモ
固定ステップ	片側に画像を固定し、もう片側にステップをスクロール表示します。各ステップでカーテンのように前の画像の上から次の画像が描画され、カウンターも切り替わります。	デモ

カーソル

コンポーネント	説明
カスタムカーソル	エリア内ではポインターが柔らかな遅れのあるドットに変わり、各項目の上にはクリック時の動作を示すピルが表示されます。GSAP は不要です。	デモ

プリローダーとトランジション

コンポーネント	説明
ランディング表示	ヒーローに必要なファイルをカウントしながら、画像が積み重なるプリローダーです。100 になると最後にヒーロー画像が現れて所定の位置まで拡大し、その後タイトルが浮かび上がります。クリックまたは任意のキーでスキップできます。GSAP は不要です。	デモ
ページリフト	実際の2つのページ間で、離れるページが後退し、次のページが丸みを帯びた端からその上に現れます。ヘッダーはそのまま表示され、戻る操作では逆再生されます。Chrome、Edge、Safari に対応しています。Firefox では現在、通常どおり読み込まれます。GSAP は不要です。	デモ

ヒーロー

コンポーネント	内容
Hero Centered	お知らせのピル、マスクからせり上がる見出し、1文の説明、2つのピルボタンを備えた中央揃えのヒーローです。CSS のみで実装されており、表示時にアニメーションが再生されます。	デモ
Hero Cover	カバー型のヒーローです。モノクロのベールを重ねた全幅画像の左下にタイトルを配置します。画像は上端から開いて落ち着き、タイトルの行はせり上がります。CSS のみで実装されています。	デモ
Hero Exit	大きな2行のタイトルを中央に配置します。スクロールすると画面が固定され、行が左右に分かれ、その間に画像が開いてカード状に縮まり、次のセクションがその上をスライドします。	デモ
Hero Expand	2つの単語の間に小さな画像を配置した大きなタイトルです。スクロールすると画面が固定され、画像が全画面に広がって単語を左右に押しのけ、続いてキャプションとボタンがせり上がります。上にスクロールすると、アニメーションが巻き戻ります。	デモ
Hero Focus	ぼかした画像の上に、鮮明なタイトルを配置します。スクロールすると画像にフォーカスが移り、タイトルはぼけて消えていきます。距離を示す数値がカウントされ、詳細を示す注釈が表示されます。アニメーションは巻き戻ります。	デモ
Hero Screen	遠近感をつけて後ろに傾けた製品のスクリーンショットの上に、中央揃えのタイトルとボタンを配置します。スクロールすると、画面が起き上がって正面を向きながら拡大し、タイトルは後ろに下がります。	デモ
Hero Showcase	テーブルに並べたプリントのように後ろに傾けたプロジェクトのサムネイルの壁に、タイトルを重ねます。スクロールすると、各行が反対方向にスライドして揃い、壁が起き上がります。すべてのサムネイルがリンクになっています。	デモ
Hero Split	左側にテキスト、右側に4:5の画像を配置した分割型のヒーローです。タイトルの行はマスクからせり上がり、画像は上端から下に向かって開きます。	デモ
Hero Statement	都市名、現地の現在時刻、予約受付期間を示す1行のテキストの上に、スタジオのステートメントを大きく配置します。表示時に、単語がひとつずつマスクからせり上がります。	デモ

このリポジトリについて

このリポジトリはkodza.devを反映しています。そこでコンポーネントが公開または変更されると、ここにも反映されます。すべてのファイルは自動生成され、手作業では編集されないため、プルリクエストはマージされません。

バグを見つけた場合や、コンポーネントが不足している場合は、kodza-dev/requestsをご利用ください。バグはイシュー、リクエストはディスカッションで受け付けており、投票もできます。

ライセンス

Kodza Licenseです。個人用・商用を問わず、クライアント向けの作業も含め、あらゆるプロジェクトでコンポーネントを利用できます。クレジット表記は不要です。再販売や再配布、別のカタログ、レジストリ、MCP サーバーを通じた提供は禁止されています。

どこでも利用できます。再販売は禁止です。