Unbreakable

A scroll-driven hero section for Framer that assembles itself in front of your visitor.

Drop it at the top of your page. As your visitor scrolls, floating pieces fly in and lock together into your picture, a statement lands in the centre, and the hero resolves into your headline, your words and your call to action — with a full navbar built in: glitch wordmark, five links with hover underlines, and a Sign In button.

Make it yours — 38 controls, every one live:

• Master Image — one image drives everything. The base, the puzzle tiles and the flying pieces are all cut from it at runtime, so swapping the image rebuilds the whole assembly around your artwork.

• Every colour — background, panel, navbar, headline, body, border, CTA.

• Every word — logo text, all three scenes' copy, the statement, the CTA label.

• Every link — a separate link control for Home, About, Gallery, Resolve, Contact, plus Sign In and the main CTA.

• Hands and figures — show or hide the hands, bring them back for the finished picture, toggle the floating figures.

It fills any screen edge to edge — the navbar is built outside the scaled stage, so it never crops, never breaks. Scroll, touch and arrow keys all drive the three scenes, and the scroll lock always releases, so the rest of your page is never trapped.

Best results: give the Master Image a wide landscape crop (around 1200×773) so the puzzle seams land perfectly.

By @buildinshadow — support via X.