Hero with Integration Ecosystem Grid — Free HTML CSS JS Snippet

A wall of integration logos communicates breadth, but it doesn't let a visitor confirm the one tool they actually care about is there. This hero pairs a headline and CTA with a hub-and-grid visual — a glowing central "core" node surrounded by a grid of integration tiles — and a real search input that filters the grid live as a visitor types, turning a passive logo wall into a quick yes/no answer.

Filtering by attribute, not by re-rendering the DOM

applyFilter() never removes or recreates any .ieg-node element. Instead it reads each node's data-name attribute, lowercases both it and the query, and toggles two classes based on a simple indexOf substring match. Keeping every node permanently in the DOM means there's no re-render cost and no risk of losing element state (like a hover or focus outline) — filtering is purely a class toggle applied to elements that already exist.

Two classes, two distinct jobs

.ieg-node-hidden handles non-matches: it fades and shrinks the tile via opacity/transform: scale, then switches to position: absolute so it's pulled out of the grid's flow and doesn't leave a visible gap. .ieg-node-match handles the opposite case — it only applies when there's an active, non-empty query, highlighting matching tiles with a colored border and glow so a visitor gets clear positive confirmation rather than just "everything else disappeared."

Live count reflects the filtered result, not the total

countEl.textContent is updated inside the same loop that classifies each node, incrementing visibleCount only for matches. This keeps the "X integrations shown" line perfectly accurate to what's currently visible in the grid — including the un-filtered case, where every node counts as a match and the number equals the full list.

Why an empty query does not apply the match-highlight style

The matches && query !== '' condition in the .ieg-node-match toggle deliberately excludes the empty-query case — otherwise every tile in the grid would carry the "highlighted match" glow simultaneously as soon as the page loads, which would look like a rendering bug rather than intentional design. The highlight only appears once a visitor has actually typed something and narrowed the results.

The hub is a purely visual anchor, not interactive

.ieg-hub sits absolutely centered behind the grid with a radial glow, representing "your product" as the thing every integration connects to. It has no click handler or filter logic tied to it — its only job is to give the surrounding grid of tiles a visual center of gravity so the composition reads as "ecosystem" rather than "list."

Customizing it

Add more integrations by adding .ieg-node divs with a data-name attribute to #iegGrid — applyFilter() re-queries .ieg-node on page load via querySelectorAll, so any node present in the HTML is automatically included in filtering with no JavaScript changes. Swap the plain-text tiles for real logo <img> tags by adding an image inside each .ieg-node div while keeping the data-name attribute for search matching.