HTMLの可能性研究

CSS アニメーション

JavaScriptなし。CSSだけで実現できる表現の幅。

Morphing Blob

Neon Pulse

3D Spin

Particle Orbit

WAVE!

Wave Text

Gradient Shift

Canvas 2D

Canvas APIでリアルタイム描画。パーティクル・波・描画アプリ。

パーティクルシステム（マウスで引き寄せ）

フリー描画キャンバス

正弦波ビジュアライザー

インタラクティブ花火

クリックで花火を打ち上げ

Web API

ブラウザが持つネイティブAPIで実現できること。

📍 位置情報

Geolocation API

—

📋 クリップボード

Clipboard API

—

🎤 音声認識

Web Speech API

—

🔊 音声合成

SpeechSynthesis API

—

📳 バイブレーション

Vibration API（スマホのみ）

—

🌐 ネットワーク状態

Network Information API

—

💾 ローカル保存

localStorage API

—

🖥️ フルスクリーン

Fullscreen API

—

AI連携（Claude API）

HTMLからClaude APIを直接呼び出してチャット。

未設定

こんにちは！APIキーを入力してメッセージを送ってみてください。

スクロール FX

Intersection Observer APIで要素が画面に入ったときアニメーション。

🚀

高速

Pure CSS + JS
フレームワーク不要

🎨

表現力

グラデーション
アニメーション自在

📱

レスポンシブ

どんな画面でも
崩れない

🌐

ネイティブ

ブラウザAPIを
フル活用

🤖

AI統合

Claude APIと
リアルタイム連携

⚡

ゼロ依存

npm不要
1ファイル完結

CSS Art

画像ゼロ。HTML+CSSだけで作るビジュアル表現。

GLITCH

console.log("HTML")

🌈