UI Lab | Component Experiments

Basic

Simple Carousel

シンプルで軽量なカルーセル。矢印・ドット・自動再生・スワイプに対応した基本実装。

Auto-play Swipe Keyboard Dots

Advanced

Helix Orbital

3D空間を螺旋状に回転する立体カルーセル。慣性スクロールとスナップ機能搭載。

3D Transform Inertia Snap Perspective

JACKPOT

7

Experimental

Pachislot Carousel

パチスロ筐体を模したレトロなカルーセル。レバーで回転、CRTエフェクト搭載。

Lever Control CRT Effect Retro UI Infinite Spin

Basic

Simple Knob

ドラッグ・スクロール・キーボード対応のシンプルなロータリーノブ。ハイエンドオーディオ機器風のデザイン。

Drag Control Scroll Keyboard Audio Style

Experimental

Event Horizon

ブラックホールを模したノブ。アクリーションディスク、重力レンズ効果、ホーキング放射を視覚化。

Accretion Disk Gravity Lens Hawking Radiation WebGL

Advanced

Cube Mixer

ルービックキューブ型のミキサーノブ。各面をドラッグして値を調整、3Dビュー回転対応。

3D Cube 6-Channel View Rotation Retro Style

Basic

Simple Color Picker

SV Canvas + Hue スライダーで直感的に色を選択。HEX/RGB/HSL の双方向バインディング、コピー機能付き。

SV Canvas Hue Slider HEX/RGB/HSL Copy

Experimental

Chromatic Nebula

宇宙空間を旅するように色を探索。パーティクルの星雲を航行し、マウスで色相・彩度を、スクロールで明度を制御。

Particle Nebula Cosmic Navigation Supernova Capture Constellation Claude Code

Featured

Paradox Oracle

Harmony Orbit を中心に据えた探索型カラーピッカー。SV面と連動しながら、配色候補を円軌道で行き来できます。

Harmony Orbit SV + Hue + Alpha RGB/HSL/HEX Sync Saved Palette Codex

A あ 7

Basic

Simple Type Playground

フォントファミリー、サイズ、ウェイト、行間、字間、行幅をライブプレビューで調整できます。

Font Family Type Scale Tracking Copy CSS

G 字 R 9

Impossible

Glyph Reactor

入力した文字を反応場に放ち、質量、幅、重力、乱流でグリフの姿を変えるテキストUI。

Glyph Field Axis Console Reactive Canvas CSS Signal Codex

A

Unprecedented

Type Forge — 活字鍛冶場

可変フォントの字形を金属として鞴で熱し、鎚で打ち、焼き入れて活字に鋳込む鍛冶屋UI。温度が操作の抵抗になります。

Variable Font Heat Physics Synth Audio Letterpress Claude Code

け

けんさくボックス
けんさく候補
けんさく結果一覧

Basic

Simple Search

サジェスト＋結果一覧の一般的な検索UI。ハイライト、キーボード操作、IME に対応。

Suggest Highlight Keyboard IME-aware

Parallel

Multiverse

検索履歴を並行世界として分岐・比較・統合する検索UI。時間軸を行き来しながら条件を試せます。

Branch Diff Merge Time-travel

Unprecedented

Echo Field — 反響検索

曖昧な感覚を波として放ち、暗闇に眠る結果の反響を聴く検索UI。引き寄せと遠ざけで意味の場を彫ります。

Resonance Attract / Repel Re-broadcast Semantic Field