Social MediaStable

Brand Drop

Sourcecomponents/social/BrandDrop.astro

The Brand Drop

The reveal post. A photo of a client’s finished brand fills the canvas, signed “Distilled by Alchemy” with their URL and stamped with the rotating Brand Drop badge. On stories it closes with a swipe-up to the full brand. Built on the Social Frame in image mode.

Story · 1080 × 1920 1080 × 1920

LinkedIn · 1200 × 627 1200 × 627

Parts

The photo — a real shot of the client’s brand assets under a dark wash. It carries the whole post, so pick a strong image.
“Distilled by Alchemy” + URL — top-left. The signature and where to go next.
Brand Drop badge — the rotating stamp. Lower-left on stories, right on LinkedIn.
Footer — the swipe-up CTA on stories, the Alchemy logo + handle on LinkedIn.

Props

Prop	Type	Default	Notes
`format`	'story' \| 'linkedin'	`'story'`	story = 1080×1920 (full-screen). linkedin = 1200×627 (landscape).
`image`	string	`—`	Photo of the client’s finished brand assets — brand book, cards, packaging. Required.
`url`	string	`—`	The client’s site, shown under "Distilled by Alchemy". e.g. "www.dth.ch". Required.
`overlay`	number	`0.36`	Strength of the dark wash over the photo, so the white text reads.
`badge`	string	`'…/brand-drop-3.svg'`	The rotating Brand Drop badge asset.
`cta`	string	`'Click here to see full brand'`	Story only — the CTA line at the bottom.
`handle`	string	`'alchemy.zuerich'`	The @handle in the LinkedIn footer.

Usage

One drop per client. Point the URL at their live site.

<!-- Story -->
<BrandDrop
  format="story"
  image="/images/cases/dth/spread.webp"
  url="www.dth.ch"
/>

<!-- LinkedIn -->
<BrandDrop
  format="linkedin"
  image="/images/cases/dth/spread.webp"
  url="www.dth.ch"
/>

Rules

Use a photo that shows the brand in the real world.

Raise the overlay on busy or light photos so the text holds.

Don't

Cover the client’s work with the badge — keep it in a corner.

Add a headline. The signature and badge are the whole message.