LP Lab
リッチな LP の実験場
架空のプロダクトのトップ画面を、技術を変えながら作って見比べる。各カードの「仮説」がその LP で確かめたいこと。 URL に ?tier=lite / ?tier=static を付けると軽量版・静止版を確認できる。
001-native-scroll
重さ: 軽
Native Scroll
Tidewell — 架空のメモアプリ
JS を使わず、スクロールに合わせて潮汐曲線が引かれ、時刻と潮位の数字まで CSS だけで刻む新聞紙面風の LP。
仮説: ライブラリも JS もなしで、読み物として成立する「動く紙面」を作れるか。Firefox では完成形の紙面として崩れないか。
- native-css
002-shader-hero
重さ: 軽
Shader Hero
Halcyon — 架空の気象データ API
流れるメッシュグラデーション＋グレインを、1 日の気温の色で動かす。明るいスイス式の格子に載せる。
仮説: ヒーロー背景のシェーダーだけで、ページ全体の「今っぽさ」がどこまで決まるか。
- shader
003-scroll-story
重さ: 中
Scroll Story
Orbit One — 架空のスマートスピーカー
スクロールに合わせて製品が回転・分解し、内部構造まで見せる製品ページ型のストーリー。
仮説: スクロールで物語を進める演出を、ガタつかせずにどこまで滑らかにできるか。
- three
- gsap
- lenis
004-kinetic-type
重さ: 軽
Kinetic Type
Kotoba — 架空の翻訳アプリ
文字だけで構成。1 語が 8 言語へスクランブルしながら訳され、可変フォントの太さ・幅・GRAD 軸で動かす。
仮説: 動く文字と、読み上げ・レイアウトの安定を両立できるか。
- gsap
005-physics-drop
重さ: 中
Physics Drop
Pantry — 架空の買い物リストアプリ
食材のタグが降って見出しの上に積もり、つまんで投げられる。
仮説: 物理演算の「触れる」演出は、見るだけの演出より記憶に残るか。
- physics
006-glass-light
重さ: 重
Glass & Light
Lumen — 架空の写真編集アプリ
同じ写真・同じ形のガラスを CSS / SVG 屈折 / WebGPU の 3 段で作り、切り替えて見た目と fps を比べる。
仮説: ガラスの屈折を本気で作る価値は、重さに見合うか。
- shader
- three
- webgpu
007-product-demo
重さ: 軽
Product Demo Hero
Ledgerly — 架空のチーム家計簿
ヒーローに動画ではなく本物の UI を置く。自動デモが流れ、触った瞬間に操作が訪問者へ移る。
仮説: 動画ではなく触れる UI をヒーローに置くと、製品の伝わり方はどう変わるか。
- native-css
008-splat-world
重さ: 重
Splat World
Kura — 架空の宿泊予約サービス
Gaussian Splatting の 3D の部屋をヒーローに、スクロールでカメラが奥へ進む。読み込みの待ちは障子が開く演出に。
仮説: Gaussian Splatting の 3D ヒーローは、転送量の重さに見合う体験になるか。
- three
- splat
009-generative-hero
重さ: 中
Generative Hero
Atlas — 架空の旅行計画アプリ
訪問者の一言から、地図・行程・予算の図葉がその場で組み上がる。
仮説: 訪問者ごとに中身が変わるヒーローは、固定のコピーより刺さるか。
- ai
010-hand-sound
重さ: 重
Hand & Sound
Resonance — 架空の瞑想・サウンドアプリ
Web Audio で合成した音に反応する粒子の水面を、マウス（任意でカメラの手）で操る。
仮説: カメラと音を使う体験を、許可を求める摩擦を越えて楽しませられるか。
- three
- audio
- camera
011-clear-stream
重さ: 重
Clear Stream
Seseragi — 架空の川の水質モニタリング
透明な水面越しに川底の石と揺れる光の網目（コースティクス）が見える清流をヒーローに。濁度の数値で水の見え方が変わる。
仮説: AI 驚き屋でも「難しすぎて避けてた」とされる水の透明感を、人の調整でどこまで出せるか。
- three
- webgpu
- shader
012-particle-flock
重さ: 重
Particle Flock
Murmur — 架空のチーム連携ツール
数十万の粒子がカールノイズで漂い、スクロールでロゴと言葉の形に集まる。
仮説: GPU で動かす大量粒子を、端末の差を吸収しながら出し分けられるか。WebGL 2 の代替経路でも同じ TSL のコンピュートが動くか。
- three
- webgpu
- compute
013-dither-print
重さ: 軽
Dither Print
Grain — 架空のログ解析 CLI
製品画面を 2 色のリソグラフ風に、Bayer の網点と形まで合わせる ASCII で刷る。カーソルの周りだけ網点がほどけて本物の画面が見える。
仮説: シェーダー 1 枚で「印刷物の質感」がどこまで出せるか。軽さと両立できるか。
- shader
014-xray-reveal
重さ: 軽
X-Ray Reveal
Anatomy — 架空のインフラ可視化 SaaS
製品画面をなぞると、流体のように広がるマスク越しに裏側の構成図が透けて見える。両方の画面は本物の DOM のまま、マスクだけ WebGL。
仮説: 「なぞると中身が透ける」演出は、機能説明として伝わるか。
- shader
015-text-to-dust
重さ: 軽
Text to Dust
Hibi — 架空の日記アプリ
見出しの文字がインクの粉と花びらになってほどけ、次の言葉として組み上がる。止まっている間は本物の文字を見せる。
仮説: 文字が崩れて次の言葉になる演出と、読みやすさ・読み上げを両立できるか。
- shader
016-css-only-3d
重さ: 軽
CSS Only 3D
Kumo — 架空の部屋の模様替えアプリ
WebGL を使わず CSS の 3D 変形だけで部屋と家具を組み、最新 CSS で動かす。
仮説: JS ゼロで 3D の空間をどこまで作れるか。非対応ブラウザでも崩れないか。
- native-css
017-persistent-world
重さ: 中
Persistent World
Orrery — 架空の星空観測アプリ
LP・料金・仕組みの 3 ページをまたいで、同じ 3D の天球儀（WebGL canvas 1 枚）が消えずに、各ページの置き場所へ位置・大きさ・傾きを変えて移る。
仮説: ページをまたいで 3D が続くと、サイト全体の体験はどう変わるか。
- three
- view-transition
018-playbook-run
重さ: 軽
Playbook Run
Kiln — 架空の陶芸教室の予約
公式の指示工程（方向性 4 案→選択→スクショで自己批評 2 周）をそのまま回した陶芸教室の予約 LP。工程ごとに効いた・効かなかったを記録したページ付き。
仮説: 調査で集めた「AI からリッチ UI を引き出す工程」は、本当に効くか。
- workflow