## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/image-to-ascii/536947f7-3504-43cd-9692-a327ad82583f-1789452198-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/image-to-ascii/536947f7-3504-43cd-9692-a327ad82583f-1789452107158-full.webp
- Component on Kage: https://kage.design/component/image-to-ascii-gallery

## Before you start
Ask what kinds of outputs the user's product creates and what examples best communicate its range. Then apply these principles with original content.

Create an editorial example gallery in a two-column grid within a centered container. Begin with a section eyebrow, large monospace heading, and a short introduction. Each card should contain a large 1:1 or 4:3 before/after comparison viewport with small corner labels, a vertical draggable divider, and a circular handle. Follow it with a tiny category label, a concise title, one or two lines of explanation, and a text link. Use transparent or near-black cards (#080b0a), thin borders (#27302e), 4–6px radius, and 24px grid gaps. Keep image previews immersive and consistent in height; use object-fit: cover and lazy loading. On hover, slightly brighten the border and reveal the comparison affordance. On mobile, switch to one column.

Never: use logos, product names, copy, illustrations, or imagery from the reference.