Bento Grid

CODE

HTML

<div class="demo-stage"><div class="bg-grid"><div class="bg-cell bg-1"><span>FAST</span></div><div class="bg-cell bg-2"><span>AI</span></div><div class="bg-cell bg-3"><span>SECURE</span></div><div class="bg-cell bg-4"><span>SCALABLE</span></div><div class="bg-cell bg-5"><span>OPEN</span></div></div></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; padding:2.5rem; background:#0F0F12; }
.bg-grid { display:grid; grid-template-columns:repeat(4,72px); grid-template-rows:repeat(3,72px); gap:.6rem; }
.bg-cell { background:#1A1A1A; border:1px solid rgba(255,255,255,.06); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Oswald',sans-serif; font-size:.75rem; letter-spacing:.2em; opacity:0; transform:translateY(14px) scale(.97); animation:bg-in .55s cubic-bezier(.16,1,.3,1) forwards; transition:transform .35s ease, background .35s ease; cursor:pointer; }
.bg-cell:hover { background:#E91B89; transform:translateY(0) scale(1.06); }
.bg-1 { grid-column:1/3; grid-row:1/2; animation-delay:.05s; }
.bg-2 { grid-column:3/5; grid-row:1/3; animation-delay:.15s; }
.bg-3 { grid-column:1/2; grid-row:2/4; animation-delay:.25s; }
.bg-4 { grid-column:2/4; grid-row:2/3; animation-delay:.35s; }
.bg-5 { grid-column:2/5; grid-row:3/4; animation-delay:.45s; }
@keyframes bg-in { to { opacity:1; transform:translateY(0) scale(1); } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .bg-cell,
  .bg-1,
  .bg-2,
  .bg-3,
  .bg-4,
  .bg-5 {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0

PROMPT

Apple/Linear/Vercel風のBentoグリッドを作って。CSS Gridで4列×3行を組み、5枚のセルを不揃いサイズで配置（bg-1はcol 1/3 row 1/2、bg-2はcol 3/5 row 1/3 のように grid-column / grid-row で範囲指定）。各セルは初期 opacity:0+translateY(14px)+scale(.97)、animation-delayを.05s/.15s/.25s/.35s/.45sずつずらしてcubic-bezier(.16,1,.3,1)で順次フェードイン。ホバーでscale(1.06)+背景accent色。2026年のSaaS LPヒーロー構成として定番。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

ベントーグリッド（Bento Grid）とは

不揃いサイズのタイルが順次フェードインで展開するBentoグリッド。Apple・Linear・Vercelなど2026年のSaaS LPで主流のヒーロー構成。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

ベントーグリッド（Bento Grid）はどんな効果ですか？

不揃いサイズのタイルが順次フェードインで展開するBentoグリッド。Apple・Linear・Vercelなど2026年のSaaS LPで主流のヒーロー構成。商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く演出です。

Bento GridはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

RELATED EFFECTS

ベントーグリッド（Bento Grid）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