yuchunbo/ai-stream-scroll

★ 16TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((ai-stream-scroll))
    Core behavior
      Buffered content reveal
      Reading-speed scroll
      Auto-scroll threshold 80pct
    Adaptive speed
      Slows on text select
      Speeds up on catch-up
      Saves preference locally
    Controls
      Pause and resume
      Jump to bottom
      Manual speed override
    Setup
      npm install
      Vue global or local import

mindmap root((ai-stream-scroll)) Core behavior Buffered content reveal Reading-speed scroll Auto-scroll threshold 80pct Adaptive speed Slows on text select Speeds up on catch-up Saves preference locally Controls Pause and resume Jump to bottom Manual speed override Setup npm install Vue global or local import

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add smooth reading-speed scroll to a Vue.js AI chat interface that streams text token by token.

USE CASE 2

Give users manual scroll speed controls in an AI writing app, with preferences saved across reloads.

USE CASE 3

Build an AI content tool where text appears at a controlled pace with pause and jump-to-bottom controls.

Tech stack

TypeScriptVue.jsnpm

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

AI Stream Scroll is a Vue.js plugin that handles the scrolling experience when an AI model generates text word by word in real time. The problem it addresses: most AI chat interfaces lock the scroll to the bottom as new text arrives, which constantly jumps the page and disrupts reading. This plugin instead reveals content at a controlled pace and scrolls at a reading-friendly speed. The core behavior works in two parts. Content is buffered and revealed at a configurable rate rather than appearing the instant each character arrives. The plugin then scrolls the container smoothly at a speed calibrated to feel natural for reading, rather than snapping instantly to the latest text. Auto-scrolling only activates once the content fills 80% of the visible area, leaving a stable reading window at the start. The plugin watches how you interact with the page and adjusts scroll speed over time. If you select text, copy something, or pause scrolling for a while, it interprets this as careful reading and slows down by 5% per such action. If you scroll down frequently to catch up with new content, it speeds up. Manual speed adjustments take priority and are saved to the browser's local storage so your preference carries over between page reloads. You can take over scrolling manually at any time and the plugin steps back. There are controls for pausing, resetting, and jumping to the bottom, accessible through a built-in control panel or programmatically via component methods. Installation is through npm, pnpm, or yarn. The component can be registered globally in a Vue app or imported directly into individual files. The project is released under the MIT License.

Copy-paste prompts

Prompt 1

Install ai-stream-scroll in my Vue.js app and configure it so AI-streamed text scrolls at a comfortable reading speed, show me the component registration and basic props.

Prompt 2

Set up ai-stream-scroll to slow down automatically when the user selects text and speed up when they scroll to catch new content, show me how the adaptive behavior is configured.

Prompt 3

I want to add a pause button and a jump-to-bottom button to my Vue AI chat using ai-stream-scroll, show me how to call the component methods programmatically.

Prompt 4

Explain how ai-stream-scroll's 80% threshold works and how I can adjust it so auto-scroll activates earlier or later in my chat window.

Open on GitHub → Explain another repo

← yuchunbo on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.