_{フロントエンドUIコンポーネントの実験場。
インタラクティブで独創的なUIを探求するラボラトリー。}

---

✦ Overview

UI Lab は、創造的なフロントエンドコンポーネントを実験・展示するためのリポジトリです。

一般的なUIライブラリでは見られない、ユニークで印象的なインタラクションを追求しています。すべてのコンポーネントはバニラHTML/CSS/JSで構築され、依存関係なしで動作します。

⬡ Components

🎠 Carousel

Component	Description	Features
Simple	シンプルで軽量な基本実装	Auto-play, Swipe, Keyboard, Dots
Helix Orbital	3D螺旋状に回転する立体カルーセル	3D Transform, Inertia, Snap, Perspective
Pachislot	パチスロ筐体風レトロUI	Lever Control, CRT Effect, Infinite Spin

🎛️ Knob

Component	Description	Features
Simple	ハイエンドオーディオ風ロータリーノブ	Drag, Scroll, Keyboard, Touch
Event Horizon	ブラックホールを模したノブ	Accretion Disk, Gravitational Lensing, Hawking Radiation
Cube Mixer	ルービックキューブ型ミキサー	3D View, Face Rotation, RGB Control

🧩 More coming soon...

新しいコンポーネントを随時追加予定

⌬ Tech Stack

╭──────────────────────────────────────╮
│  HTML5      ████████████████  100%   │
│  CSS3       ████████████████  100%   │
│  JavaScript ████████████████  100%   │
│  Framework  ░░░░░░░░░░░░░░░░    0%   │
╰──────────────────────────────────────╯

• Zero Dependencies - 外部ライブラリ不要
• Modern CSS - CSS Variables, Grid, Flexbox, 3D Transforms
• Vanilla JS - フレームワークなしのピュアな実装
• Responsive - モバイル対応

⎔ Local Development

# Clone the repository
git clone https://github.com/wadakatu/ui_lab.git
cd ui_lab

# Option 1: Open directly
open index.html

# Option 2: Python server
python3 -m http.server 8080

# Option 3: Vite (for carousel dev)
cd carousel && npm i && npm run dev

◈ Project Structure

ui_lab/
├── index.html          # Gallery landing page
├── carousel/
│   ├── index.html      # Carousel gallery
│   ├── simple/         # Simple Carousel
│   ├── helix/          # Helix Orbital Carousel
│   └── retro/          # Pachislot Carousel
└── knob/
    ├── index.html      # Knob gallery
    ├── simple/         # Simple Rotary Knob
    ├── blackhole/      # Event Horizon Knob
    └── rubiks-cube/    # Cube Mixer Knob

⟡ Design Philosophy

"実験室のように、失敗を恐れず新しいUIを試す場所"

• Distinctive - 既存のUIパターンに囚われない独創的なデザイン
• Interactive - ユーザーが触りたくなるインタラクション
• Performant - 軽量で高速なアニメーション
• Accessible - キーボード操作・スクリーンリーダー対応

---

_{Made with ⚡ by @wadakatu}