ニューモーフィック クラブ フィンテック

ニューモーフィック クラブ フィンテック は何をしますか？

2つの柔らかな素材から彫り出された会員制金融サイト: ダークなページと、そこに埋め込まれたライトなアイランド（カード、パネル、コイン、電話、FAQバー）。各素材の内部では、ボタンとウェルがその素材から浮き出るか、または押し込まれています。そして、カーソルに追従する光源が、その浮き彫りを物理的に感じさせます。ライトテーマでは2つが入れ替わります: ライトページ、ダークアイランド。トーンは静かで独占的: 大きな小文字のセリフ見出し、少ないコピー、たっぷりの余白。

リファレンスビルドは example/index.html（Atlasio Reserve、架空のカードクラブ、EN/TR、ダーク＆ライトリリーフ）。詳細なコードは references/components.md にあります。screenshots/ には、デスクトップ、モバイル、両テーマ、トルコ語のすべてのセクションが含まれています。

ユーザーがリファレンスサイトを指定した場合は、その構造と雰囲気のみを参照してください。そのレンダリング、製品名、コピー、ロゴをコピーしてはいけません。

1. デザイン前の準備

1. 実際の提供内容を収集する: 一行の約束、対象者、3～5の製品機能、報酬、セキュリティ声明、評価または会員数（クライアントが裏付けできる場合のみ）、FAQ、アプリリンク。その他はすべてサンプルとしてラベル付けする。
2. セキュリティ認証、金利、手数料、承認ルール、信用スコアへの影響を決して創作してはいけません。金融コピーは規制されています。実際にそこに記載すべき内容のプレースホルダーを残してください。
3. ライムLEDを割り当てる1つのライブ状態（支払期日、支払い受領、カード有効化など）を選択する。アクセントカラーは、プライマリボタンのテキストとフォーカスリング以外には使用してはいけません。

2. ビジュアル DNA

要素	ルール
素材	2つ。ページ: ダーク #272a31（ハイ #2e3139、ロー #212329）。アイランド (.alt): ライト #e6e9ee（ハイ #f1f3f6、ロー #d7dbe1）。ライトテーマではこれらが入れ替わる。1つの素材内では、すべてのサーフェスがその色。純粋な黒や白は決して使用しない: シャドウが両側にスペースを必要とするため。
アイランド	カード、ストーリー＆ジョインパネル、電話、レールタイル、コイン、ダイヤル、評価タイル、FAQバー、フッタープロモ、アプリアイコン。ヘッダー、ヒーローコピー、統計ウェル、見出し、フッターはページ素材に残る。各画面でおおよそ半分がライト、半分がダークになるように目指す。
浮き彫り	浮き出た = X Y 24px ダーク, -X -Y 24px ライト; 押し込まれた = 同じペアで inset。ダーク素材 rgba(0,0,0,.55) / rgba(255,255,255,.06); ライト素材 rgba(146,156,172,.75) / rgba(255,255,255,.95)。小型バリエーションはオフセット半分。凸型ノブやチップは linear-gradient(145deg, hi, lo) を追加。アイランド自身の外側の影はページに落ちるため、ページのペア（--island）を使用し、自身の白いハイライトを決して使用しない（ダーク上で後光のように光ってしまうため）。
光	オフセットは --lx/--ly（単位ベクトル）から来る。デフォルトは左上からの光（.7071, .7071）; JS がカーソル方向に回転させる。
テキスト	各素材には独自のインクがある: ダーク上 #f4f5f7 / #c9cdd5 / #959aa4、ライト上 #191c22 / #3c414c / #5f6571。テキストは決して低コントラストにしてはいけない: 浮き彫りはサーフェスのためであり、読まなければならないタイプのためではない。
アクセント	ダーク素材上のライムLED #b9f26b、ライト素材上の #3e8a1d、小さなグロー付き。特徴的なウェルには、それぞれ1つの彩度の高いグロー（ピンク、バイオレット、グリーン、ブルー）を ~38% の不透明度で保持してもよい。
表示タイプ	Fraunces 700、opsz 144、letter-spacing:-.035em、小文字、行の高さ .92（Denton が有料のオリジナルルック）。
ボディ / UI	Urbanist 400–700（Gilroy ルック）。アイブロウ 13px 700 大文字 letter-spacing:.32em。ボタン 13px 700 大文字 .18em。
形状	ボタンとトグルはピル型。パネルは 20～44px の半径。アイコンウェル、コイン、ダイヤルは円形。境界線なし、ヘアラインなし。
彫刻	サーフェスと同じ色 + text-shadow: 1px 1px 1px ライト, -1px -1px 1px ダーク。装飾のみ（カード番号、未読単語）。

