Swipe Reddit feeds like reels: unmuted playback, galleries, and native voting.
An immersive, high-performance Userscript for Tampermonkey and Violentmonkey (engineered for desktop browsers and mobile web like Firefox Android, Kiwi Browser, Safari, and Orion) that transforms Reddit feeds into a seamless, vertical swipe Reel Mode (TikTok / Instagram Reels style) with zero background audio bleed, smart aspect-ratio scaling, gallery carousels, and native voting synchronization.
AudioManager) ensures that navigating to any post immediately pauses, mutes, and resets all previous media elements and iframes. Exactly one audio stream is active at any time.redgifs-bridge protocol (SET_AUDIO, PAUSE, PLAY), seamlessly synchronizing audio state in real-time without reloading the iframe.h / w >= 1.5) scale to full-bleed cover (100vw × 100dvh).1:1) and 4:5 meme videos automatically use letterboxed contain so header titles, captions, and bottom punchlines are never cut off.contain (letterbox) and cover (full bleed) modes with animated visual indicator feedback.CC button on the overlay and C keyboard hotkey allow toggling Reddit video subtitles on and off.localStorage.scroll-snap-type: x mandatory).redgifs.com, streamable.com, gfycat.com) are automatically classified as video posts and mounted as responsive iframes rather than static link cards.redgifs-bridge subsystem runs inside matched redgifs.com/ifr/* iframes, providing direct DOM audio and playback control without destructive reloads.tabindex=-1 + blur) so hotkeys keep working. Volume keys and mute controls seamlessly sync via the bridge protocol.J / ArrowDown — Navigate to next reelK / ArrowUp — Navigate to previous reelM — Toggle mute / unmute+ / = or Shift+ArrowUp — Volume up- / _ or Shift+ArrowDown — Volume downC — Toggle closed captions / subtitlesEsc — Exit Reel Mode back to standard Reddit.json APIs that trigger Reddit 429 rate limits or Cloudflare Turnstile barriers.<shreddit-post>) using an optimized MutationObserver pipeline that dynamically extracts incoming posts as you scroll.#000000 true black, #141518 card surfaces, #ff4500 Reddit accent).dist/reddit-reels.user.js in your browser.https://www.reddit.com/.The codebase is modularized by domain (cards, core, extractor, media, styles, ui).
Core extraction/playback modules are intentionally larger (dom-extractor.ts ~650,
audio-manager.ts ~560, feed-manager.ts ~320) because Reddit DOM parsing and the
audio mutex cannot be split without creating leaky abstractions; new UI/styles
helpers should stay small and focused (< 150 lines where practical).
reddit-reels/
├── LICENSE # MIT License
├── README.md # Project documentation
├── package.json # Dependencies & scripts
├── vite.config.ts # Monkey userscript builder configuration
├── src/
│ ├── main.tsx # Bootstrap, initialization & lifecycle orchestration
│ ├── utils.ts # Score formatting & shared utility helpers
│ ├── cards/ # Content card components
│ │ ├── text-card.ts # Editorial discussion text card
│ │ ├── link-card.ts # Rich external article preview card
│ │ └── index.ts
│ ├── core/ # Feed orchestration & event controls
│ │ ├── feed-manager.ts # In-place DOM container transformation & scroll snap
│ │ ├── input-controller.ts # Touch gestures, double-tap zoom & keyboard hotkeys
│ │ ├── unconstrainer.ts # Aspect-ratio resolution & subtitle management
│ │ └── index.ts
│ ├── extractor/ # Post extraction & voting proxy
│ │ ├── dom-extractor.ts # <shreddit-post> DOM parser & MutationObserver
│ │ ├── vote-proxy.ts # Native Reddit click delegation
│ │ └── types.ts # Extracted post data interfaces
│ ├── media/ # Audio & playback controllers
│ │ ├── audio-manager.ts # Single-media focus mutex
│ │ ├── index.ts # Direct DOM media resolver (native video, iframe embeds, image fallback)
│ │ └── types.ts # ResolvedMedia interface
│ ├── styles/ # Domain-decomposed CSS
│ │ ├── base.css # CSS variables & floating action button
│ │ ├── feed.css # Snapping container & post media layout
│ │ ├── cards.css # Text discussion & link preview styling
│ │ ├── gallery.css # Multi-image horizontal carousel
│ │ ├── overlay.css # Meta badges, action rail & vote controls
│ │ ├── top-bar.css # Exit button, video filter & sound buttons
│ │ └── index.css # Bundled stylesheet entry
│ └── ui/ # UI components & interactive overlays
│ ├── overlay.ts # Slide action rail, vote pill, and author badges
│ ├── top-bar.ts # Top navigation bar & video filter toggle
│ ├── pulse.ts # Play/pause and fit/fill pulse animations
│ └── index.ts
└── tests/
├── fixtures/ # Mock Reddit DOM, fixture bundles & test server
├── unit/ # Fast unit tests (Bun test runner, 42 tests)
│ ├── extractor.test.ts # DOM extractor & voting proxy tests
│ ├── media.test.ts # Audio mutex & media resolver tests
│ ├── teardown.test.ts # Feed restoration, teardown, carousel & audit tests
│ └── redgifs-bridge.test.ts # RedGifs bridge & message protocol tests
├── fab.spec.ts # Playwright: FAB launcher visibility/behavior
├── dom-extractor.spec.ts # Playwright: DOM extraction on mock Reddit
├── voting-proxy.spec.ts # Playwright: native vote delegation
├── audio-mutex.spec.ts # Playwright: single-media audio mutex
├── link-post.spec.ts # Playwright: link-card rendering
├── video-sizing.spec.ts # Playwright: aspect-ratio fit/cover rules
└── visual-test.ts # Automated visual regression helper
bun install
bun test tests/unit
bun run test:e2e
bun run build
# Emits dist/reddit-reels.user.js with // @license MIT header
This project is licensed under the MIT License.