Made by@slashcloneSeeded image crops
@slashclone/seeded-image-crops
Give every card, profile, and page header its own cover from just a few hero images: each item gets a stable crop (a hand-picked framing, nudged per item), the same every time it loads. One small file shared by every card, so a page of cards downloads the images once. Includes a checker that previews how evenly your items spread across the crops.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
- 1---
- 2name: seeded-image-crops
- 3description: Give every card, profile, or page header its own cover from a few hero images, using a stable crop per item instead of generated art or one repeated picture. Use when a site needs varied cover art for many items but has only a handful of good images, or when generated covers look cheap.
- 4---
- 6# Seeded image crops
- 8Goal: many distinct, good-looking covers from two or three strong images. Each item (a card, a profile, a page) always gets the same crop, chosen from its key.
- 10## Steps
- 121. **Start from strong, wide images.** Two or three high-resolution renders or photos of the same world work best. If the site has light and dark themes, a day and a dusk version of the same scene let one crop work in both.
- 132. **Pick the framings by eye.** Open each image and list 8 to 16 points worth framing: a subject, a pattern, an interesting texture. Write them as `{ x, y, zoom }` (percent of the frame, zoom 1 = fill the box). Skip awkward edges and anything that reads badly at card size.
- 143. **Check the spread:**
- 15 `node scripts/check-crops.mjs --crops data/crops.json --seeds 500`
- 16 It reports how many distinct covers 500 items get, how many land on each framing, and that the same key always gets the same crop.
- 174. **Add the picker.** Copy `examples/seeded-crop.ts` into the project and put the framings in `CROPS`. For React, `examples/SeededCover.tsx` shows the component: an `<img>` with `object-fit: cover`, scaled from the crop's point inside an `overflow: hidden` box.
- 185. **Use one file for every card.** Serve the images once (a WebP around 2000 px wide is plenty) and let every card point at the same URL, so a page of cards downloads them once. Load lazily below the fold and eagerly in headers.
- 196. **Keep text readable.** Under headlines, fade the image toward the page color on the side where the text sits, and pick header framings with open space there.
- 207. **Look at it.** Open a page with many cards in both themes and confirm neighbors look different. If two framings look alike, replace one.
- 22## Rules
- 24- The crop comes from a stable key (an id or a slug), never from random numbers at render time, so covers do not change on reload.
- 25- Decorative only: empty alt text and `aria-hidden`, unless the image carries meaning.
- 26- Only use images the project owns or has the rights to.