texticco - Make Your Text Pop with Style

Introduction

texticco is an easy-to-use NPM package designed for creating stunning text animations with minimal effort. Whether you're a web developer looking to add flair to your projects or a designer wanting to enhance user engagement, Texticco offers a variety of animations to make your text stand out.

Key Features

• Dynamic Animations: Easily animate your text with a variety of pre-built effects.
• Performance Optimized: Enjoy smooth animations without compromising on speed.
• Cross-Browser Compatibility: Works flawlessly across all modern browsers.
• Simple Integration: Seamlessly integrate Texticco with minimal setup.

Installation

To install texticco, use npm:

npm install texticco

Getting Started

To use Texticco in your project,

• Import the effect animation from the package as required in Javascript file:

import { Effect_name } from './node_modules/texticco/script.js';

Animation Types

• Wavy text animation ( WaviTxt )

• Thunder text animation ( SparkiTxt )

• Typing animation ( TypoTxt )

• 3d folding animation on hover ( FoldiTxt )

• 3D Dynamic Dance Text Animation on Click ( SymphoniTxt )

• Neon text effect animation ( NeonTxt )

Usage :

1. WaviTxt

HTML :

<section>
        <div class="content">            
            <h2>texticco</h2>
            <h2>texticco</h2>
        </div>
</section>

JS :

import { WaviTxt } from './node_modules/texticco/script.js';
// Example usage: Initialize with any "Color" of choice
WaviTxt('turquoise');

Result :

2. SparkiTxt

HTML :

<canvas id="canvas" style="background-color: black;"></canvas>

JS :

import { SparkiTxt } from './node_modules/texticco/script.js';
// Example usage: Initialize with any "Text",Position on X axis,Position on Y axis 
SparkiTxt("Texticco", 0, 0);

Result :

3. TypoTxt

HTML :

<div id="typo"></div>

JS :

import { TypoTxt } from './node_modules/texticco/script.js';

var textArray = new Array(
    "Texticco is an easy-to-use NPM package.",
    "It is designed for creating stunning text animations with minimal effort.",
    "Texticco offers a variety of animations to make your text stand out"
);

// Example usage: Initialize with any 'String ~ Array like above
TypoTxt(textArray);

Result :

4. FoldiTxt

HTML :

<p>
    <span data-text="T">T</span>
    <span data-text="e">e</span>
    <span data-text="x">x</span>
    <span data-text="t">t</span>
    <span data-text="i">i</span>
    <span data-text="c">c</span>
    <span data-text="c">c</span>
    <span data-text="o">o</span>
</p>

JS :

import { FoldiTxt } from './node_modules/texticco/script.js';

// Example usage: Call the function with a 'Color' value
FoldiTxt('Red');

Result :

5. SymphoniTxt

HTML :

<div class="word">
    <span>T</span>
    <span>e</span>
    <span>x</span>
    <span>t</span>
    <span>i</span>
    <span>c</span>
    <span>c</span>
    <span>o</span>
</div>

JS :

import { SymphoniTxt } from './node_modules/texticco/script.js';

// Example usage: Call the function with a 'Color' value for text 
SymphoniTxt("white");

Result :

6. NeonTxt

HTML :

<div class="neon">
    <h1>Texticco</h1>
</div>

JS :

import { NeonTxt } from './node_modules/texticco/script.js';

// Call the function with the desired neon color
NeonTxt("red");

Result :

Contributing

Contributions are welcome! If you have an idea for an improvement or a new feature, feel free to open an issue or submit a pull request.

1. Fork the repository.
2. Create a new branch

   git checkout -b feature-branch

3. Make your changes and commit them

   git commit -m 'Add some feature'

4. Push to the branch

   git push origin feature-branch

5. Open a pull request.

License

Texticco is licensed under the MIT License. See the LICENSE file for more details.