Sticker Cloud

Who it is for, as stickers: a heading and a line beside a cloud of rounded labels in the palette's blocks, each tilted a little its own way, coming in one after another as the cloud enters the screen (Reveal). A clientele, the kinds of event a venue hosts, the cuisines a kitchen cooks. The labels are a list, read in order and named by the heading. Zero JavaScript of its own.

Sample clients

Who it works with

Businesses where the look of the place is part of what people pay for.

Restaurants
Cafés
Villas
Beach clubs
Spas
Boutiques

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript of its own

0 B

Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.

CSS 12.0 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 105 · Firefox 110 · Safari 16; needs container-units.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/sticker-cloud

src/pages/index.astro

---
import StickerCloud from '@/components/moonarc/pro/StickerCloud.astro';
---
<StickerCloud
  eyebrow="Clients"
  headline="Who we work with"
  copy="Businesses where the look of the place is part of what people pay for."
  items={['Restaurants', 'Cafés', 'Villas', 'Beach clubs', 'Spas', 'Boutiques']}
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal.

Props

Prop	Type	Default	Description
`items`	`string[]`	none	The labels, in order.
`eyebrow`	`string`	none	A short line above the heading.
`headline`	`string`	none	The heading; it names the list. Slot "headline" wins and may hold an <em>.
`copy`	`string`	none	A line under the heading. Slot "copy" wins.
`blocks`	`(1 \| 2 \| 3 \| 4 \| 5)[]`	`[1, 2, 3, 4, 5]`	The blocks the stickers take in turn.
`tilts`	`number[]`	`[-3, 2, -1.5, 3, -2.5, 1.5]`	The tilts the stickers take in turn, in degrees.
`label`	`string`	none	Accessible name of the list; unset, the heading names it.
`level`	`2 \| 3`	`2`	Heading level.
`tone`	`'surface' \| 'muted' \| 'ink' \| 'brand'`	`unset (paints nothing)`	The section's ground; the stickers keep their blocks.
`density`	`'compact' \| 'cozy' \| 'roomy'`	`'cozy'`	Block padding ×0.8 / ×1 / ×1.25 through --ma-density.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-stickers.ma-stickers__copy.ma-stickers__eyebrow.ma-stickers__head.ma-stickers__headline.ma-stickers__inner.ma-stickers__list.ma-stickers__sticker

Slots

slot="eyebrow"slot="headline"slot="copy"

Reduced motion

The stickers are in place, tilted, with no entrance.

With `ClientRouter`

Inherits Reveal; nothing of its own to rebind.

Why it is built this way

Six tilts in a fixed order: the cloud looks hand-placed and is the same on every build and in every screenshot.
The tilts stay under 3 degrees: past that a label looks as if it fell over.
Each sticker's text is its block's own pair, picked by the palette to read at 4.5 : 1, so any order of blocks is safe.

Replaces: Tag clouds (Framer templates). See the migration table.

Scroll Reveal

Scroll

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

every browserscroll

Sample services

Book one shoot, or hand over the whole month.

All services and prices

01
Social media
The plan, the posts and the replies, every month, for one channel or three.
- Content plan
- Posting
- Community
- Reports
From 4.5 m a month
02
Shoots
Photo and video days for a new menu, a room or a launch.
- Photo
- Video
- Edit
From 2.5 m a day
03
Design
Menus, posters and the sets a feed is made of.
- Menus
- Posters
- Templates
From 1.2 m

Block Cards

Pro

What is on offer, as colour blocks: each card paints one of the palette's blocks and carries a drawing in its corner (Motif), an index, a name, a line, chips for what it includes and a foot with a price and a round arrow.

newly · Chrome 105 · Firefox 121 · Safari 15.4hover

Logo Wall

Pro

A "trusted by" section: a heading, a strip of greyscale logos drifting past that colour up on hover, and optionally the same logos as a hairline grid revealed with a stagger.

every browseralwaysscroll

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown