The pivot: storyteller becomes a video loop
You're right that tabs+reactions on a static carousel is still a static carousel. But if every card is a 6s motion clip — image with Ken Burns + animated text + transitions — then storyteller is a video unit, video ads slot in as the same format, and the whole category changes. Live animations below; everything you see is real CSS, no mockup tricks.
Live demo — animated story card (CSS only, no actual video)
Watch the loop. Image Ken-Burns over 8s. Title fades in word-by-word. Top progress bar fills 6s. Reaction count would bump on tap. Live "342 reading" pulses. CTA pill bobs. This is what makes it feel like video without being video.
Same loop, three card types — all "video-feel"
Story card transitions to video ad transitions to poll. From the user's POV it's all one continuous video reel. No format mismatch, no jarring cuts. Each card auto-advances; ad card has a skip after 5s.
End-card now has a background image (blurred + dimmed) so it doesn't feel like a dead text panel — your concern from before. Same Ken Burns animation as story cards; the headline is a different (most-read) article from the publisher's own feed, picked at runtime by reader-count signal.
Every animation in the unit (kept tasteful, not gimmicky)
Ken Burns on image
Slow scale 1.0→1.15 + slight pan over 8s. Gives static images the feel of video footage.
Title reveal
Source line + title fade in from below with 200ms / 400ms staggered delays each card.
Top progress bars
Active segment animates width 0→100% over 6s linear. Gives the user a clear sense of "this card is timed."
CTA bob
Subtle 3px float every 2.4s. Draws the eye without being annoying.
Live counter pulse
Red dot scales + ripples every 1.4s. Counter number updates every 30s from worker.
Reaction bump
On tap, the reaction pill scales 1.18× then springs back. Count number increments live.
Card transition
Cross-fade + scale-down on exit, scale-up + fade-in on entry. ~400ms total. Feels like a video cut.
Breaking-news slam
When breaking interrupt fires, badge slides in from left with a horizontal flash + red box-shadow ripple.
End-card background blur
Background article image blurred + Ken-Burned, foreground text + CTA stay sharp. Same motion language.
Architecture: how do we actually deliver "video feel"?
Two paths. The first is what you're seeing on this page — pure CSS. The second is heavier. My recommendation: ship the first now, add the second only for premium publishers later.
A. Motion-graphics layer (CSS/Canvas)
Story cards are still static images + animated overlays. Ken Burns + text reveals + transitions are CSS keyframes. Video ads are real videos served from prebid (today's mechanism). User experience is "this feels like video." Reality is one HTML/CSS module.
- Cost
- ~0 — runs in browser, no server compute
- Performance
- GPU-accelerated CSS, ~60fps, low CPU
- Asset pipeline
- None new — uses existing RSS image + title
- Ad integration
- Real video creative for ad slot, CSS animation for story slot — both look the same to the user
- Risk
- Low
B. Server-rendered MP4 stories
Each story becomes an actual rendered MP4 video, generated from RSS data via a Cloudflare Worker + something like Bannerbear/Creatomate. Client-side it's a <video> tag. True video for everything.
- Cost
- Per-video render fee ($0.01-0.05 each) × thousands of stories/day
- Performance
- Real video = better quality, but adds bandwidth (~500KB/clip)
- Asset pipeline
- Worker watches RSS, renders MP4, stores in R2, serves via CDN
- Ad integration
- All slots are <video> tags — cleanest ad-tech surface
- Risk
- Medium — render service dependency, cost scales with volume
What's actually different vs today
| Dimension | Today | Beta |
|---|---|---|
| Format | Static carousel | Auto-advancing video-feel loop |
| Motion | None | Ken Burns + reveals + transitions |
| Ad format | Native (text+image) | Real video ad as a card, native fallback |
| Click target | Whole image opens article | 3 paths: CTA pill, title-tap, end-card |
| Filtering | None | Tabs, cookie-persisted |
| Engagement signals | None | Reactions + saves + tab signal |
| Social proof | None | Live "X reading" pulse |
| Pageview driver | Passive image link | Persistent CTA + end-card + breaking interrupt |
| Variety | Stories only | Stories + video ads + polls + end-card |
Two big calls to make
- Pivot to "video-feel" model with motion + animated cards? (i.e. everything you're seeing animate above)
- Architecture: motion-graphics-via-CSS for v1 (free, instant, identical UX), real MP4s deferred to a premium tier?
If yes/yes, the next step is to nail down: card transitions (which type — fade, slide, scale?), the autoplay timing per card type (story 6s, ad 15s, poll 8s?), and what happens when user pauses (current spec: pauses progress, dims tabs, shows expanded CTA).