PARKR.DEV






FeedWise In-Feed Reader Drawer Concepts — 30 Wireframe Demos



FeedWise reader drawer concepts · wireframe only

30 in-feed content drawer patterns for reading without losing your place.

These demos explore how a visitor can open articles, transcripts, summaries, and mixed-media reading views
inside an infinite scroll feed without leaving the app or losing context.

Parameters: monochrome wireframe, no decorative color, no border radius, no phone frame, responsive behavior,
scoped CSS per concept, and reader-first interactions rather than curator workflows.

Keep place visible.
The feed should remain nearby, compressed, anchored, or recoverable.
Open in layers.
Use drawers, panels, sheets, inline expansion, and previews before full reader mode.
Respect thumb flow.
Large targets and predictable close/resume controls reduce mobile friction.
Support interruption.
Reader shells should include return anchors, progress, and “continue” language.
Animate meaningfully.
Motion should explain where the article came from and where it will return.
Separate reading from curation.
Actions are read, close, continue, listen, text size, and related reading.
01

Bottom Sheet Reader

A mobile-native drawer rises from the bottom while the feed remains behind it.

Use whenArticle preview should feel temporary and easy to dismiss.
AnimationTranslate Y from collapsed handle to expanded sheet.
ResponsiveOn wider screens, constrain the sheet width to avoid line-length bloat.

Article · 7 min

Reading inside the feed should not feel like a modal trap

The sheet keeps the original feed visible below.

Podcast · 24 min

A related conversation remains in the scroll path

Article · 4 min

Another item waits below, preserving place

02

Right Edge Slide Drawer

The feed shifts slightly left as a reading drawer enters from the right.

Use whenTablet and desktop layouts should feel app-like.
AnimationFeed translates left; drawer translates from right.
ResponsiveMobile drawer covers most of the viewport; desktop becomes side panel.

Img

Essay · 9 min

Side drawers make reading feel spatial

Feed remains partially visible.

Img

Article

Context survives because the list does not disappear

↗

03

Inline Expansion Reader

The article opens directly inside its feed item. No overlay, no separate surface.

Use whenShort articles or summaries can be read without entering a new context.
AnimationMax-height expansion.
ResponsiveExpanded item may span grid columns on wider layouts.

Article · 5 min

Inline readers preserve scroll memory perfectly

The article body opens below the headline. This is the lowest-friction pattern for short content.

It is also accessible and easy to reason about because the reading area lives exactly where the user tapped.

Article

A neighboring article remains in place

↗

04

Top Curtain Reader

A reading curtain drops from the top, useful when the app header is the stable orientation point.

Use whenReader mode should feel like a temporary layer over the feed.
AnimationTranslate Y from above viewport.
ResponsiveCan become a desktop overlay under a persistent app header.

Article · 8 min

The curtain keeps app navigation mentally nearby

Best when users often return to the top controls.

Article

Feed item below the selected one

05

Center Reader Window

A centered reader window appears over a lightly patterned feed, more like a document preview than a modal.

Use whenThe reading area needs focus but should not feel like leaving the feed.
AnimationScale and fade in.
ResponsiveWindow inset can shrink on phones and expand on tablets.

Feature · 11 min

A preview window can feel lighter than full reader mode

Related

Nearby feed item remains visible behind the focus layer

06

Reader Dock After Selected Item

The selected item creates a reader dock immediately below it, like a detail pane inserted into the stream.

Use whenReading should be tied to the selected item’s exact position.
AnimationDock grows down from zero height.
ResponsiveArticle body and reader metadata split into columns.

Article · 6 min

The reader dock belongs to this exact feed position

The user never wonders where the article came from.

Next item

The feed continues directly below the dock

07

Sticky Reader Rail

On wider screens, the reader becomes a sticky side rail. On mobile, it appears after the feed items.

Use whenReader and feed should remain visible together.
AnimationSmall pop-in to indicate the rail has opened.
ResponsiveTwo-column layout at container width.

Article · 10 min

Sticky rails support browsing while reading

The feed remains primary.

Podcast

Related audio item is still visible

Article

More feed content keeps flowing

08

Horizontal Book Drawer

A drawer opens into horizontally paged article sections, echoing a small book inside the feed.

Use whenArticle is naturally sectioned or chaptered.
AnimationDrawer slides from right; pages scroll horizontally.
ResponsiveCards and pages can snap in a larger carousel.

Essay · 12 min

