Screenshots
Overview
概要
『JavaScriptを使わない』を縛りにした、CSSだけで動くアート集です。各作品はHTMLとCSSのみのアニメーション／アートでありながら、@propertyやスクロール駆動アニメーション、:has()、コンテナクエリ、View Transitions、Houdini Paint APIといったモダンCSS機能のリファレンス実装も兼ねます。ネオンの雨・絵巻物スクロール・反応する庭・純CSS太陽系・硝子の錦鯉など初期12作品を、ライブプレビューのギャラリーで一覧し、各詳細ページでフルビュー・機能バッジ(MDNへリンク)・対応ブラウザ表・HTML/CSSコードを提示します。
How to use
遊び方・使い方
ギャラリーで作品を選ぶか、使用CSS機能のタグで絞り込みます。各作品はマウス移動・チェックボックス・スクロール・要素のリサイズなど、JSを使わないCSSだけのインタラクションで反応。詳細ページではフル表示に加え、使われているCSS機能のバッジ、Chrome/Firefox/Safariの対応バージョン表、HTML/CSSのコードをタブで確認でき、コピーも可能です。非対応ブラウザには@supportsによる静的画像フォールバックと注意書きが出ます。
Tech stack
技術スタック
実行時の追加依存はshiki(コード表示)のみで、アニメーションライブラリは概念上一切使いません。文字織り作品はM PLUS 1 Variableのwght軸をアニメーションさせるなど、可変フォントやbackground-clip:textも活用。content-visibility:autoで画面外プレビューの描画コストを抑えています。
Highlights
工夫した点
- 作品のCSSはビルド時にfs.readFileでRSCから読み込み、表示コードと実際に適用されるスタイルを単一ソース化してズレを排除。ハイライトはshikiをサーバー側で実行しCopyButtonのみクライアント
- JSゼロ縛りの唯一の例外はHoudini Paint APIのCSS.paintWorklet.addModule()一行のみで、『登録のみJS使用』バッジで明示。作品スタイルは.work-<slug>で名前空間化しTailwindのpreflightとの衝突を回避
- 対応ブラウザ表はMDN/caniuseを2026-07時点で検証して作成。scroll-driven animationやHoudiniなど実装差の大きい機能は、CSS-onlyのフォールバックを個別に用意
To improve
改善したい点
- Firefoxのみ非対応のscroll-driven animationなど、ブラウザ差でフォールバックが静的画像になる作品がある
- アンカーポジショニング等の最新機能を使う作品は対応状況が流動的で、継続的な検証が必要
- モバイルでの重い合成(backdrop-filter等)の描画負荷に伸びしろ
What's next
今後の展望
- アンカーポジショニングやscroll()連動の新作追加
- 作品パラメータをCSS変数＋input(JSなし)で読者が調整できる仕組み
- 各機能のBaseline対応状況の自動更新表示