@matteodicristofalo/text-animations 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ pnpm add @matteodicristofalo/text-animations
|
|
|
14
14
|
|
|
15
15
|
# Usage
|
|
16
16
|
|
|
17
|
-
The first thing to do in order to use this library is to import
|
|
17
|
+
The first thing to do in order to use this library is to import its CSS.
|
|
18
18
|
|
|
19
19
|
The following example is for a Next.js App but you can apply the same concept for different frameworks
|
|
20
20
|
|
|
@@ -42,30 +42,30 @@ export default function RootLayout({
|
|
|
42
42
|
|
|
43
43
|
Once imported the CSS you can use the React components.
|
|
44
44
|
|
|
45
|
-
##
|
|
45
|
+
## SplitTextReveal
|
|
46
46
|
|
|
47
47
|
```js
|
|
48
48
|
"use client";
|
|
49
49
|
|
|
50
|
-
import {
|
|
50
|
+
import { SplitTextReveal } from "@matteodicristofalo/text-animations";
|
|
51
51
|
|
|
52
52
|
export function MyComponent() {
|
|
53
53
|
return (
|
|
54
54
|
<h1>
|
|
55
|
-
<
|
|
55
|
+
<SplitTextReveal text="Hello World" />
|
|
56
56
|
</h1>
|
|
57
57
|
);
|
|
58
58
|
}
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
You can
|
|
61
|
+
You can decide how to split the text between one of this options:
|
|
62
62
|
|
|
63
|
-
- char
|
|
63
|
+
- char (default)
|
|
64
64
|
- word
|
|
65
65
|
- sentence
|
|
66
66
|
|
|
67
67
|
```js
|
|
68
|
-
<
|
|
68
|
+
<SplitTextReveal text="Hello World" splitType="word" />
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
You can also configure the reveal animation by specifying:
|
|
@@ -77,7 +77,7 @@ You can also configure the reveal animation by specifying:
|
|
|
77
77
|
"use client";
|
|
78
78
|
|
|
79
79
|
import { useMemo } from "react";
|
|
80
|
-
import {
|
|
80
|
+
import { SplitTextReveal } from "@matteodicristofalo/text-animations";
|
|
81
81
|
|
|
82
82
|
export function MyComponent() {
|
|
83
83
|
const revealOptions = useMemo(
|
|
@@ -90,7 +90,7 @@ export function MyComponent() {
|
|
|
90
90
|
|
|
91
91
|
return (
|
|
92
92
|
<h1>
|
|
93
|
-
<
|
|
93
|
+
<SplitTextReveal text="Hello World" revealOptions={revealOptions} />
|
|
94
94
|
</h1>
|
|
95
95
|
);
|
|
96
96
|
}
|
|
@@ -112,7 +112,7 @@ export function MyComponent() {
|
|
|
112
112
|
}
|
|
113
113
|
```
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
This component split always by char, the only thing you can configure is the rotate animation
|
|
116
116
|
|
|
117
117
|
```js
|
|
118
118
|
"use client";
|