Skip to content

Commit b49e8ec

Browse files
committed
Add README.md and demo video for Sliding TextBox component
1 parent 8107c0d commit b49e8ec

2 files changed

Lines changed: 44 additions & 0 deletions

File tree

.assets/demo-video.gif

1.54 MB
Loading

README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Sliding TextBox Demo
2+
3+
A demonstration of smooth scrolling implementation to improve readability in translation subtitle systems.
4+
5+
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.
6+
7+
**Left (Normal)**: Abrupt scrolling
8+
**Right (Sliding)**: Smooth slide-in animation
9+
10+
[Demo](https://sample-by-jsakamoto.github.io/React-SlidingTextBox/)
11+
12+
![](.assets/demo-video.gif)
13+
14+
15+
## Getting Started
16+
17+
### Prerequisites
18+
19+
- Node.js (v20 or later)
20+
- npm (Node Package Manager)
21+
22+
### Installation
23+
1. Clone the repository:
24+
```bash
25+
git clone https://github.com/sample-by-jsakamoto/React-SlidingTextBox.git
26+
```
27+
2. Navigate to the project directory:
28+
```bash
29+
cd React-SlidingTextBox
30+
```
31+
3. Install dependencies:
32+
```bash
33+
npm ci
34+
```
35+
### Running the Application
36+
37+
4. Start the development server:
38+
```bash
39+
npm run dev
40+
```
41+
42+
## License
43+
44+
This project is released into the public domain under [The Unlicense](LICENSE).

0 commit comments

Comments
 (0)