riftstone network
[ SYSTEM SPECIFICATIONS & ARCHITECTURE ]
/ MAGICAL & TECHNOLOGICAL SPECIFICATIONS
[SYSTEM SPECS & TECH STACK]
当サイト（RIFTSTONE NETWORK）のバックエンド・フロントエンド・3Dレンダリング・独自演出エフェクト、および開発ツールの技術構成と仕様をまとめた空間です。
CORE FRAMEWORK & RUNTIME
核となるWeb技術基盤
高速かつ堅牢なモダンWebスタックを採用。型安全性と最新のレンダリングパフォーマンスを確保しています。
Next.js
React のフルスタックフレームワーク。App Router、Server Components、最適化されたルーティングを活用。
- App Router 構成による高速な静的・動的レンダリング
- 高速なページ遷移オーバーレイ（RiftOverlay）との連携
- Vercel Analytics によるリアルタイムパフォーマンス計測
React
最新の React 19 レンダリングエンジン。並行モードおよびインタラクティブなUIツリーの制御を担う。
- クライアント/サーバー境界のクリアな分離
- コンポーネント単位での高度なアニメーション制御
React Compiler
React 19 向けの次世代自動メモ化コンパイラ。手動の useMemo や useCallback を減らし、再レンダリングを自動最適化する最新仕様。
- SWC / Babel プラグインによる JSX コンポーネントの自動メモ化
- next.config.ts での reactCompiler オプション設定による組み込み対応
TypeScript
厳格な静的型付け言語。3Dオブジェクト構造、演出データの堅牢な設計を支える。
- データ構造（Journal, Specs, Pawn Dialogue）のインターフェース一括定義
- Three.js / React Three Fiber 周辺プロパティの安全な型解決
Tailwind CSS
次世代CSSエンジン。ユーティリティファーストで洗練されたダークファンタジーテーマを構築。
- ダークパープル・ゴールドアクセントの高度なグラデーション指定
- カスタムCSSアニメーション（輝き・スクロールパルス・グロー効果）との融合
3D RENDERING & GRAPHIC EFFECTS
3D空間演出・ポストエフェクト
ブラウザ上で動く没入感あふれるグラフィック。ダークファンタジー世界を彩るシェーダーと光の演出です。
Three.js & React Three Fiber
WebGL を直感的にReactコンポーネント化するライブラリ。画面奥に広がる星空・リムストーン空間をレンダリング。
- 動的ライティング（PointLight / SpotLight）と揺らぎアニメーション
- ExponentialSquaredFog による深みのあるダークファンタジーフォグ
- 浮遊する無数のパーティクル群と立体幾何学オブジェクトの自作マテリアル
React Three Drei
R3F 用の強力なヘルパーキット。3Dシーンの構築効率を高めるユーティリティ群。
- Float, OrbitControls, Stars コンポーネントを活用したカメラワーク
- 演出用ポストプロセスプロセッサとのシームレスな統合
Torch Reveal Effect (CSS Radial Mask)
暗闇の中に隠された古文書を、松明（トーチ）の光で照らし出す完全自作の没入型演出エフェクト。
- ポインター座標（Mouse / Touch）にリアルタイム追従する Radial Gradient Mask
- requestAnimationFrame で毎フレーム不規則な揺らぎを計算する明滅（Flicker）アルゴリズム
- レスタニア文字解読やクロニクルでのテキスト探索体験を強化
Canvas Fractal Noise Grain
画面全体にオーバーレイされた微細な粒状ノイズ（Fractal Noise SVG Filter）。映画的質感を演出。
- シネマティックなフィルムグレイン質感の再現
- mix-blend-overlay によるグラデーションとのなめらかな融合
MICRO-INTERACTIONS & UI SPECS
インタラクション＆演出モジュール
触れた瞬間の手応えを追求した、完全に「自己満足」のためのマニアックなUI機能群。
ScrambleText Decipher Engine
マウスホバー時、古代レスタニア文字（Lestania Font）が暗号のように高速スクランブル展開しながら英文・日本語へ解読される効果。
- ドラゴンズドグマ公式の文字体系に基づく独自フォント適用
- ランダム文字列生成から目的の英文への段階的文字置換アニメーション
- スマホタッチ操作時にもタップで快適に解読表示されるレスポンシブ設計
Magnetic Action System
カーソルが近付くと、ボタンや要素が磁石のように引き寄せられる物理挙動コンポーネント。
- マウス座標からの距離と影響範囲（Range）をイージング計算
- ホバーを解除した際にバネのように元の位置へと戻るスムーズ復元
Custom Rift Cursor & Audio-Visual Boot
サイト全体の世界観を統一する専用カーソルおよび、初回訪問時に起動するブートシーケンス演出。
- セッションストレージ（sessionStorage）で初回のみ発動する起動ロード画面
- リムの光を彷彿とさせる追従式遅延カスタムカーソル
DEVELOPMENT ENVIRONMENT & ASSETS
開発ツール＆フォントアセット
このサイトの制作を支える開発ツールおよびビジュアルアセット。
VS Code & Antigravity AI Assistant
Visual Studio Code 開発環境および Google DeepMind 開発の高度エージェント型AI開発アシスタント。設計、コーディング、デバッグをトータルサポート。
- VS Code エディタ環境でのリアルタイムなコンポーネント設計・3D演出シェーダーの実装
- 自動テスト・ビルド検証・リファクタリングの高速なペアプログラミングループ
GitHub & Git
ソースコードのバージョン管理およびCI/CD連携を支えるリポジトリ管理基盤。
- 機能追加・演出カスタマイズの細かなブランチ/コミット運用
- Vercel と連携したプッシュ時自動プレビュー＆デプロイ
Google Fonts & Custom Typography
重厚な雰囲気を生み出すための独自タイポグラフィ選定。
- Cinzel: 荘厳でクラシカルなファンタジー見出しフォント
- Teko: シャープで縦長な未来感あふれるHUD風フォント
- Lestania Font: ドラゴンズドグマ世界で使われる解読用オリジナル古代フォント
Vercel & Analytics
グローバルエッジネットワークでの高速配信とリアルタイムパフォーマンス測定。
- Next.js との親和性が最も高い自動CI/CD環境
- Web Vitals およびユーザーアクセスのリアルタイム解析
Primary Verification Environments
実機動作確認およびレスポンシブ表示・3Dパフォーマンス検証の標準ターゲット環境。
- PC (Main): Google Chrome / 2560 × 1440 (WQHD高解像度環境での3Dビジュアル＆マウスホバー演出最適化)
- Mobile (Main): iPhone (iOS Safari / Chrome タッチ操作・解読レイアウト最適化)
- Tablet (Main): iPad (iPadOS タブレット大画面レスポンシブ最適化)
- Other: その他各種ブラウザ・実機デバイスによるクロスプラットフォーム確認
// PHILOSOPHY & CONCEPT
THE LABORATORY OF SELF-SATISFACTION
ぶっちゃけた話をすると、このWebサイトは誰かの役に立つ実用サイトではなく、作者（覚者）自身が「こんな3D世界や無駄に凝った演出があったら最高に面白い」という完全な自己満足とロマンで作られた実験室です。
普段のWeb制作ではまず使わないような「カーソルに反応して文字が化ける解読演出」「暗闇を松明で照らして探索するエフェクト」「無駄に立体的なリムストーンの3D背景」など、ロマン溢れる技術を好きなだけ詰め込みました。
『効率や実用性にとらわれず、好きなものを好きな技術で形にする』— その楽しさを記録し、仕様としてここに残しています。