tw-shimmer 0.1.0 → 0.2.0
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 +19 -16
- package/package.json +1 -1
- package/src/index.css +3 -3
package/README.md
CHANGED
|
@@ -19,41 +19,42 @@ npm install tw-shimmer
|
|
|
19
19
|
The shimmer effect uses `background-clip: text`, so you need to set a text color for the base text:
|
|
20
20
|
|
|
21
21
|
```html
|
|
22
|
-
<
|
|
22
|
+
<span class="shimmer text-foreground/40">Loading...</span>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
Use opacity (`/40`, `/50`, etc.) to make the shimmer effect visible.
|
|
26
26
|
|
|
27
27
|
## API
|
|
28
28
|
|
|
29
|
+
> [!NOTE]
|
|
30
|
+
> All values are unitless numbers with units auto-appended. For example, `shimmer-speed-50` applies 50px/s.
|
|
31
|
+
|
|
29
32
|
### `shimmer`
|
|
30
33
|
|
|
31
34
|
Base utility. Apply to any element with a text color.
|
|
32
35
|
|
|
33
36
|
```html
|
|
34
|
-
<
|
|
37
|
+
<span class="shimmer text-foreground/40">Loading...</span>
|
|
35
38
|
```
|
|
36
39
|
|
|
37
40
|
### `shimmer-speed-{value}`
|
|
38
41
|
|
|
39
|
-
Animation speed in pixels per second. Default: `
|
|
40
|
-
|
|
41
|
-
Values are unitless numbers (units auto-appended): `50`, `100`, `150`, `200`, etc.
|
|
42
|
+
Animation speed in pixels per second. Default: `100`px/s.
|
|
42
43
|
|
|
43
44
|
```html
|
|
44
|
-
<
|
|
45
|
+
<span class="shimmer shimmer-speed-200 text-foreground/40">Fast (200px/s)</span>
|
|
45
46
|
```
|
|
46
47
|
|
|
47
48
|
### `--shimmer-width-x`
|
|
48
49
|
|
|
49
|
-
CSS variable for container width used in speed calculations. Default: `
|
|
50
|
+
CSS variable for container width in pixels used in speed calculations. Default: `200`px.
|
|
50
51
|
|
|
51
52
|
Set this at runtime to match your actual container width for accurate speed.
|
|
52
53
|
|
|
53
54
|
```tsx
|
|
54
|
-
<
|
|
55
|
+
<span class="shimmer" style={{ ["--shimmer-width-x" as string]: "300" }}>
|
|
55
56
|
Wide container
|
|
56
|
-
</
|
|
57
|
+
</span>
|
|
57
58
|
```
|
|
58
59
|
|
|
59
60
|
Duration formula: `(width * 2) / speed`
|
|
@@ -65,27 +66,29 @@ Shimmer highlight color. Default: `currentColor`.
|
|
|
65
66
|
Uses Tailwind color palette.
|
|
66
67
|
|
|
67
68
|
```html
|
|
68
|
-
<
|
|
69
|
+
<span class="shimmer shimmer-color-blue-500 text-blue-500/40"
|
|
70
|
+
>Blue highlight</span
|
|
71
|
+
>
|
|
69
72
|
```
|
|
70
73
|
|
|
71
74
|
### `shimmer-spread-{spacing}`
|
|
72
75
|
|
|
73
|
-
Width of the shimmer highlight. Default: `
|
|
76
|
+
Width of the shimmer highlight. Default: `6`ch.
|
|
74
77
|
|
|
75
78
|
Uses Tailwind spacing scale.
|
|
76
79
|
|
|
77
80
|
```html
|
|
78
|
-
<
|
|
81
|
+
<span class="shimmer shimmer-spread-24 text-foreground/40">Wide highlight</span>
|
|
79
82
|
```
|
|
80
83
|
|
|
81
84
|
### `shimmer-angle-{degrees}`
|
|
82
85
|
|
|
83
|
-
Shimmer direction. Default: `
|
|
84
|
-
|
|
85
|
-
Values are unitless numbers (deg auto-appended): `0`, `45`, `90`, `180`, etc.
|
|
86
|
+
Shimmer direction. Default: `90`deg.
|
|
86
87
|
|
|
87
88
|
```html
|
|
88
|
-
<
|
|
89
|
+
<span class="shimmer shimmer-angle-45 text-foreground/40"
|
|
90
|
+
>Diagonal (45deg)</span
|
|
91
|
+
>
|
|
89
92
|
```
|
|
90
93
|
|
|
91
94
|
## License
|
package/package.json
CHANGED
package/src/index.css
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
@utility shimmer {
|
|
13
|
-
--shimmer-speed:
|
|
14
|
-
--shimmer-width-x:
|
|
13
|
+
--shimmer-speed: 100;
|
|
14
|
+
--shimmer-width-x: 200;
|
|
15
15
|
--shimmer-color: black;
|
|
16
16
|
--shimmer-spread: 6ch;
|
|
17
17
|
--shimmer-angle: 90deg;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
@utility shimmer-speed-* {
|
|
40
|
-
--shimmer-speed:
|
|
40
|
+
--shimmer-speed: --value(number);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
@utility shimmer-color-* {
|