# text-reveal

> A React text animation with a smooth color transition for each character while scrolling.

Latest version **2.1.2** (published 2024-06-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install text-reveal
pnpm add text-reveal
yarn add text-reveal
bun add text-reveal
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2024-06-21 |
| First published | 2024-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 0 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Rajkumar |
| Keywords | text-reveal, react, reveal, text, string, color, control, react-text-reveal, highlight, scroll, text-highlight, highlight-scroll, text-highlight-scroll, motion, velocity, fill, direction, hooks, animation, css, component, effect, text-effects |

## Links

- npm: https://www.npmjs.com/package/text-reveal
- Repository: https://github.com/Raj00377/text-reveal
- Homepage: https://text-reveal.web.app/
- Issues: https://github.com/Raj00377/text-reveal/issues
- npm.io page: https://npm.io/package/text-reveal

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.1.2 (latest) — 2024-06-21
- 2.1.1 — 2024-06-07
- 2.1.0 — 2024-06-06
- 2.0.2 — 2024-06-05
- 2.0.1 — 2024-06-05
- 2.0.0 — 2024-06-05
- 1.3.2 — 2024-05-23
- 1.3.1 — 2024-05-23
- 1.2.1 — 2024-05-21
- 1.1.0 — 2024-05-15
- 1.0.1 — 2024-05-14
- 1.0.0 — 2024-05-14
- 0.2.2 — 2024-05-14
- 0.2.1 — 2024-05-14
- 0.2.0 — 2024-05-14
- … 1 more at https://npm.io/package/text-reveal/versions

## README

<h1 align="center">
<img src='https://raw.githubusercontent.com/Raj00377/text-reveal/update/readme/assets/text-reveal-with-bg.png' alt='Text-reveal' />
</h1>
<h3 align="center">
  An open-source, lightweight micro-frontend package for React.
</h3>
<br/>
<p align="center">
    <img src="https://raw.githubusercontent.com/Raj00377/text-reveal/update/readme/assets/ScreenRecording2024-05-14at8.21.14PM-ezgif.com-video-to-gif-converter.gif" width="1000" alt="text-reveal-gif" />
</p>

<br>

✨ Features 
---------------

* **Zero dependency** – This package works independently.
* **Flexible** – Styles can be inherited from parent.
* **Simple** – Uses basic CSS transition animations.
* **Control** – Customize colors, speed, direction.

⚡️ Getting Started
---------------

1. Install:
  ```jsx
  npm install text-reveal
  ```

2. Use:
```jsx
  import TextReveal from 'text-reveal';

  <TextReveal 
    text={['Hello', 'world']} 
    textColor="grey" 
    fillColor="white" 
  />
```

3. Styles inherits from parent:
```jsx
  <div style={{fontSize : '2rem', backgroundColor : 'black'}}>
    <TextReveal 
      text={['Hello', 'world']} 
      textColor="grey" 
      fillColor="white" 
    />
  </div>
```

### 📚 Docs

- Check out [my documentation](https://text-reveal.web.app) for guides and a full API reference.

### 💎 Contribute

- Want to contribute? I'd love that. [Contributing guide](https://github.com/Raj00377/text-reveal/blob/main/CONTRIBUTING.md) got you covered.

### 👩🏻‍⚖️ License

- Text Reveal is MIT licensed.

---
_Source: https://npm.io/package/text-reveal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._