3. セクションパターン

1. ヘッダー – 浮き出た丸いモノグラム＋セリフワードマーク。押し込まれたピル型LED（"new · …"）。押し込まれた言語トラック（アクティブなセグメントは浮き出ている）。丸い浮き出たテーマボタン。スティッキー。スクロール後、ソフトドロップシャドウが追加される。
2. ヒーロー – 左: アイブロウ、2行小文字セリフ見出し、短いリード文、プライマリ（ライムテキスト）とプレーンピルボタン、"サンプル"とラベル付けされた2つの押し込まれた統計ウェル。右: 同心円状の浮き彫りリング（浮き出た、押し込まれた、浮き出た）に、その上にエンボスカード（凸チップ、彫刻番号、LED）、-8°傾けてマウスに追従させる。
3. ストーリー – 1つの大きな浮き出たパネル。アイブロウ（"MEMBERSHIP IS EARNED."）。セリフ段落の単語は、最初は彫刻されており、読者がスクロールするにつれて1語ずつ光る。
4. アプリ – 押し込まれたスロットから浮き出た電話が現れ、押し込まれた画面を持つ。内部には、浮き出た請求書カード（LED支払期日、金額、支払いボタン）と2つのリスト行。中央揃えのセリフ見出しとリード文が下にある。
5. カード – 分割: 左にコピー。5枚の浮き出たカードスラブが、セクションがスクロールインするにつれて共通のピボットから扇状に開く。前面のスラブがLED状態を保持する。
6. 支払いレール – アイブロウ＋見出し、浮き出た丸い前/次ボタン。水平スクロールスナップレールの浮き出たタイル: 押し込まれたアイコンウェル＋大文字ラベル、2行タイトル、小さなピルボタン、色付きグローと浮き彫りオブジェクト（点線の電話、チップグリッド、非接触リング、分割バー）を持つ押し込まれた「表示」ウェル。
7. 報酬 – 中央揃え見出し。ゆっくり浮遊する3×2グリッドの凸コイン。押すと沈み、サンプル報酬が表示される。
8. セキュリティ – 分割: 60の目盛りを持つ浮き出たダイヤルが、スクロールに合わせて回転し、中心にはライムの鍵がある凸ノブ。アイブロウと、動くスポットライト（ポインターに追従し、それ以外ではドリフト）で照らされる大きなサンセリフ段落。
9. 証明 – 見出し＋2つの浮き出た評価タイル: セリフ数字、/5、ライム色の塗りつぶしを持つ押し込まれたトラック。実際のものでなければサンプルとラベル付け。
10. ジョイン – 浮き出たパネル: 見出し（"the door opens for some."）、リード文、押し込まれたスライド・トゥ・ジョイントラックと凸ノブ。右側に押し込まれたウェルと浮き出たQRタイル。
11. FAQ – ワイドトラック中央揃えラベル。浮き出た <details> バー。開くと押し込まれた状態になる。
12. フッター – ロゴ、2つのリンク列、浮き出たプロモカードを含む1つの押し込まれたパネル。その下に細則の行。
13. フローティングバッジ – 右下に浮かぶ「アプリを入手」、小さなQR付き。ジョインセクションが表示されている間と、900px以下の場合は非表示。

4. シグネチャーインタラクション

