Social Frame
Sourcecomponents/social/SocialFrame.astro
The export canvas
Every Alchemy social template sits on this frame — a real pixel box at the exact export size, so a screenshot of the canvas is the finished asset. Three formats cover the feed, stories and LinkedIn; five surfaces set the mood. Content lives inside a generous safe area so the platform UI never crops anything important.
Formats
- Portrait — 1080 × 1350 (4:5) — the tallest a feed post can be, so it takes the most screen. The same size doubles as a carousel slide.
- Story — 1080 × 1920 (9:16) — full-screen. Wider top and bottom margins keep content clear of the profile row, caption and reply bar.
- LinkedIn — 1200 × 627 (~1.91:1) — the landscape link-share card. Short and wide, so keep copy to a headline and one line.
Surfaces
- cream — the default warm Alchemy paper, dark text.
- paper — plain white, dark text.
- violet — brand violet, light text. For loud statements.
- ink — near-black, light text. Quiet and premium.
- image — a photo behind a dark wash, light text. For case shots and portraits.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
format | 'portrait' | 'story' | 'linkedin' | 'portrait' | portrait = 1080×1350 (feed + carousel). story = 1080×1920 (full-screen). linkedin = 1200×627 (landscape link share). |
surface | 'cream' | 'violet' | 'ink' | 'paper' | 'image' | 'cream' | The background. cream/paper carry dark text; violet/ink/image carry light text. |
image | string | — | Background photo. Only used with surface="image". |
overlay | number | 0.42 | Strength of the dark wash over the image (0–1), so text stays readable. |
brand | boolean | true | Show the small Alchemy logo + handle footer. |
handle | string | 'alchemy.zuerich' | The @handle shown next to the logo. |
Usage
Wrap any template content in a frame. To export, open the frame route and screenshot the .sf box at 1× — you get a pixel-perfect 1080-wide asset.
<!-- Feed post / carousel slide -->
<SocialFrame format="portrait" surface="cream">
...template content...
</SocialFrame>
<!-- Full-screen story over a photo -->
<SocialFrame format="story" surface="image"
image="/images/cases/tanner/hero.jpg" overlay={0.5}>
...template content...
</SocialFrame>Rules
Do
Keep every word and logo inside the safe area.
Pick a surface with enough contrast for the text on top.
Don't
Resize the canvas. The pixel size is the export size.
Put light text on cream or paper.