Patterns Easy
Staggered Grid Entrance
Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.
Open in Lab
MCP
intersection-observer css-keyframes
Targets: JS HTML
Code
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #070a12;
--panel: #121a2b;
--border: #263249;
--text: #f0f4fb;
--muted: #8a95a8;
--accent: #86e8ff;
--neon-purple: #ae52ff;
--neon-pink: #ff40d6;
}
body {
background: var(--bg);
color: var(--text);
font-family: "Inter", "SF Pro Display", system-ui, sans-serif;
min-height: 100vh;
}
/* โโ Header โโ */
.header {
text-align: center;
padding: 5rem 2rem 2rem;
}
.eyebrow {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 1rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.subtitle {
font-size: clamp(0.9rem, 2vw, 1.05rem);
color: var(--muted);
max-width: 480px;
margin: 0.75rem auto 0;
line-height: 1.6;
}
/* โโ Style picker โโ */
.style-picker {
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 1.5rem 2rem 2rem;
flex-wrap: wrap;
}
.style-btn {
padding: 0.45rem 1rem;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
font: 600 0.78rem / 1 "Inter", system-ui, sans-serif;
cursor: pointer;
transition: all 0.25s ease;
}
.style-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.style-btn.active {
background: rgba(134, 232, 255, 0.12);
border-color: var(--accent);
color: var(--accent);
}
/* โโ Grid โโ */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem 3rem;
}
/* โโ Grid items โโ */
.grid-item {
aspect-ratio: 1;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
will-change: transform, opacity;
/* Initial hidden state */
opacity: 0;
}
.grid-item .item-number {
font-size: 2rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
background: linear-gradient(
135deg,
hsl(var(--item-hue, 200) 70% 70%),
hsl(calc(var(--item-hue, 200) + 40) 60% 50%)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.grid-item .item-label {
font-size: 0.75rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* โโโโโโโโโโโโโโโโโโโโโโ
Animation styles
โโโโโโโโโโโโโโโโโโโโโโ */
/* Fade Up (default) */
.anim-fade-up {
transform: translateY(40px);
}
.anim-fade-up.visible {
animation: fadeUp 0.6s ease-out forwards;
animation-delay: var(--delay, 0s);
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scale In */
.anim-scale-in {
transform: scale(0.7);
}
.anim-scale-in.visible {
animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
animation-delay: var(--delay, 0s);
}
@keyframes scaleIn {
to {
opacity: 1;
transform: scale(1);
}
}
/* Slide Sides (alternating left/right) */
.anim-slide-sides {
transform: translateX(var(--slide-dir, 1) * 60px);
}
.anim-slide-sides.visible {
animation: slideSide 0.6s ease-out forwards;
animation-delay: var(--delay, 0s);
}
@keyframes slideSide {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Flip */
.anim-flip {
transform: perspective(600px) rotateY(60deg);
}
.anim-flip.visible {
animation: flip 0.7s ease-out forwards;
animation-delay: var(--delay, 0s);
}
@keyframes flip {
to {
opacity: 1;
transform: perspective(600px) rotateY(0deg);
}
}
/* โโ Reduced motion โโ */
.reduced-motion .grid-item {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* โโ Footer โโ */
.footer {
text-align: center;
padding: 2rem;
}
.btn-back {
display: inline-block;
padding: 0.7rem 2rem;
border-radius: 999px;
border: 1px solid rgba(134, 232, 255, 0.3);
color: var(--accent);
text-decoration: none;
font: 600 0.85rem / 1 "Inter", system-ui, sans-serif;
transition: all 0.25s ease;
}
.btn-back:hover {
background: rgba(134, 232, 255, 0.08);
border-color: var(--accent);
}
@media (max-width: 640px) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
padding: 0 1rem 2rem;
}
}if (!window.MotionPreference) {
const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
const __listeners = new Set();
const MotionPreference = {
prefersReducedMotion() {
return __mql.matches;
},
setOverride(value) {
const reduced = Boolean(value);
document.documentElement.classList.toggle("reduced-motion", reduced);
window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
for (const listener of __listeners) {
try {
listener({ reduced, override: reduced, systemReduced: __mql.matches });
} catch {}
}
},
onChange(listener) {
__listeners.add(listener);
try {
listener({
reduced: __mql.matches,
override: null,
systemReduced: __mql.matches,
});
} catch {}
return () => __listeners.delete(listener);
},
getState() {
return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
},
};
window.MotionPreference = MotionPreference;
}
function prefersReducedMotion() {
return window.MotionPreference.prefersReducedMotion();
}
function initDemoShell() {
// No-op shim in imported standalone snippets.
}
// โโ Demo shell โโ
initDemoShell({
title: "Staggered Grid Entrance",
category: "css-canvas",
tech: ["intersection-observer", "css-keyframes"],
});
let reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");
window.addEventListener("motion-preference", (e) => {
reduced = e.detail.reduced;
document.documentElement.classList.toggle("reduced-motion", reduced);
});
// โโ Config โโ
const ITEM_COUNT = 24;
const grid = document.getElementById("grid");
let currentStyle = "fade-up";
let observer = null;
// โโ Labels for items โโ
const labels = [
"Motion",
"Design",
"Scroll",
"Canvas",
"WebGL",
"Shader",
"Particle",
"Spring",
"Easing",
"Timeline",
"Trigger",
"Parallax",
"Morph",
"Blend",
"Filter",
"Stagger",
"Pinch",
"Orbit",
"Flow",
"Ripple",
"Glow",
"Pulse",
"Wave",
"Drift",
];
// โโ Generate grid items โโ
function generateItems() {
grid.innerHTML = "";
for (let i = 0; i < ITEM_COUNT; i++) {
const item = document.createElement("div");
item.className = `grid-item anim-${currentStyle}`;
// Compute grid position for stagger delay
const cols = getColumnCount();
const row = Math.floor(i / cols);
const col = i % cols;
const delay = row * 0.05 + col * 0.08;
item.style.setProperty("--delay", `${delay}s`);
// Hue based on position
const hue = (i / ITEM_COUNT) * 360;
item.style.setProperty("--item-hue", String(Math.round(hue)));
// For slide-sides: alternate direction based on column
item.style.setProperty("--slide-dir", col % 2 === 0 ? "-1" : "1");
item.innerHTML = `
<span class="item-number">${String(i + 1).padStart(2, "0")}</span>
<span class="item-label">${labels[i] || "Item"}</span>
`;
grid.appendChild(item);
}
setupObserver();
}
// โโ Get current column count โโ
function getColumnCount() {
if (grid.children.length === 0) return 4;
const gridStyle = getComputedStyle(grid);
const cols = gridStyle.gridTemplateColumns.split(" ").length;
return cols;
}
// โโ IntersectionObserver โโ
function setupObserver() {
if (observer) observer.disconnect();
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.15, rootMargin: "0px 0px -50px 0px" }
);
document.querySelectorAll(".grid-item").forEach((item) => {
if (!reduced) {
observer.observe(item);
} else {
item.classList.add("visible");
}
});
}
// โโ Style picker โโ
document.querySelectorAll(".style-btn").forEach((btn) => {
btn.addEventListener("click", () => {
document.querySelectorAll(".style-btn").forEach((b) => b.classList.remove("active"));
btn.classList.add("active");
currentStyle = btn.dataset.style;
// Reset and regenerate
generateItems();
// Scroll back to grid to re-trigger animations
grid.scrollIntoView({ behavior: "smooth", block: "start" });
});
});
// โโ Recalculate delays on resize โโ
let resizeTimer;
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const cols = getColumnCount();
document.querySelectorAll(".grid-item").forEach((item, i) => {
const row = Math.floor(i / cols);
const col = i % cols;
const delay = row * 0.05 + col * 0.08;
item.style.setProperty("--delay", `${delay}s`);
item.style.setProperty("--slide-dir", col % 2 === 0 ? "-1" : "1");
});
}, 200);
});
// โโ Init โโ
generateItems();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Staggered Grid Entrance โ stealthisdesign</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<span class="eyebrow">Demo 19</span>
<h1>Staggered Grid Entrance</h1>
<p class="subtitle">Scroll down to see grid items animate in with position-based stagger delays. Switch between animation styles.</p>
</header>
<nav class="style-picker">
<button class="style-btn active" data-style="fade-up">Fade Up</button>
<button class="style-btn" data-style="scale-in">Scale In</button>
<button class="style-btn" data-style="slide-sides">Slide Sides</button>
<button class="style-btn" data-style="flip">Flip</button>
</nav>
<div class="grid" id="grid"></div>
<div class="footer">
<a href="/" class="btn-back">Back to Showcase</a>
</div>
<script src="script.js"></script>
</body>
</html>Staggered Grid Entrance
Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.
Source
- Repository:
libs-genclaude - Original demo id:
19-staggered-grid
Notes
Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.