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:

<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:

npm install @fiddle-digital/string-tune

Once installed, register the modules you need, wire any event listeners, and start the engine:

import StringTune, { StringParallax, StringMagnetic, StringProgress } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

stringTune.use(StringParallax);
stringTune.use(StringMagnetic);
stringTune.use(StringProgress);

stringTune.start(60);
// stringTune.start(0); // if you want to remove the frame limit

⚠ Note: When using the CDN bundle, reference the full namespace:

const stringTune = StringTune.StringTune.getInstance();

stringTune.use(StringTune.StringParallax);
stringTune.use(StringTune.StringMagnetic);
stringTune.use(StringTune.StringProgress);

stringTune.start(60);
// stringTune.start(0); // if you want to remove the frame limit

And finally, add the markup and minimal styles:

<section class="hero">
  <h1 class="title" string="parallax" string-parallax="0.35">Welcome to StringTune!</h1>
  <button class="cta" string="magnetic" string-radius="220">Hover over me</button>
</section>

.hero__title {
  font-size: 2rem;
}

.hero__cta {
  font-size: 1rem;
  padding: 1rem 2rem;
  color: #111;
  background: #f48d6a;
  transform: translate(calc(var(--magnetic-x, 0) * 1px), calc(var(--magnetic-y, 0) * 1px));
}

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.