Reading can feel like opening a small book

Article

Feed cards remain on a horizontal shelf

09

Stacked Page Drawer

Multiple sheets stack up from the bottom to suggest article layers: summary, body, related.

Use whenThe article has progressive levels of depth.
AnimationThe whole stack rises from below.
ResponsiveCan become layered panels beside the feed.

Article · 9 min

Stacked pages make depth feel manageable

Next in feed

This remains underneath the reading stack

10

Drawer With Chapter Tabs

The drawer opens with visible chapter options so readers can jump to the useful part.

Use whenLong articles have headings, sections, or generated chapter summaries.
AnimationClip-path reveal from top.
ResponsiveChapters become a vertical side nav on wider screens.

Guide · 16 min

Let readers jump instead of forcing a full scroll

11

Peek Handle Drawer

A persistent handle shows the selected article title and can expand into a reader.

Use whenThe reader may open/close repeatedly while browsing.
AnimationMax-height expansion from a persistent handle.
ResponsiveHandle can become a mini-reader bar on tablet.

Article · 8 min

A handle gives readers confidence that their place is saved

Feed continues

The selected article waits in the handle below

12

Item Morphs Into Reader

The item itself grows into a reader card, making the transition easy to understand.

Use whenThe article body is short enough to live in the card.
AnimationBorder and padding expand, body reveals.
ResponsiveCan promote selected item to full-width grid span.

Article · 5 min

The card becomes the reader

No new surface is introduced.

The morph pattern is direct and honest. It says: this is the same object, just expanded for reading.

It works best for simple feed item layouts with predictable text and media slots.

13

Reader With Source Sidebar

The article opens with source context attached, helping readers judge trust without leaving the app.

Use whenSource identity is important to the reading decision.
AnimationReader slides in lightly.
ResponsiveSource panel stacks on mobile and becomes sidebar on wider screens.

Article · 6 min

Source context can travel with the article

14

Full Surface Reader With Return Anchor

The reader takes the whole demo surface but includes a sticky return anchor that names the feed position.

Use whenDeep reading needs full focus.
AnimationReader slides up as feed moves slightly behind it.
ResponsiveCan become full-screen reader mode while preserving scroll offset.

Longform · 18 min

Sometimes the reader needs the whole surface

Next

The feed will still be here when you close

15

Chapter Drawer With Sticky TOC

A sticky table of contents remains available as the reader scrolls inside the drawer.

Use whenLong articles need internal navigation.
AnimationDrop-in drawer with sticky internal controls.
ResponsiveTOC can convert to vertical rail later.

Guide · 15 min

A sticky mini-TOC helps readers stay oriented

16

Flip Panel Reader

A card flips from feed preview to article reader, useful for contained experiences and playful browsing.

Use whenShort pieces can be read as a reverse side of the card.
Animation3D rotateY flip.
ResponsiveKeep motion optional for reduced-motion users in production.

Article card

The reverse side is the reader

This can make browsing feel tactile.

Another item

Feed item below

Reader side

Card-back reading

The flip panel keeps the item and reader psychologically connected.

Use for small essays, notes, or summaries rather than longform articles.

17

Scroll-Linked Inline Reader

An inline reader includes a sticky continue bar at the bottom of its expanded area.

Use whenExpanded content may be longer than the viewport.
AnimationHeight reveal, with sticky continue control.
ResponsiveCan become card-and-reader grid on larger screens.

Article · 11 min

Sticky controls prevent inline readers from becoming dead ends

The reader expands in place, but includes a sticky control so the user can keep going without scrolling back to the top.

This is a strong compromise between inline reading and full reader mode.

Additional paragraphs can continue here.

Next

The feed continues below

18

Floating Reader Card Attached To Item

A floating reader card appears near the selected item, like a detached preview pane.

Use whenReader should feel lightweight and inspectable.
AnimationTranslate and fade from selected item region.
ResponsiveOn larger screens, float beside the selected feed item.

Article · 4 min

A floating reader is good for previews

Short content can be inspected without a mode switch.

Below

Feed context remains visible

19

Sticky Top Reader Ribbon

A compact reader ribbon sticks to the top of the scroll area and expands when needed.

Use whenReaders may browse while keeping one item active.
AnimationRibbon max-height expansion.
ResponsiveWorks inside scrollable feed containers.

Article · 7 min

Pin this article to a reader ribbon

Item

Feed content scrolls beneath the ribbon

Item

More scrolling content

