Snaps project

Mixed snap + embed heights

NEYN-11574 · Layout exploration — 4 options

A cast with a snap (event card, ~230px tall) and a link embed (~50px) sit side-by-side today — height mismatch is stark. These 4 options explore how to handle mixed embed heights gracefully.

Cast.tsx CastEmbed.tsx packages/mock-data · Cast.embedImage
Layout options
A — Side by side current
All embeds in a horizontal row, natural heights
9:41●●●
Home
Following
For you
p
pichi ✓
in /farcaster
1h
the Farcaster Community Call
Happening NOW!
Agenda:
events.farcaster.xyz
i
← Home
↑ Share
✓ Going
↗ Full
Farcaster
Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Monthly call — what we're working on next. Q&A, everyone welcome.
Going (168)
neynar.notion.site
@Today | Notion
↑ height mismatch
2
3
8
stark height mismatch link card looks orphaned no layout shift familiar for multi-embed casts
B — Snaps first, links below proposed
Separate rows by embed type — snaps above, media/links below
9:41●●●
Home
Following
For you
p
pichi ✓
in /farcaster
1h
the Farcaster Community Call
Happening NOW!
Agenda:
events.farcaster.xyz
i
← Home
↑ Share
✓ Going
↗ Full
Farcaster
Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Going (168)
📝
neynar.notion.site
@Today | Notion
2
3
8
clean type separation snaps get full width link still visible longer cast height what if 2 snaps + 2 links?
C — Normalized height explore
Side-by-side, link embed expands to match snap height
9:41●●●
Home
Following
For you
p
pichi ✓
in /farcaster
1h
the Farcaster Community Call
Happening NOW!
events.farcaster.xyz
i
← Home
↑ Share
✓ Going
↗ Full
Farcaster Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Going (168)
📝
neynar.notion.site
@Today | Notion
2
3
8
consistent row height preserves side-by-side layout inflated link card looks odd forces link content to center-align worse if snap is shorter
D — Always stacked explore
No side-by-side — every embed full width, stacked vertically
9:41●●●
Home
Following
For you
p
pichi ✓
in /farcaster
1h
the Farcaster Community Call
Happening NOW!
events.farcaster.xyz
i
← Home
↑ Share
✓ Going
↗ Full
Farcaster Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Going (168)
📝
neynar.notion.site
@Today | Notion
2
3
8
zero height mismatch simplest rule — always stack great for 3+ embeds cast takes much more vertical space side-by-side image pairs look worse breaks existing 2-image grid pattern
Desktop — 680px feed column · multiple embed combos

Each block shows the same 5 cast scenarios under that layout rule: ① snap+link  ·  ② snap+snap  ·  ③ 3 links  ·  ④ snap+3 links (overflow)  ·  ⑤ image+link. Feed column = 680px — same as shell's AppLayout.tsx.

