May
Explore the dynamic evolution of modern art…
${month}
`), then an **empty** `.card-content`, then call `generatePads(card, items.length, items)`, then append the card to `.container`. ### Grid generation — `generatePads(card, activePadCount, items)` ```js const rowsConfig = [7, 7, 7, 7, Math.floor(Math.random() * 3) + 2]; // 5 rows: four of 7, last of 2–4 const clickablePads = []; rowsConfig.forEach((padCount, rowIndex) => { const row = document.createElement("div"); row.classList.add("row"); for (let i = 0; i < padCount; i++) { const pad = document.createElement("div"); pad.classList.add("pad"); row.appendChild(pad); // only the MIDDLE rows are eligible to become active (skip first and last row) if (rowIndex !== 0 && rowIndex !== rowsConfig.length - 1) clickablePads.push(pad); } card.appendChild(row); }); shuffleArray(clickablePads); // Fisher–Yates in place setActivePads(clickablePads, card, activePadCount, items); ``` So every card has **5 rows**: rows 0–3 hold 7 pads each and the last row holds a random 2–4 pads. The **eligible ("clickable") pool is rows 1, 2, 3 only** (21 pads); the top row and the last row are never activated. `shuffleArray` is a standard in-place Fisher–Yates shuffle. ### Activating pads — `setActivePads(clickablePads, card, activePadCount, items)` Take the **first `activePadCount`** pads of the shuffled pool (`activePadCount` === number of items for that month). For each such `pad` at index `i`: - `pad.classList.add("active")`. - Paint it a **random** color: `pad.style.backgroundColor = activeColors[Math.floor(Math.random()*activeColors.length)]`. - Attach a **click** handler (below). The item shown is `items[i]` — the i-th active pad maps to the i-th data item. ### The reveal (click on an active pad) — the star tween On click: 1. **Raise this pad above its siblings** so its growth covers the card: `clickablePads.forEach(p => p.style.zIndex = "0"); pad.style.zIndex = "1";`. 2. Populate `card.querySelector(".card-content").innerHTML` with the Back button + three `.card-item` blocks (img / copy / copy.link) from `items[i]` (see HTML above). 3. **Flood-fill:** scale the clicked pad up 20×: ```js gsap.to(pad, { scale: 20, duration: 0.3, onComplete: () => { /* step 4 + 5 */ } }); ``` The pad is a 50×50 rounded square; at `scale:20` it becomes a 1000×1000 block of its color that overflows and paints the entire 460×400 card (clipped by the card's `overflow:hidden`). No ease specified → GSAP default `power1.out`. 4. **Fade the panel in** (inside the scale's `onComplete`): `gsap.to(cardContent, { opacity: 1, pointerEvents: "all", duration: 0.075 })` — the `.card-content` (z-index 2) becomes visible and interactive almost instantly over the flooded color. 5. **Fly the three items in with an elastic stagger** (also in the same `onComplete`, started together with step 4): ```js gsap.fromTo( cardContent.querySelectorAll(".card-item"), { y: 100, rotation: () => gsap.utils.random(-30, 30), opacity: 0 }, { y: 0, rotation: 0, opacity: 1, duration: 2, ease: "elastic.out", stagger: 0.1 } ); ``` Each of the 3 `.card-item` blocks starts **100px below**, **transparent**, and **rotated a random amount between −30° and +30°** (the `rotation` FROM value is a **function** so every item gets its own random tilt), then springs to `y:0, rotation:0, opacity:1`. `duration:2`, `ease:"elastic.out"` (GSAP's default `elastic.out(1, 0.3)` — a pronounced overshoot-and-settle bounce), `stagger:0.1` so item 2 starts 0.1s after item 1 and item 3 0.1s after item 2. The result: image, then title card, then link row each drop in and wobble to rest. ### The reversal (click "Back") A click handler on `card.querySelector("button")`: ```js gsap.to(cardContent, { opacity: 0, pointerEvents: "none", duration: 0.2, onComplete: () => { gsap.to(pad, { scale: 1, duration: 0.3, onComplete: () => { pad.style.zIndex = "0"; cardContent.style.opacity = "0"; cardContent.style.pointerEvents = "none"; gsap.set(cardContent.querySelectorAll(".card-item"), { clearProps: "all" }); } }); } }); ``` Sequence: the panel **fades out** (`duration:0.2`), then the pad **shrinks back** from 20× to `scale:1` (`duration:0.3`, default ease), then state is reset — pad z-index back to 0, panel forced transparent & click-through, and `clearProps:"all"` on the `.card-item`s wipes the inline transforms so a re-open animates cleanly from scratch. After this the same (or another) active pad can be clicked again. ### Timing summary (one open→close cycle) open pad scale→20 (0.3s) → [panel fade-in 0.075s ∥ 3 items elastic fly-in, 2s each, 0.1s stagger] … Back → panel fade-out 0.2s → pad scale→1 (0.3s) → reset. ## Assets / images **8 distinct editorial / product detail photos**, each dropped into a fixed 200px-tall rounded well with `object-fit:cover` (source aspect ratios vary — landscape, portrait and square all work). They are moody, single-subject studio/product shots on dark or neutral backgrounds (e.g. a glossy 3D app icon on grey, a frosted cosmetic bottle catching a shaft of light, a kraft-paper product box on wood, a white wireframe figure on black, a spotlit pump bottle, a metallic bottle in a gift tin, numbered capsule containers on black, a phone screen glowing a single word in the dark). Any set of 8 clean, high-contrast product/editorial images reads correctly. There are **10 item slots** across the four months (4+1+3+2), so two images are reused (the two used by the first card also serve the last card). No logos or real brand marks. ## Behavior notes - **Per-load randomness:** the last row's pad count (2–4), which pads become active (shuffled pool), and each active pad's color (from the 4-color set) are re-randomized every page load — no two loads look identical. Active-pad **count** per card is deterministic (== that month's item count). - **Interaction is click-only** — there is no scroll, hover, or load animation; the grid sits still until an active pad is clicked. Non-active pads have `pointer-events:none` and never respond. - The page itself is a simple vertical stack of cards (`height:150%` body) that scrolls normally; each card animates independently and self-contained inside its own `overflow:hidden` box. - Only one panel is meaningfully open per card at a time; opening a different active pad re-fills the same `.card-content`. No reduced-motion branch is required. - Desktop and mobile both work; below 900px cards and pads shrink per the media query.