Item

Even more scrolling content

20

Feed Compresses Around Drawer

Non-selected feed items reduce their visual weight while the reader opens.

Use whenThe user should maintain context but focus on one item.
AnimationSelected drawer grows; other items visually compress.
ResponsiveOn desktop, compressed feed can become a thin index.

Before

Context item above

Selected article · 9 min

The feed can compress instead of disappear

After

Context item below

21

Excerpt + Full Article Split Drawer

The drawer contains a stable excerpt panel and a scrollable full article panel.

Use whenReaders benefit from keeping the article promise visible.
AnimationClip-path expands from center.
ResponsiveExcerpt stacks above full text on mobile, splits on wider screens.

Article · 12 min

Keep the promise visible while reading

22

Scroll Snap Reading Drawer

The reading drawer uses horizontal snap pages, giving long content a paged feel.

Use whenArticle sections are short and self-contained.
AnimationBottom drawer rises; pages snap horizontally.
ResponsiveCan be converted to multi-column reading on desktop.

Article · 10 min

Swipeable sections can make reading feel lighter

23

Reader Window With Entrance Keyframes

A small animation makes the reader feel responsive and connected to the item.

Use whenYou want a polished but simple reader preview.
AnimationCustom keyframe with slight overshoot.
ResponsiveWindow inset adapts to available space.

Article · 6 min

Micro-motion can clarify the reading transition

Feed

Other items remain underneath

24

Left Memory Drawer

A drawer enters from the left as a “memory” panel, useful for returning to what was just opened.

Use whenThe feed’s spatial direction suggests previous/return behavior.
AnimationDrawer slides from left while feed nudges right.
ResponsiveCan be a persistent reading history rail on desktop.

Article · 8 min

The left side can mean memory and return

Feed

More items to browse after closing

25

Preview Text Becomes Drawer

The excerpt area itself expands into the article body, making the text feel continuous.

Use whenThe feed card already includes a strong excerpt.
AnimationExcerpt max-height expansion.
ResponsiveOn larger cards, preview can become a second column.

Article · 7 min

Let the excerpt unfold into the article

The preview begins as a short summary. When the reader opens it, the same text area expands into the full body.

This is one of the most natural transitions for reading because the reader’s eyes stay on the same text block.

There is no visual jump from card to drawer.

26

Progressive Reveal Reader

The reader body reveals paragraph by paragraph, good for summaries or guided previews.

Use whenContent should feel intentionally paced.
AnimationParagraphs fade/translate in with staggered delays.
ResponsiveKeep line length constrained for full article mode.

Article · 5 min

Progressive reveal can make summaries feel readable

27

Newspaper Column Drawer

The drawer presents article text in newspaper-like columns when space allows.

Use whenLongform reading should feel editorial and print-inspired.
AnimationPaper rises into view.
ResponsiveOne column on mobile, two columns in larger containers.

Longform · 14 min

A newspaper drawer changes the reading texture

28

Focus Tunnel Drawer

A horizontal reading tunnel opens through the feed while the surrounding items fade back.

Use whenYou want focus without a conventional modal.
AnimationScale Y from center.
ResponsiveTunnel can become a split-pane reader on desktop.

Article · 9 min

A focus tunnel opens in the middle of the feed

Feed

Context fades but does not vanish

29

Reader With Related Items Drawer

The reader drawer includes a related-reading panel for casual onward browsing.

Use whenThe article can lead naturally to more reading.
AnimationReader rises into place.
ResponsiveRelated items stack below on mobile, side rail on wider screens.

Article · 8 min

Related items should support wandering, not tasking

30

Universal Anchor + Drawer + Restore Shell

A production-ready mental model: selected anchor, reader shell, and explicit restore action.

Use whenYou need one reusable in-feed reader pattern for articles, transcripts, summaries, and show notes.
AnimationBottom sheet on mobile, side panel on larger containers.
ResponsiveMobile: feed shifts upward. Wide: feed shifts left and drawer becomes side shell.

Selected article · 11 min

The universal shell should remember where reading began

Next feed item

The infinite scroll feed is preserved beneath the reader

Related media

A podcast episode remains available after reading

Implementation recommendation

For FeedWise, build one reusable InFeedReaderShell that supports placement modes:
inline, bottom-sheet, side-panel, overlay-window,
split-drawer, and full-surface. Then each feed item can choose the least disruptive
reading pattern based on content type, length, screen size, and reader preference.