A — side-by-side (current) · h-scroll on overflow
① snap + link
p
pichiin /farcaster
1h
the Farcaster Community Call — Happening NOW!
events.farcaster.xyzi
← Home
↑ Share
✓ Going
↗ Full
Farcaster Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Monthly call — Q&A, everyone welcome.
Going (168)
📝
neynar.notion.site
@Today | Notion
snap ~190px · link ~52px — stark mismatch
💬 2🔁 3♡ 8
② snap + snap
e
evein /art
2h
two mints dropping today
zora.coi
← Home
↑ Share
✦ Mint
↗ Full
Generative Skyline #001
Generative Skyline
0.000777 ETH · 124 minted
Ends in 6h
manifold.xyzi
← Home
↑ Share
✦ Mint
↗ Full
Night City #042
Night City
Free · 88 minted
Open edition
💬 5🔁 12♡ 44
③ 3 links
c
carol
3h
weekend reading list
📖
paragraph.xyz
The case for sufficiently decentralized
🧵
warpcast.com
Thread: why Farcaster protocol wins
🎙
spotify.com
Bankless: Crypto summer 2025
💬 1🔁 2♡ 14
④ snap + 3 links — overflow
d
davein /dev
4h
everything you need to get started with mini apps this week
miniapps.farcaster.xyzi
← Docs
↑ Share
⚡ Try
↗ Full
Mini App SDK v2
Mini App SDK v2
Released May 27
Notifications, wallet, haptics.
4,200 installs
📄
docs.farcaster.xyz
Mini apps quickstart
🐙
github.com
farcasterxyz/miniapp-template
🎬
youtube.com
Building your first mini app (8 min)
💬 9🔁 21♡ 87
⑤ image + link
f
frank
6h
there are two types of people
image embed
🔗
knowyourmeme.com
Two types of people meme origin
image 1.91:1 (~160px tall) vs link ~52px — same class of problem
💬 22🔁 6♡ 89
B — snaps first, links below
① snap + link
p
pichiin /farcaster
1h
the Farcaster Community Call — Happening NOW!
events.farcaster.xyzi
← Home
↑ Share
✓ Going
↗ Full
Farcaster Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Monthly call — Q&A, everyone welcome.
Going (168)
📝
neynar.notion.site
@Today | Notion
💬 2🔁 3♡ 8
② snap + snap
e
evein /art
2h
two mints dropping today
zora.coi
← Home
↑ Share
✦ Mint
↗ Full
Generative Skyline #001
Generative Skyline
0.000777 ETH · 124 minted
Ends in 6h
manifold.xyzi
← Home
↑ Share
✦ Mint
↗ Full
Night City #042
Night City
Free · 88 minted
Open edition
💬 5🔁 12♡ 44
③ 3 links (no snaps — falls through to links-only row)
c
carol
3h
weekend reading list
📖
paragraph.xyz
The case for sufficiently decentralized
🧵
warpcast.com
Thread: why Farcaster protocol wins
🎙
spotify.com
Bankless: Crypto summer 2025
💬 1🔁 2♡ 14
④ snap + 3 links
d
davein /dev
4h
everything you need to get started with mini apps this week
miniapps.farcaster.xyzi
← Docs
↑ Share
⚡ Try
↗ Full
Mini App SDK v2
Mini App SDK v2
Released May 27
Notifications, wallet, haptics.
4,200 installs
📄
docs.farcaster.xyz
Mini apps quickstart
🐙
github.com
farcasterxyz/miniapp-template
🎬
youtube.com
Building your first mini app (8 min)
💬 9🔁 21♡ 87
⑤ image + link
f
frank
6h
there are two types of people
image embed
🔗
knowyourmeme.com
Two types of people meme origin
💬 22🔁 6♡ 89
C — normalized height (link inflated to match snap)
① snap + link
p
pichiin /farcaster
1h
the Farcaster Community Call — Happening NOW!
events.farcaster.xyzi
← Home
↑ Share
✓ Going
↗ Full
Farcaster Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Going (168)
📝
neynar.notion.site
@Today | Notion
💬 2🔁 3♡ 8
② snap + snap — both equal height already
e
evein /art
2h
two mints dropping today
zora.coi
← Home
↑ Share
✦ Mint
↗ Full
Generative Skyline #001
Generative Skyline
0.000777 ETH · 124 minted
Ends in 6h
manifold.xyzi
← Home
↑ Share
✦ Mint
↗ Full
Night City #042
Night City
Free · 88 minted
Open edition
💬 5🔁 12♡ 44
③ 3 links — all inflated to equal height
c
carol
3h
weekend reading list
📖
paragraph.xyz
The case for sufficiently decentralized
🧵
warpcast.com
Thread: why Farcaster protocol wins
🎙
spotify.com
Bankless: Crypto summer 2025
💬 1🔁 2♡ 14
④ snap + 3 links — link tiles inflate to snap height
d
davein /dev
4h
everything you need to get started with mini apps this week
miniapps.farcaster.xyzi
← Docs
↑ Share
⚡ Try
↗ Full
Mini App SDK v2
Mini App SDK v2
Released May 27
4,200 installs
📄
docs.farcaster.xyz
Mini apps quickstart
🐙
github.com
farcasterxyz/miniapp-template
🎬
youtube.com
Building your first mini app
💬 9🔁 21♡ 87
⑤ image + link
f
frank
6h
there are two types of people
image embed
🔗
knowyourmeme.com
Two types of people meme origin
💬 22🔁 6♡ 89
D — always stacked, full width
① snap + link
p
pichiin /farcaster
1h
the Farcaster Community Call — Happening NOW!
events.farcaster.xyzi
← Home
↑ Share
✓ Going
↗ Full
Farcaster Community Call
the Farcaster Community Call
May 27, 3:00 PM EDT
Monthly call — Q&A, everyone welcome.
Going (168)
📝
neynar.notion.site
@Today | Notion
💬 2🔁 3♡ 8
② snap + snap
e
evein /art
2h
two mints dropping today
zora.coi
← Home
↑ Share
✦ Mint
↗ Full
Generative Skyline #001
Generative Skyline
0.000777 ETH · 124 minted
Ends in 6h
manifold.xyzi
← Home
↑ Share
✦ Mint
↗ Full
Night City #042
Night City
Free · 88 minted
Open edition
💬 5🔁 12♡ 44
③ 3 links
c
carol
3h
weekend reading list
📖
paragraph.xyz
The case for sufficiently decentralized
🧵
warpcast.com
Thread: why Farcaster protocol wins
🎙
spotify.com
Bankless: Crypto summer 2025
💬 1🔁 2♡ 14
④ snap + 3 links — all stacked, tallest option
d
davein /dev
4h
everything you need to get started with mini apps this week
miniapps.farcaster.xyzi
← Docs
↑ Share
⚡ Try
↗ Full
Mini App SDK v2
Mini App SDK v2
Released May 27
Notifications, wallet, haptics.
4,200 installs
📄
docs.farcaster.xyz
Mini apps quickstart
🐙
github.com
farcasterxyz/miniapp-template
🎬
youtube.com
Building your first mini app (8 min)
💬 9🔁 21♡ 87
⑤ image + link
f
frank
6h
there are two types of people
image embed
🔗
knowyourmeme.com
Two types of people meme origin
💬 22🔁 6♡ 89
[Draft — pending direction from Rish]

Recommendation: Option B — snaps row first, media/links row below. Clean type separation, snaps get full width (they deserve it — they're interactive), link embeds sit below without competing for height. Consistent with how Warpcast handles rich + plain embeds today.

Out of scope this pass: 3+ embeds of same type (multiple snaps), video embeds, image pairs (2×image still side-by-side), snap without any link embed.