ai-stream-scroll

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.