HaveInsights FlowCraft
FlowCraft · Live demo

FlowCraft Portfolio Grid

Click a category and watch the non-matching projects fade away while the rest glide into place. This demo runs the same app.js that comes with the paid grid.

Sample projects. These six buildings are illustrations made for this demo. You replace them with your own project photos and details.

Try it

  1. Pick a category. The button you choose turns solid so it's clear which filter is on.
  2. Watch the grid. Other projects fade out, and the matching ones slide together to fill the gaps.
  3. Go back to All. Every project returns. Clicking quickly between filters never leaves cards stuck halfway.

Our work

Recent projects

Browse a selection of residential, commercial and industrial builds (sample projects).

Modern two-storey family home with a dark upper storey, large windows and a garden pathResidential

Cedar Lane Residence

New build · 2,400 sq ft

A two-storey family home with an open-plan ground floor and large south-facing windows.

Small backyard cottage with pale siding, a sliding glass door and a fenced gardenResidential

Garden Cottage ADU

Backyard cottage · 600 sq ft

A detached one-bedroom cottage built behind an existing home, with its own entrance.

Brick café storefront with a green awning and large lit windowCommercial

Harbor Coffee Fit-Out

Storefront & interior · 1,800 sq ft

A full café fit-out: new storefront, awning, seating area and service counter.

Eight-storey glass office tower against a blue sky, between lower buildingsCommercial

Westfield Office Tower

Facade renovation · 8 floors

A glass curtain-wall replacement on an eight-storey office building, floor by floor.

Large grey warehouse with an orange stripe, four loading docks and a delivery truckIndustrial

Riverside Distribution Center

4-dock warehouse · 60,000 sq ft

A distribution warehouse with four loading docks and a reinforced truck yard.

Manufacturing plant with a sawtooth roof and two chimneys at sunsetIndustrial

Summit Manufacturing Plant

Production expansion · 42,000 sq ft

A new production hall with a sawtooth roof added to an operating plant.

Tell us where to reach you and we'll reply with ideas and a quote.

How it works

How the grid rearranges smoothly

Hiding cards makes the others jump to new spots. app.js uses a technique called FLIP to turn that jump into a glide, and CSS transitions do the actual animating. No libraries.

  1. Fade outCards that don't match the category fade and shrink slightly, then are removed from the grid.
  2. Measure the jumpEach remaining card's position is recorded before and after, so the script knows how far it moved.
  3. Glide into placeThe card is shifted back to its old spot instantly, then released, so it slides to its new spot.

Your own categories: give a button data-filter="landscaping" and use the same word in the cards' data-category. A card can belong to several categories at once.

<button data-filter="residential">
  Residential
</button>

<article class="pf-card …"
  data-category="residential">
  <img src="assets/images/project-1.jpg" …>
  <h3>Cedar Lane Residence</h3>
</article>
The buttons' counts and the active state are handled for you. To add a project, copy a card and change its image, text and category.

What the full version includes

Delivered as a ZIP download through Payhip, with a README.txt setup guide and an optional .htaccess for Apache/Hostinger caching.

  • index.htmlFilter buttons and six sample cards, styled with Tailwind CSS
  • app.jsFiltering, the smooth rearranging animation and the quote form, commented step by step
  • style.cssFade and scale transitions and the active filter state
  • assets/images/Six sample project images to replace with your own

Requirements

  • Any web host, or none. The grid also runs when index.html is opened directly from your computer.
  • Your own project images. Any size works; a 4:3 shape (for example 1200 × 900) fits the cards best.
  • A form endpoint to receive leads (optional). Any service that accepts a JSON POST, for example Formspree, Make or Zapier. Until you add one, the quote form sends nothing and says so.
  • An internet connection for visitors. Tailwind CSS loads from its public CDN.
  • No npm install or build step. Upload the files and the grid runs.

Get the Portfolio Grid

Start with the free static shell to check the layout, or get the full version with the working filters you just tried.

Free

Free Static HTML Shell

The grid's layout, filter buttons and six sample cards with images, so you can review the design and markup in your own project.

  • Complete visual layout and sample images
  • Sample structure and markup
  • Does not include the filtering or animation logic
Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Portfolio Grid — $67

The working filterable grid you just tried, ready for your own projects and categories.

  • Category filters with counts and a clear active state
  • Cards fade out and the grid glides into place, no jumping
  • Built-in "Get a Free Quote" form sends visitor leads to your form service
  • Add projects or categories in the HTML, no JavaScript changes
  • No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript
Buy the Full Portfolio Grid — $67

Checkout and download are handled by Payhip.

Back to the FlowCraft catalogue to see the other components.