Mosaic Index

Mosaic Index - Big-type services list with a pixel-mosaic image reveal.

A services list for Framer with a hover image reveal built from pixel tiles. Mosaic Index turns a plain services section into the part of the page people stop on and doubles as a projects, portfolio or case study index.

Hover a row and its image assembles out of tiles, landing just past where that row's name ends. It lands somewhere different on every row and moves with your wording instead of parking in a fixed slot.

Every part is a property control.

REVEAL — Mosaic, fade, scale, wipe or blur. Tile grid up to 40×40, assembly order (random, centre-out, edges-in, or any direction), plus jitter, duration, spread, exit ratio and easing.

PLACEMENT — Hug Name drops the image past each service name. Alternate swings between there and the far edge, Scatter gives every row its own spot, Edge Peek crops against the section edge. Or pin it left, centre or right, with tilt and slide-in.

CURSOR — Following the pointer, the image banks into your direction of travel, stretches with speed, drags the photo inside its frame, blurs as you sweep, and trails up to three ghost copies on softer springs. The mosaic even assembles from the side you arrived from, and everything settles to rest when you stop.

CONTENT — Number, name, summary, body and tag chips per row, each optional. Body and tags open on hover, stay open, or stay off. Independent fonts and colours, inline or stacked rows, hairline rules, per-row image size overrides, and links with custom CTA labels.

Responsive by default — fluid type, flexible columns and built on Framer Motion. It honours prefers-reduced-motion, skips coarse pointers by default, and pins a row as hovered on the canvas so you can style the reveal while you design.

Made for agency, studio and freelance sites: services sections, project indexes, portfolio lists, case study menus, interactive big-type navigation and animated hover gallery layouts.