component
SlicedImage
By Magdalena Wołowiec
Details
- Magdalena WołowiecAuthor
- componentType
- 2026-05-13Published
- 2026-05-13Updated
- 2026-05-11Added
- SectionsCategories
Summary
Split any image into a customizable grid
Description
One image. One grid. Full control. Most sites use images the same way — full width, centered, predictable. Sliced Image breaks that. It takes one photo and splits it into a customizable mosaic of tiles, where you decide exactly which ones show and which ones disappear. Hide a corner. Remove every other tile. Leave just three. The same image looks completely different depending on what you keep — and that's the whole point. Built for portfolio heroes, agency headers, music and event pages, editorial layouts, and anywhere a plain rectangle feels too safe. Controls Columns & Rows — set your grid from 1×1 up to 8×8 Gap — control the breathing room between tiles Border Radius — go sharp and geometric or soft and rounded Enable Hover — adds a smooth scale and brightness effect when a tile is hovered Hover Scale — how far each tile grows on hover Hover Brightness — how much the image lightens on hover How to use it 1. Drop the component onto your canvas 2. Upload your image in the property panel 3. Set your columns and rows 4. Toggle off the tiles you don't want 5. Enable hover if you want the interaction layer That's it. No overrides, no code, no workarounds. ────────────────────── Works great for — Portfolio and agency hero sections — Music, fashion, and editorial layouts — Event and venue pages — Any section where a single image feels flat ────────────────────── Drop it in. Upload your image. Break the grid.
Introduction
Split any image into a customizable grid
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #2916