Motion and decor blocks
Tessolo's showy decor blocks — Orbit, Globe, Bento grid, Icon cloud and more — which need real content, performance and reduced motion.
A category of blocks that exist to look impressive. Used once, in the right spot, they make a page feel considered. Used three times they make it feel like a demo.
The category is collapsed in the Add panel by default, which tells you roughly how often you should need it.
What's in it
| Block | What it is |
|---|---|
| Bento grid / Bento card | Feature tiles of different sizes in one arrangement |
| Orbit | Icons orbiting a centre point |
| 3D globe | A draggable globe with cities marked |
| Icon cloud | A slowly rotating sphere of icons |
| Avatar stack | Stacked avatars with a "2,000+ users" line, for social proof |
| Circular progress | A ring showing a percentage |
| Scroll reveal text | A sentence that lights up word by word as you scroll |
| Animated list | A list that pushes items in one at a time, like notifications |
| Floating dock | An icon bar at the bottom that magnifies on hover |
| Magnifier | Hover an image to zoom part of it |
| Video dialog | A thumbnail with a play button that opens the video in an overlay |
Which ones need real content
Some are decoration and work with anything. Others look broken without genuine material:
- Avatar stack needs a real number. "2,000+ users" when you have twelve is the kind of claim that costs you the sale when someone checks.
- 3D globe needs cities that mean something — where your customers or offices are.
- Icon cloud needs recognisable logos. Generic icons say nothing.
- Bento grid needs features of genuinely different importance. If they're equals, use a plain grid.
Performance
The heavier ones — the globe especially — load only when a page actually uses them. A page without one never pays for it.
Still, they're the heaviest things you can put on a page. One globe on a homepage is fine. A globe, an icon cloud and a particle background on the same page is not.
Reduced motion
Visitors who've asked their device to reduce motion get static versions. Nothing disappears — the content is still there, it just doesn't move.
Which is another argument for not putting meaning into the movement itself.
Choosing
Ask what the block is saying.
A globe says "we're international". An avatar stack says "lots of people use this". A bento grid says "these features, and this one matters most".
If you can't name the claim, you're decorating — and one decoration per page is plenty.
Timelines, charts and links
Timeline, allocation chart, social icon row and copyable text blocks in Tessolo — built to replace screenshots and hand-made tables.
Header, footer and site blocks
Blocks that belong to the whole Tessolo site rather than one page: top navigation, footer, announcement bar and language switcher.