警告：このサイトのパーツは、よく動きます
コピペで使える“危険な動き”の実験室
押した瞬間に時間が止まるボタン、叩くと割れるカード、逃げ回るUI。実用性より衝撃を優先した動きを120本、20の区画に分けて保管しています。コードはすべてバニラJS・依存ライブラリなしで、そのまま持ち帰れます。
- 120
- 収録サンプル
- 20
- 実験区画
- 0
- 依存ライブラリ
- ¥0
- 商用OK・登録不要
EXPERIMENT AREAS
20の実験区画
区画を開くと、6本のサンプルがその場で動きます。気に入ったものは「全部コピー」で、HTML・CSS・JSをひとまとめに持ち帰れます。
該当するサンプルが見つかりませんでした。別の言葉で探してみてください。
HOW TO USE
サンプルの持ち出し方
触ってみる
区画のページでは、どのサンプルも本物が動いています。押したり、なぞったり、長押ししたりして、気に入る動きを探してください。
コピーする
「全部コピー」で、HTML・CSS・JSがひとまとめになったコードを取れます。「使い方」には、どの数値を変えると何が起きるかを書いています。
貼り付ける
ページのHTMLに1回貼るだけで動きます。依存ライブラリはありません。WordPressでは、スクリプトを許可した「カスタムHTML」ブロックで使えます。同じパーツを複数置くときはHTML部分だけを複製し、CSSとJSは1組だけ、すべてのHTMLより後に置いてください。
LAB NOTES ─ 事故を防ぐ6つのコツ
派手な動きは強い薬です。ページに入れる前に、この6つだけ確認してください。
動きが多いほど、1つあたりの驚きは薄まります。主役をひとつ決めて、まわりは静かにしておくのが一番効きます。
逃げるボタンを本物の送信ボタンに付けると、本当に送信できません。404ページやキャンペーンなど、遊べる場所で使ってください。
OSで「視差効果を減らす」を選んでいる人には、粒を減らし、揺れを止めるようにしてあります。消さずに残してください。
ug- で隔離全サンプルのクラス名は ug- で始まります。既存のCSSとぶつかったときは、一括置換で別の名前に変えてください。
火花や破片が枠を越えて飛ぶサンプルは、画面を覆う透明なキャンバスを1枚足します。クリックは下へ素通りします。
data-sound を付けたときだけ音つきのサンプルは、要素に data-sound を付けたときだけ鳴ります。ページを開いただけでは鳴りません。
VIBE CODING
AIに渡せば、貼る場所も探してくれます
AIコーディング（バイブコーディング）と一緒に使う前提でも作っています。URLかコードをAIに渡して、日本語で頼んでください。
URLを渡す
区画ページのURLをAIエージェント（Claude Codeなど）に貼って、「この『逃げるボタン』をうちの404ページに入れて」と頼むだけです。
コードを渡す
「全部コピー」で取ったコードをチャットに貼れば、「色はブランドカラーに」「スクロールしたら発動」といった調整も日本語で頼めます。
使い方ごと渡す
各サンプルの「使い方」には、変えると効く数値を書いています。コードと一緒に渡せば、AIへの指示がそのまま正確になります。
（このサイトのURL）sample/explosion.html にある「爆散ボタン」を、 うちのサイトの送信完了画面に組み込んでください。 色はブランドカラーに合わせて、火花の量は少し控えめにしてください。
用法・用量を守って、
正しく暴れさせてください。
すべてのサンプルは無料・登録不要・商用OKです。
ただし、動きの入れすぎによる見る人の疲れにはご注意ください。
SISTER TOOLS