StorytellerBeta — Concept Mockup

Hybrid mockup — Companion + Queue, one system

Two widget modes that share state. Same design language. Companion mode injects mid-article (contextual to what user is reading). Queue mode injects end-of-article (personal "to-read" list). Adding to queue in Companion shows up instantly in Queue. Live mockup — hover states real, tap to interact.

The flow — one user, one session, two widget injections

User opens an article. Mid-scroll hits Companion widget (related to article). Adds 2 items. Reaches end → Queue widget shows their queue + suggestions. Clicks one → lands on next article. Queue persists across the click.

📖
User reads article
Άρσεναλ – Ατλέτικο 1-0. Scrolls down, mid-article hits the widget.
Companion mode fires
"More about this story." 5 related items. User taps "+ Queue" on 2 of them. Counter shows 2.
📚
Queue mode at end
User finishes article, hits end-of-article slot. Queue widget shows their 2 queued + 3 suggested. Taps top queue item → opens next article. Queue state persists.

Mode 1: Companion (mid-article injection)

Content derived from host article topic. Header explicitly says "More about: [host headline]". List-style — not a carousel. Each row: thumbnail + source + title + action. One sponsored row mid-list (visually distinct, not deceptive).

Desktop — companion mid-article
Άρσεναλ – Ατλέτικο Μαδρίτης 1-0: Ο Σάκα την έστειλε στον τελικό
Περισσότερα για: Άρσεναλ – Ατλέτικο Μαδρίτης 5 stories
iefimerida.gr • 1h ago
Πώς πανηγύρισε ο Σάκα στα αποδυτήρια — η ατάκα του Άρτετα
+ Queue
iefimerida.gr • 2h ago
Η ανάλυση της τακτικής του Άρτετα στον ημιτελικό
+ Queue
in.gr • 3h ago
Champions League: όλοι οι σκόρερ της σεζόν
+ Queue
enikos.gr • 4h ago
Στατιστικά: ποια ομάδα κυριάρχησε — τα νούμερα
+ Queue
~568 × ~430px (5 list rows + sponsored + header)
Mobile — same widget, full-width breakout
Άρσεναλ – Ατλέτικο 1-0
Περισσότερα για: Άρσεναλ 5
iefimerida.gr • 1h
Πώς πανηγύρισε ο Σάκα στα αποδυτήρια
+ Q
iefimerida.gr • 2h
Η ανάλυση της τακτικής του Άρτετα
+ Q
in.gr • 3h
Champions League: όλοι οι σκόρερ
+ Q
~360 × ~280px (4 visible rows on phone)
Try it: hover on any row to see the action highlight. Click the "+ Queue" / "+ Q" button — it animates and turns green ("✓ Added"). That's the state that persists into Queue mode.

Mode 2: Queue (end-of-article injection)

User reaches end of article. Widget shows their queue (items they added in Companion) at top, "Suggested" RSS items below, one big "Trending" featured at the bottom as the strong final pageview push. Sponsored video as a "reward" gate option.

Desktop — queue at end-of-article
Άρσεναλ – Ατλέτικο Μαδρίτης 1-0: Ο Σάκα την έστειλε στον τελικό

— end of article —

📚 Your queue 2 articles ready 2
iefimerida.gr • 1h ago
Πώς πανηγύρισε ο Σάκα στα αποδυτήρια — η ατάκα του Άρτετα
Read →
in.gr • 3h ago
Champions League: όλοι οι σκόρερ της σεζόν
Read →
⚡ Suggested for you
enikos.gr • 30min ago • 🆕
Εκλογές 2027: Τι δείχνουν οι νέες δημοσκοπήσεις — αναλυτικά
+ Queue
in.gr • 2h ago
Νέα μέτρα στήριξης για ενοίκια — ποιοι δικαιούνται
+ Queue
🎁
REWARD VIDEO • SPONSORED
Watch 15s to unlock 3 more curated stories
▶ Watch
~568 × ~580px (queue + suggested + reward + featured)
Mobile — queue at end
Άρσεναλ – Ατλέτικο 1-0

— end of article —

📚 Your queue 2 ready 2
iefimerida • 1h
Πώς πανηγύρισε ο Σάκα στα αποδυτήρια
Read →
in.gr • 3h
Champions League: όλοι οι σκόρερ
Read →
⚡ Suggested
enikos.gr • 30min • 🆕
Εκλογές 2027: Τι δείχνουν οι νέες δημοσκοπήσεις
+ Q
🎁
REWARD VIDEO
Watch 15s to unlock 3 more
~360 × ~440px (queue + suggested + reward + featured)

Anatomy — what makes this work

Element Why it's there
List, not carouselUser sees ALL options at once. No "wait for the right card" anxiety. Click whatever resonates.
Header tells the mode"More about: [topic]" vs "Your queue (2)" — user instantly knows what they're looking at.
Per-row action button"+ Queue" in Companion, "Read →" in Queue. Clear single action per row, no ambiguity.
Sponsored as visually distinct rowYellow tinted background + ▶ Watch CTA. Honest labeling, doesn't pretend to be a story.
Reward video gateEngagement-gated ad. User CHOOSES to watch for value. Premium CPM, no intrusion.
Featured "trending" at bottomFinal pageview push when user has gone through everything. Dark gradient = visually different from rows.
State persists across pagesQueue stored in localStorage. Companion adds → Queue shows. Cross-page continuity.
No auto-advanceUser-controlled, no anxiety, no "did I miss something?" feeling. List you can scan in 3 seconds.
No sticky requiredCompanion: relevance is the hook. Queue: cumulative state across pages is the hook. Sticky becomes optional, not load-bearing.

Ad inventory in this model

SlotFormatPricing model
Sponsored row in CompanionNative (thumb + title + ▶ Watch CTA) — clearly labeled, can be video creativeCPM, contextually targeted to host article
Reward video in Queue15s skippable video, "Watch to unlock more"Premium CPM (completed views) — engagement-gated
Featured "trending" slotCan be branded ("Trending — sponsored by [Brand]") or organicFlat-fee monthly sponsorship
Suggested row in QueueNative ad inserted as "Suggested" item with "Sponsored" tagCPC (driven by + Queue or Read clicks)
Queue persistence reminderRe-engagement: "You have 2 items in queue" notification (browser push? optional)Future v2 — could carry sponsorship

Note: 4 ad-supported surfaces in one widget, all distinct, all honestly labeled. Compare to today: one native ad spliced into stories[] with no clear marker.

Try it. Click rows. Tell me what to fix.

Hover any row → action highlights. Click "+ Queue" → animates green to "✓ Added". This is the live mockup of the hybrid concept.

Specifically tell me: (1) does this feel different enough from "what we have today"? (2) is the Companion → Queue transition clear from the user POV? (3) are sponsored rows / reward video / featured trending all distinguishable enough? (4) what's still bloated or confusing?

StorytellerBeta concept mockup — see ../README.md for context