Tessella
Tessella ๐งฉ
Tessella places words and shapes in the empty space around a picture, for cards, posters and anything else with a gap to fill. Give it a picture and some phrases, and it works out where the picture is, keeps clear of it, and fits everything else into the free space, biggest words first. The name comes from the tessella, a single small tile in a mosaic.
โ๏ธ How It Works
- Pick a picture, or start from one of seven example cards. Tessella finds the artwork and tints it so you can see what will be kept clear.
- Type your phrases, one per line. Start a line with
#for a headline or##for a main phrase. - Add shapes to fill the gaps, then shuffle for a fresh arrangement until you like it. Pin what you like first and it stays put.
โจ Key Features
๐ผ๏ธ Finds the artwork The picture's own paper colour is detected automatically. Adjust the threshold, padding and speck filter if the edges need tidying. Words and shapes never land on the artwork, unless you place them there yourself.
โ๏ธ Words Fonts, set separately for headlines, main phrases and fill lines. Each kind has its own size, and any single phrase can be resized, recoloured, rotated or hidden.
โญ Shapes Six sets: Hearts, Stars, Confetti, Retro, Balloons and Flowers. Choose how many (up to 100 per set), their size, and how much the sizes vary. For each set, pick from different styles: Flat, Crayon or Ink.
๐จ Palettes Berry and Plum, Pastels and others, or pick colours from the picture itself.
๐ Shuffle and re-run Layouts are seeded, so the same settings give the same result every time, and a shuffle gives a new one.
๐ Hands-on control Drag to move, pinch or use the corner to resize, the round handle to turn. Pin pieces so they survive a shuffle. Hide a piece and it sits on a shelf; anything that didn't fit waits in one too.
๐ Card size and background Any card shape, picture framing, a custom card colour, and an optional paper texture.
๐พ Save and keep Save the finished card as a picture (PNG) at the picture's own size. Back up all your cards, or one card, to a file and import them on another device.
๐ฑ Phone first Built for touch, with a short tour the first time you open it.
๐ Light, dark and system themes.
Your cards stay on your device. No account, no sign-in, no tracking.
๐งฎ The detail, for anyone curious
The layout runs in a background worker so the page stays responsive. It places pieces by their real shapes, not boxes, tested pixel by pixel against the artwork and each other, so a curved word can tuck into a curved gap. Every layout starts from a seed, which makes arrangements repeatable. The example pictures are drawn in code, and so are the shapes. Only the fonts (and some pre-built project thumbnails) are bundled files.
| Published | 5 days ago |
| Status | Released |
| Category | Tool |
| Platforms | HTML5 |
| Author | Matt Hodges |
| Tags | cards, productivity |
| AI Disclosure | AI Assisted, Code, Graphics, Text |






Leave a comment
Log in with itch.io to leave a comment.