@fiddle-digital/string-tune/readme.md

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 dev

# Overview

## What is StringTune?

**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.

### Key Features

- **Modular Architecture**: Use only the modules you need to keep your project lightweight and optimized.
- **Attribute-Based Integration**: Configure effects directly in HTML with clear, descriptive attributes.
- **Wide Range of Effects**:
  - Parallax scrolling
  - Magnetic cursor
  - Progress indicators
  - Split text animations
  - Autoplay videos
- **Effortless Initialization**: Start everything with a few lines of JavaScript.
- **Performance-Oriented**: Built for smooth performance even on complex pages.

### Who is StringTune for?

StringTune is perfect for:

- **Beginner Developers**: Simplify the process of adding advanced web effects without deep technical knowledge.
- **Experienced Developers**: Leverage modularity and API options to create complex, custom effects.
- **Designers**: Bring creative visions to life with minimal setup.

# Introduction

## Why StringTune?

In a world of constantly evolving web experiences, **StringTune** helps you stay ahead by offering a versatile toolset to build dynamic, engaging effects without reinventing the wheel. By focusing on simplicity, modularity, and performance, StringTune provides a solution that bridges the gap between creativity and technical execution.

### Benefits of Using StringTune

1.  **Simplicity**: No need for complex setups. Just include the library, add HTML attributes, and see your effects in action.
2.  **Flexibility**: A modular system lets you include only the effects you need, ensuring efficiency.
3.  **Compatibility**: Built with modern web standards to work seamlessly across browsers and devices.
4.  **Scalability**: Suitable for projects of any size, from personal portfolios to large-scale web applications.

### Core Principles

- **Declarative First**: Most configurations are handled via HTML attributes, reducing the need for verbose JavaScript.
- **Customizable**: Provides an API for developers who need fine-grained control over effects.
- **Performant**: Optimized to handle intensive animations without compromising user experience.

### Example Use Case

If you're using a CDN, simply include the script in your HTML:

```html
<script src="https://unpkg.com/@fiddle-digital/string-tune@latest/dist/index.js"></script>
```

Or, if you're working with a modern JavaScript project, install it via npm:

```sh
npm install @fiddle-digital/string-tune
```

Once installed, you need to register the module and start the library.

```javascript
const stringTune = StringTune.getInstance();
stringTune.use(StringParallax);
stringTune.use(StringMagnetic);
stringTune.start(60); // Start with 60 FPS
```

⚠ Note: When using CDN, you must reference the full namespace:

```javascript
const stringTune = StringTune.StringTune.getInstance(); // Full namespace for CDN users
stringTune.use(StringTune.StringParallax);
stringTune.use(StringTune.StringMagnetic);
stringTune.start(60);
```

And finally we make the elements work

```html
<div class="example-container">
  <div class="parallax-item" string="parallax" string-factor="0.8">
    Welcome to StringTune!
  </div>
  <div class="cursor-item" string="magnetic" string-cursor-target="target">
    Hover over me!
  </div>
</div>
```

### When to Use StringTune

- To create visually appealing websites with minimal effort.
- When you need customizable effects that are easy to integrate.
- To enhance user engagement through interactive animations.

---

Get started with **StringTune** today and elevate your web experiences to the next level.