# Query Blog Index > A dark product blog and changelog index where typing a query or picking a topic promotes the best matching post into a large lead slot, with the rest regrouping below. Canonical: https://gsapvault.com/sections/query-blog-index-section Live demo: https://gsapvault.com/demos/query-blog-index-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | advanced | | Plugins | Flip | | Techniques | flip-layout, filter, clip-path, stagger, keyboard-navigation, progressive-enhancement, container-queries, responsive-section | | Uses Lenis | No | ## Overview Query Blog Index Section is the front page of a product blog or changelog: release notes, engineering write-ups, incident reviews and company news in one list, built so a visitor can find the latest or most relevant post and open it. The newest post leads with a large photograph, the next two sit beneath it as cards, and everything older runs as a dense table of dates, titles, version tags and topics. A command-style filter bar sits above. Type a word or a version such as v4.1 and the index ranks itself: the best match takes the lead slot, its photograph opening from the top edge, the next two become cards and the rest glide into place. Matched words light up in the titles and every topic shows how many posts it holds for the current query. The fictional Keelson CI example is dark, hairline-ruled and set in Geist with Geist Mono, with eight generated photographs of the team, their machines and their data centre. Every post is an ordinary list item with a link, date, topic, optional version and optional photo, so a buyer adds or removes posts by editing HTML. ## Features - Command-style filter that ranks posts by title, version, topic, summary and author as you type - Best match promoted into a large lead slot with a clip-path photo reveal; the next two become cards - Unchanged posts glide to their new place with GSAP Flip; filtered-out posts fade away - Topic buttons and counts generated from the markup, with live per-topic counts for the current query - Matched words highlighted in titles and matching version tags filled with the accent - Keyboard first: / focuses the filter, arrow keys walk the results, Enter opens the top result - Photo-less posts such as patch releases get a typographic version plate in the lead and card slots - Every post listed and linked with no JavaScript; tiers are pure CSS from visible order - Container-aware layout for wide pages, narrow columns and phones - Independent instances, unique IDs and exact teardown ## Use Cases - Software products publishing release notes, engineering posts and incident reviews - Studio or agency journals with a mix of case notes, news and long reads - Independent publications that want readers to find a back-issue article quickly - Documentation sites with a changelog and announcement feed ## Vibe-Code Ready Setup This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works The section starts as one ordered list of posts, newest first. CSS reads visible order with :nth-child(of S): the first visible post is laid out as the lead, the next two as cards, the rest as table rows. With no JavaScript that is simply the newest three and the archive. The script reads every post's title, topic, version, summary, author and date from the markup, builds the topic buttons with their counts and reveals the filter bar. Each change of query or topic scores the posts, reorders the list so the results come first in rank order and marks the rest as filtered out. Before that change it records the posts' positions with Flip.getState. Posts that keep their tier glide from the recorded positions with Flip.from; posts that change tier, such as a row promoted to the lead, stage in afresh, their photo frame opening with a clip-path while the image settles from a slight zoom and their lines rise in order. Typing quickly interrupts nothing awkwardly: each update captures the current mid-flight positions, kills the previous Flip and speeds any unfinished reveals to their end, so the index always settles on the last query. Reduced motion applies every change instantly, and teardown restores the original markup, order and titles. ## Documentation How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### Quick Start Copy these into your project: - the `
` element from `index.html`, between the `EXTRACT START` and `EXTRACT END` comments - `assets/style.css` - `assets/script.js` - `assets/img/` (or your own photographs) Load the fonts and styles, then GSAP, Flip and the section script after the markup: _Code snippet omitted: it ships with the download._ Everything outside the `
` in `index.html` (the page background and body margin) is demo furniture. No build step is needed. ### Make it yours #### Posts Each post is one `
  • ` inside `
      `, newest first. To add a post, copy a whole `
    1. ` and edit it; to remove or reorder posts, delete or move whole `
    2. ` elements. Keep the list in date order: with an empty filter the first post is the lead and the next two are cards. Inside each post: | What | Where | | --- | --- | | Link and title | `.kql-post__title a` (`href` and text). Keep the title plain text; it is highlighted while filtering | | Date | `