shaders 2.2.28 → 2.2.29
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 +73 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,80 @@
|
|
|
1
1
|
# Shaders
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Shader magic for modern frontends
|
|
4
|
+
|
|
5
|
+
<img alt="image" src="https://shaders.com/og.png" />
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://www.npmjs.com/package/shaders" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/shaders?color=0368FF&label=version" alt="npm version"></a>
|
|
9
|
+
<a href="https://www.npmjs.com/package/shaders" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/shaders?color=8D30FF&label=npm" alt="npm downloads per month"></a>
|
|
10
|
+
<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/shaders"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/shaders?logo=jsdeliver&color=FF4FBA"></a>
|
|
11
|
+
<a href="https://img.shields.io/twitter/follow/npm_i_shaders" target="_blank"><img alt="X (formerly Twitter) Follow" src="https://img.shields.io/twitter/follow/npm_i_shaders"></a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
## Getting Started
|
|
15
|
+
|
|
16
|
+
Shaders is available as component libraries for Vue, React & Svelte. No matter which framework you use, you always install `npm install shaders` and then import components from the framework-specific directory, such as `shaders/vue`.
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
# Install
|
|
20
|
+
npm install shaders
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
<details>
|
|
24
|
+
<summary>Usage (Vue)</summary>
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<script>
|
|
28
|
+
import { Shader, LinearGradient } from "shaders/vue"
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<template>
|
|
32
|
+
<Shader>
|
|
33
|
+
<LinearGradient/>
|
|
34
|
+
</Shader>
|
|
35
|
+
</template>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
</details>
|
|
39
|
+
|
|
40
|
+
<details>
|
|
41
|
+
<summary>Usage (React)</summary>
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<script>
|
|
45
|
+
import { Shader, LinearGradient } from "shaders/react"
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<Shader>
|
|
50
|
+
<LinearGradient/>
|
|
51
|
+
</Shader>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
</details>
|
|
56
|
+
|
|
57
|
+
<details>
|
|
58
|
+
<summary>Usage (Svelte)</summary>
|
|
59
|
+
|
|
60
|
+
```svelte
|
|
61
|
+
<script>
|
|
62
|
+
import { Shader, LinearGradient } from "shaders/svelte"
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<Shader>
|
|
66
|
+
<LinearGradient/>
|
|
67
|
+
</Shader>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
</details>
|
|
71
|
+
|
|
72
|
+
**Learn more and try the Design Editor at https://shaders.com**
|
|
73
|
+
|
|
74
|
+
---
|
|
4
75
|
|
|
5
76
|
Shaders © Shader Effects, Inc.
|
|
6
77
|
|
|
7
78
|
Licensed under the Shader Effects License Agreement (v1.1).
|
|
8
79
|
You may use Shaders freely for non-production or educational use.
|
|
9
|
-
A valid paid license is required for production deployment.
|
|
10
|
-
|
|
11
|
-
See full terms in the [LICENSE](LICENSE)
|
|
80
|
+
A valid paid license is required for production deployment.
|
package/package.json
CHANGED