This is a React demo that showcases a smooth scrolling implementation to improve readability in translated subtitle systems. (You can see the Blazor version here.)
When new text is added, typical implementations cause existing text to jump abruptly, making it difficult to read. The SlidingTextBox component solves this problem with smooth animation display.
Left (Normal): Abrupt scrolling
Right (Sliding): Smooth slide-in animation
- Node.js (v20 or later)
- npm (Node Package Manager)
- Clone the repository:
git clone https://github.com/sample-by-jsakamoto/React-SlidingTextBox.git- Navigate to the project directory:
cd React-SlidingTextBox- Install dependencies:
npm ci- Start the development server:
npm run devThis project is released into the public domain under The Unlicense.