Mosaic Unveil

Mosaic Unveil is a WebGL reveal for any image. The picture builds itself out of square, hexagon or dot tiles that pop in with a glowing edge, start as flat mosaic colors, then sharpen and merge into one seamless image. Drive it with scroll progress, entering the viewport, hover, click or a loop. With no image set it reveals a built-in three-color gradient, so it looks good the moment you drop it in.

Customizations

• Content: image with Fill or Fit, three gradient colors used when no image is set, backdrop color (can be transparent)

• Tiles: shape (Square, Hexagon, Dot), size in px, gap, corner roundness, mosaic stage length

• Reveal: trigger (In view, Scroll, Hover, Click, Loop), direction (Up, Down, Left, Right, Diagonal, Radial, Random, From cursor), stagger, jitter, pop overshoot, duration, loop hold, replay on re-enter, scroll start and end lines

• Glow: color and intensity of the reveal front

• Motion: respect or ignore reduced motion, reveal amount shown on the Framer canvas

• Alt text for screen readers

• Accepts hex, rgb(), rgba() and color tokens; renders a static fallback in previews; pauses when off-screen

Use cases

• Hero images that assemble when the page loads

• Scroll-linked reveals for case study and portfolio images

• Product shots that unveil on hover or click

• Section dividers and looping brand visuals