UI Distiller

REPORT.mdpatterns.json

• [01] Pixel image reveal image-effect · canvas · scroll Images enter as 80px blocks and de-pixelate over 2.2s — a canvas downscale drawn back up with smoothing off, plus a blur that fades with the blocks. Medium fidelity: high score 4.8 trigger: intersection Open demo → README
• [02] Native dialog slide-over modal · motion · microinteraction A real <dialog> panel animated entirely in CSS with transition-behavior: allow-discrete and @starting-style, its edge chosen by a data attribute. Easy fidelity: high score 4.7 trigger: click Open demo → README
• [03] Reciprocal-scale card hover cards · hover · layout The frame scales to 0.913 × 0.861 and the picture to its exact reciprocal, so the crop tightens while the photograph stays pixel-identical. Easy fidelity: high score 4.3 trigger: hover Open demo → README
• [04] :has() dimming mega menu menu · navigation · hover Hovering one row dims every sibling to 54% through a single :has() selector, draws a hairline, and staggers the sub-list via a --delay custom property. Easy fidelity: high score 4.1 trigger: hover Open demo → README
• [05] Bracket hover marks microinteraction · navigation · typography Two 4px pseudo-elements slide in as [ and ] around a nav label — one border definition rotated 180° to make its own mirror, with no reflow. Easy fidelity: high score 3.8 trigger: hover Open demo → README