@fiddle-digital/string-tune 0.0.64 → 1.0.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/dist/index.cjs +5 -21
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +1918 -455
- package/dist/index.d.ts +1918 -455
- package/dist/index.js +5 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
- package/readme.md +22 -30
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fiddle-digital/string-tune",
|
3
|
-
"version": "0.0
|
3
|
+
"version": "1.0.0",
|
4
4
|
"description": "StringTune is a cutting-edge JavaScript library designed to deliver high-performance, modular web effects. Whether you're looking to add smooth parallax scrolling, dynamic cursor interactions, progress tracking, or autoplay videos, StringTune empowers developers with a powerful, attribute-driven approach. It simplifies the creation of visually captivating websites while remaining intuitive for both beginner and advanced developers.",
|
5
5
|
"keywords": [
|
6
6
|
"scroll",
|
@@ -44,6 +44,7 @@
|
|
44
44
|
"default": "./dist/index.js"
|
45
45
|
}
|
46
46
|
},
|
47
|
+
|
47
48
|
"scripts": {
|
48
49
|
"build": "tsup",
|
49
50
|
"build:prod": "tsup --sourcemap false",
|
package/readme.md
CHANGED
@@ -1,9 +1,3 @@
|
|
1
|
-
|
2
|
-

|
3
|
-
[](https://bundlephobia.com/package/@fiddle-digital/string-tune@0.0.1)
|
5
|
-
|
6
|
-
|
7
1
|
# Overview
|
8
2
|
|
9
3
|
## What is StringTune?
|
@@ -12,24 +6,24 @@
|
|
12
6
|
|
13
7
|
### Key Features
|
14
8
|
|
15
|
-
-
|
16
|
-
-
|
17
|
-
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
-
|
24
|
-
-
|
9
|
+
- **Modular Architecture**: Use only the modules you need to keep your project lightweight and optimized.
|
10
|
+
- **Attribute-Based Integration**: Configure effects directly in HTML with clear, descriptive attributes.
|
11
|
+
- **Wide Range of Effects**:
|
12
|
+
- Parallax scrolling
|
13
|
+
- Magnetic cursor
|
14
|
+
- Progress indicators
|
15
|
+
- Split text animations
|
16
|
+
- Autoplay videos
|
17
|
+
- **Effortless Initialization**: Start everything with a few lines of JavaScript.
|
18
|
+
- **Performance-Oriented**: Built for smooth performance even on complex pages.
|
25
19
|
|
26
20
|
### Who is StringTune for?
|
27
21
|
|
28
22
|
StringTune is perfect for:
|
29
23
|
|
30
|
-
-
|
31
|
-
-
|
32
|
-
-
|
24
|
+
- **Beginner Developers**: Simplify the process of adding advanced web effects without deep technical knowledge.
|
25
|
+
- **Experienced Developers**: Leverage modularity and API options to create complex, custom effects.
|
26
|
+
- **Designers**: Bring creative visions to life with minimal setup.
|
33
27
|
|
34
28
|
# Introduction
|
35
29
|
|
@@ -46,9 +40,9 @@ In a world of constantly evolving web experiences, **StringTune** helps you stay
|
|
46
40
|
|
47
41
|
### Core Principles
|
48
42
|
|
49
|
-
-
|
50
|
-
-
|
51
|
-
-
|
43
|
+
- **Declarative First**: Most configurations are handled via HTML attributes, reducing the need for verbose JavaScript.
|
44
|
+
- **Customizable**: Provides an API for developers who need fine-grained control over effects.
|
45
|
+
- **Performant**: Optimized to handle intensive animations without compromising user experience.
|
52
46
|
|
53
47
|
### Example Use Case
|
54
48
|
|
@@ -71,16 +65,15 @@ const stringTune = StringTune.getInstance();
|
|
71
65
|
stringTune.use(StringParallax);
|
72
66
|
stringTune.use(StringMagnetic);
|
73
67
|
stringTune.start(60); // Start with 60 FPS
|
74
|
-
|
75
68
|
```
|
76
69
|
|
77
70
|
⚠ Note: When using CDN, you must reference the full namespace:
|
71
|
+
|
78
72
|
```javascript
|
79
73
|
const stringTune = StringTune.StringTune.getInstance(); // Full namespace for CDN users
|
80
74
|
stringTune.use(StringTune.StringParallax);
|
81
75
|
stringTune.use(StringTune.StringMagnetic);
|
82
76
|
stringTune.start(60);
|
83
|
-
|
84
77
|
```
|
85
78
|
|
86
79
|
And finally we make the elements work
|
@@ -94,15 +87,14 @@ And finally we make the elements work
|
|
94
87
|
Hover over me!
|
95
88
|
</div>
|
96
89
|
</div>
|
97
|
-
|
98
90
|
```
|
99
91
|
|
100
92
|
### When to Use StringTune
|
101
93
|
|
102
|
-
-
|
103
|
-
-
|
104
|
-
-
|
94
|
+
- To create visually appealing websites with minimal effort.
|
95
|
+
- When you need customizable effects that are easy to integrate.
|
96
|
+
- To enhance user engagement through interactive animations.
|
105
97
|
|
106
|
-
|
98
|
+
---
|
107
99
|
|
108
|
-
Get started with **StringTune** today and elevate your web experiences to the next level.
|
100
|
+
Get started with **StringTune** today and elevate your web experiences to the next level.
|