Field Day Sound, Filter Gallery
What it does
A two-column masonry work archive for an independent audio studio, paired with oversized discipline filters; clicking a filter splits its heading into per-character spans and tweens each span's font-size with a staggered power2.out ease while gsap fades the item grid out and back in to swap the filtered items. The giant active word multiplies over the photo grid like an ink stamp.
How it's built
| Category | gallery |
|---|---|
| Tech | gsap |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Filter Gallery with Letter-by-Letter Swelling Headings
## Goal
Build a full-screen editorial gallery on a white page: a **two-column staggered (masonry-ish) image grid** fills the left, and a stack of **oversized category filters** sits bottom-right. Clicking a filter is the star effect — the clicked category's heading is split into per-character `<span>`s and its **`font-size` tweens up letter-by-letter with a stagger** (a small word swelling into a giant magenta headline), the previously-active heading simultaneously **shrinks back down** the same way, and the item grid **cross-fades out and back in** to swap in only the items matching that category.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) only — **no GSAP plugins**, no smooth-scroll library.
```js
import gsap from "gsap";
```
The character-splitting is done by hand (not SplitText). Run everything inside a `DOMContentLoaded` listener.
## Layout / HTML
Class names are load-bearing (JS and CSS query them). Static markup is minimal — the gallery items are injected by JS.
```html
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.