StorytellerBeta — inline widget, tightened
It's a 16:9 unit dropped inside or at the end of an article. Same shape on desktop and mobile, only the dimensions change. Auto-advances like IG stories. Engagement chrome stays minimal — 3 thin strips around one image.
How it works — the whole thing in 4 lines
1. Auto-loopOne 16:9 frame. Auto-advances every 6s. Top progress bars show how many cards left.
2. Tap-drivenTap left half = back. Tap right half = next. Tap anywhere on title = open story (or click CTA on ad).
3. Filter via tabsTop tab strip filters the deck. Choice persists in cookie.
4. Three card typesStory, video ad, poll. All same shape, all play in the same loop.
Desktop — inline in article (~600px column)
In context
Election 2027: What the polls show
Όλα
Πολιτική
Αθλητικά
Tech
Lifestyle
342 reading
🔥 TRENDING
‹
›
iefimerida.gr • 2h
Άρσεναλ – Ατλέτικο Μαδρίτης 1-0: Ο Σάκα την έστειλε στον τελικό
~568 × 380px (inside 600px article column)
Mobile — same widget, scaled (~328px)
In context
Election 2027
🔥
iefimerida • 2h
Άρσεναλ – Ατλέτικο 1-0: Ο Σάκα την έστειλε…
~296 × 250px (inside 328px viewport)
3 card types — same shape, different content
All three flow through the same auto-advance loop. User experience: scroll, tap, react — they don't think about it as "ad" vs "story" vs "poll."
🔥 TRENDING
iefimerida.gr
Άρσεναλ – Ατλέτικο Μαδρίτης 1-0
Story card
SPONSORED
Skip 5s ›
▶
Auto1
Πόσο αξίζει το αμάξι σου;
Δες ›
Video ad card
Quick poll • 1.2k
Σήμερα κερδίζει στον ημιτελικό:
Poll card
Anatomy — what each region does
Top: tabs + pulseFilter the deck (cookie-persisted) + live reader count. ~28px tall.
Frame: image + overlays16:9 image. Progress bars on top. One contextual badge (trending/breaking/sponsored). Title at bottom with gradient. Hover shows ‹ ›.
Bottom: actions3 reactions (😍 😢 😮) on left. Save + Share on right. ~32px tall.
Auto-advance loop6s per card. User can tap to pause. Tap left/right halves of the frame to step.
Real heights — promise: this fits
| Region |
Desktop (568w) |
Mobile (296w) |
| Top tabs strip | 28px | 24px |
| 16:9 frame | 320px | 166px |
| Bottom actions | 32px | 28px |
| TOTAL | 380px | 218px |
For comparison, today's storyteller is ~360px on desktop / ~210px on mobile, so we add about 20px desktop / 8px mobile for tabs+actions. Reasonable trade for the engagement chrome.
Mental model OK? Sizes OK? Anything else feels bloated — say so.