riftstone network
[ SYSTEM SPECIFICATIONS & ARCHITECTURE ]
/ MAGICAL & TECHNOLOGICAL SPECIFICATIONS
[SYSTEM SPECS & TECH STACK]
当サイト（RIFTSTONE NETWORK）のバックエンド・フロントエンド・3Dレンダリング・独自演出エフェクト、および開発ツールの技術構成と仕様をまとめた空間です。
PHILOSOPHY & CONCEPT
THE LABORATORY OF SELF-SATISFACTION
このWebサイトは誰かの役に立つ実用的なサイトではなく、私が「こんな3D世界や無駄に凝った演出があったら最高に面白い」という完全な自己満足とちょっとしたロマンだけで作っている実験的なサイト、実験室です。
普段のWeb制作ではまず使わないような「カーソルに反応して文字が化ける解読演出」「暗闇を松明で照らして探索するエフェクト」「無駄に立体的なリムストーンの3D背景」など、ロマン溢れる技術を好きなだけ詰め込みました。
『効率や実用性にとらわれず、好きなものを好きな技術で形にする』— その楽しさを記録し、仕様としてここに残しています。
CORE FRAMEWORK & RUNTIME
核となるWeb技術基盤
高速かつ堅牢なモダンWebスタックを採用。型安全性と最新のレンダリングパフォーマンスを確保しています。
Next.js
v16.2 (App Router)React のフルスタックフレームワーク。App Router、Server Components、最適化されたルーティングを活用。
DETAILS & SPECIFICATIONS
- App Router 構成による高速な静的・動的レンダリング
- React Compiler (reactCompiler) 組み込みによる自動メモ化・再レンダリング最適化
- 高速なページ遷移オーバーレイ（RiftOverlay）との連携
- Vercel Analytics によるリアルタイムパフォーマンス計測
React
v19.2最新の React 19 レンダリングエンジン。並行モードおよびインタラクティブなUIツリーの制御を担う。
TypeScript
v5.x厳格な静的型付け言語。3Dオブジェクト構造、演出データの堅牢な設計を支える。
Tailwind CSS
v4.0次世代CSSエンジン。ユーティリティファーストで洗練されたダークファンタジーテーマを構築。
3D RENDERING & GRAPHIC EFFECTS
3D空間演出・ポストエフェクト
ブラウザ上で動く没入感あふれるグラフィック。ダークファンタジー世界を彩るシェーダーと光の演出です。
Three.js & React Three Fiber
vr185 / R3F v9WebGL を直感的にReactコンポーネント化するライブラリ。画面奥に広がる星空・リムストーン空間をレンダリング。
React Three Drei
v10R3F 用の強力なヘルパーキット。3Dシーンの構築効率を高めるユーティリティ群。
Torch Reveal Effect (CSS Radial Mask)
v1.0暗闇の中に隠された古文書を、松明（トーチ）の光で照らし出す完全自作の没入型演出エフェクト。
Canvas Fractal Noise Grain
v1.0画面全体にオーバーレイされた微細な粒状ノイズ（Fractal Noise SVG Filter）。映画的質感を演出。
Ferrystone Fast Travel (3D Warp Scroll)
v1.0「ただTOPに戻るだけ」の機能に全力を注いだ過剰演出モジュール。クリックすると画面全体に3D WebGLキャンバスが展開し、光の柱と粒子が高速昇華。
MICRO-INTERACTIONS & UI SPECS
インタラクション＆演出モジュール
触れた瞬間の手応えを追求した、完全に「自己満足」のためのマニアックなUI機能群。
ScrambleText Decipher Engine
マウスホバー時、古代レスタニア文字（Lestania Font）が暗号のように高速スクランブル展開しながら英文・日本語へ解読される効果。
Magnetic Action System
カーソルが近付くと、ボタンや要素が磁石のように引き寄せられる物理挙動コンポーネント。
Custom Rift Cursor & Audio-Visual Boot
サイト全体の世界観を統一する専用カーソルおよび、初回訪問時に起動するブートシーケンス演出。
DEVELOPMENT ENVIRONMENT & ASSETS
開発ツール＆フォントアセット
このサイトの制作を支える開発ツールおよびビジュアルアセット。
VS Code & Antigravity AI Assistant
Visual Studio Code 開発環境および Google DeepMind 開発の高度エージェント型AI開発アシスタント。設計、コーディング、デバッグをトータルサポート。
GitHub & Git
ソースコードのバージョン管理およびCI/CD連携を支えるリポジトリ管理基盤。
Google Fonts & Custom Typography
重厚な雰囲気を生み出すための独自タイポグラフィ選定。
Vercel & Analytics
グローバルエッジネットワークでの高速配信とリアルタイムパフォーマンス測定。
Primary Verification Environments
実機動作確認およびレスポンシブ表示・3Dパフォーマンス検証の標準ターゲット環境。