• カーソルライト – pointermove で、シャドウベクトルを normalize(中心 − カーソル) に設定し、requestAnimationFrame 内で --lx/--ly をその方向にイージングする。すべてのシャドウはこれらの変数から構築されているため、ページ全体が一度に再照明される。(pointer:fine) の場合のみ。動きを抑えた設定では左上固定ライト。
• 彫刻→点灯単語 – 段落を <span class="w"> に分割し、最初の progress × count 個の単語を点灯させる。言語切り替え後に再分割する。動きを抑えた設定: すべて点灯。
• カード傾き – ポインター位置からステージ上で rotateX/rotateY を ±11° まで。離れると平面に戻る。
• 電話の浮上 / カードの扇 / ダイヤル – それぞれが1つのスクロール進行値（0→1）を読み取り、CSS変数（--p、--fan、--rot）に書き込む。動きを抑えた設定: 最終状態。
• 押下状態 – クリック可能なすべての浮き彫り要素は、:active または aria-pressed="true" のとき、外側の影を内側のペアに交換し、0.985にスケーリングする。
• スポットライトテキスト – 完全な白で、--mx/--my を中心とする放射状グラデーションでマスクされた、aria-hidden の複製段落。
• スライド・トゥ・ジョイン – ポインターキャプチャされたノブ。90% を超えて離すと完了、そうでなければ跳ね返る。矢印キーと Enter キーでも動作。ノブには role="slider" と aria-valuenow がある。クライアントが配線しない限り、何も送信しない。
• テーマ切り替え – <html> の data-theme を反転。トークンのみが変更される。

5. ビルドルール

• スタンドアロンHTML（doctype/charset/viewport）。Google Fonts のみ。画像不要（すべての浮き彫りはCSS、QRは装飾的なキャンバスパターンでサンプルとしてマーク）。
• 両方の素材をトークンセットとして定義する。ページセットは :root に配置。反対側のセットは .alt に配置（[data-theme="light"] 下で入れ替わる）。:root, .alt に --raise --raise-sm --inset --inset-sm を再構築し、各アイランドが独自のペアを使用するようにする。--island / --island-sm は :root のみに宣言し、アイランドが外側の影にページペアを継承するようにする。コンポーネントは手動でシャドウを決して記述しない。
• JSで色を読み取るもの（QRキャンバス）は、:root からではなく、自身の要素から色を読み取らなければならない。
• 影を落とすすべての要素は background: var(--bg) 上に配置される。オーバーフローコンテナ（レール）には、影がクリップされないように約30pxのパディングが必要。
• アクセシビリティ: 浮き彫りに関係なくテキストのコントラスト比 ≥ 4.5:1。可視のライムフォーカスリング。押下状態は aria-pressed でも公開される。装飾的な浮き彫りは aria-hidden。
• prefers-reduced-motion: ライト追従なし、傾きなし、浮遊なし、すべてのスクロール部分は最終状態、スポットライトオフ。
• モバイル（< 900px）: グリッドはスタック、バッジは非表示。（< 640px）: ヘッダーピルは非表示、コインは2列。

6. コピーの作成

• 小文字の見出し、短く宣言的、最大2行: "built for people who pay on time"。
• アイブロウは大文字でピリオド付きの完全な文: "MEMBERSHIP IS EARNED."
• ボディコピーは平易で具体的。誇大広告なし、創作数字なし。適宜サンプルをマーク。
• すべての文字列を翻訳する（JSで記述されたもの（コイン、スライダー結果、テーマラベル）も含む）。

7. 完了チェックリスト

• 各画面でおおよそバランスの取れた2つの素材。境界線なし。すべてのシャドウはトークンから来ている。
• ダークページ上のライトアイランド周りに白い後光がない（外側の影は --island を使用）。
• マウスを動かすとページ上のすべての影が回転する。タッチと動きの抑制設定では固定ライトになる。
• すべての読み取り可能なテキストが両テーマでコントラストを通過している。彫刻は装飾のみ。
• レールの影がクリップされていない。390pxで水平スクロールが発生しない。
• 評価、会員数、金利、セキュリティ主張は実際のものか、ラベル付けされている。サードパーティのロゴやレンダリングはない。
• 言語を切り替えてもソース言語のテキストが残らない。
• スクリーンショットが1440×900および390×844で撮影されている（node scripts/screenshots.mjs example/index.html screenshots。スクリプトは仮想マウスを動かして光の方向を示し、両方のテーマをキャプチャする）。