1.1.1 • Published 1 year ago

texticco v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

texticco - Make Your Text Pop with Style

MasterHead


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 :

Wavitext

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 :

Wavitext

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 :

Wavitext

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 :

Wavitext

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 :

Wavitext

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 :

Wavitext

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.

1.1.1

1 year ago

1.1.0

1 year ago

1.0.0

1 year ago