Sliding TextBox Demo (React)

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

Demo

Getting Started

Prerequisites

• Node.js (v20 or later)
• npm (Node Package Manager)

Installation

1. Clone the repository:

git clone https://github.com/sample-by-jsakamoto/React-SlidingTextBox.git

2. Navigate to the project directory:

cd React-SlidingTextBox

3. Install dependencies:

npm ci

Running the Application

4. Start the development server:

npm run dev

License

This project is released into the public domain under The Unlicense.