Work with us
Social MediaStable

Note Ad

Sourcecomponents/social/NoteAd.astro

The note ad

An ugly ad built to look like a screenshot of someone’s Notes app — the native chrome bar, a date line, a bold title and a plain (often ticked-off) checklist. On purpose it uses none of the brand’s design; it has to read as a private note-to-self someone happened to share. Same family as the chat ad — a screenshot, not an ad.

Pick the notes app your audience actually uses. Set it with app.

iOS Notes · Feed 1080 × 1350
Business Checklist 1080 × 1350
iOS Notes · Story 1080 × 1920
Samsung Notes · Feed 1080 × 1350

Reaction repost

The same note dropped onto a neutral background as a screenshot card, with a casual reaction line above it — the way people share a screenshot with a comment like “wer schreibt sowas in seine notizen 💀”. Wrap the ad (with bare) in <ReactionPost>.

Reaction · Feed 1080 × 1350

Parts

  • Skin — app switches the whole look: iOS Notes (yellow accents) or Samsung Notes (blue, squared).
  • Chrome bar — the app’s own back / share / done controls.
  • Title — a bold first line, like the app auto-titles a note.
  • Lines — plain body text, or a checklist (check / done). Bold a word with <b>.

Props

PropTypeDefaultNotes
app 'ios' | 'samsung' 'ios' Which Notes app to imitate — iOS Notes (yellow) or Samsung Notes.
format 'portrait' | 'story' 'portrait' portrait = 1080×1350. story = 1080×1920.
date string 'Heute 08:14' The little date/time line under the chrome bar.
title string 'Notiz an mich' The bold first line of the note.
lines {text,check,done}[] [] Body lines. Set check:true for a checklist circle, done:true to tick it. text takes <b>.

Usage

Write it like a real note-to-self — lowercase, half-finished thoughts, a checklist someone ticked off over time. The product lands as one line among honest ones.

<NoteAd
  app="ios"
  format="portrait"
  date="Heute 08:14"
  title="Was 2026 endlich klick gemacht hat"
  lines={[
    { text: 'website endlich nicht mehr peinlich', check: true, done: true },
    { text: 'in 12 wochen mit <b>Sparklin</b> gebaut', check: true, done: true },
    { text: 'link ist in meiner bio 👀', check: true, done: false },
  ]}
/>

Rules

Do

Make it look lived-in — mixed ticks, casual lines.

Bury the product in an honest list, don’t lead with it.

Don't

Brand it. No logos, no tokens — it must look native.

Highlight anything yellow. A real note doesn’t.