TypeWaveFlow

TypeWaveFlow is a lightweight package that provides a simple yet visually appealing effect for displaying text in a wave-like motion. With just a few lines of code, you can add a TypeWaveFlow effect to your web application, giving your users an engaging and dynamic experience.

Features

• TypeWaveFlow effect for displaying text in a wave-like motion
• Dynamic word, character set, console element, and delay settings
• Works in JavaScript, React, and Angular

Rotation Print

Smooth Print

After Effect

Scroll Print

*Do use CSS overflow-y: scroll in the element in which you're printing to give scrolling effect

Usage

Function Parameters

• word (string, required): The word to be displayed in the TypeWaveFlow effect.
• consoleElemId (DOM element, required): The DOM element where the effect should be displayed.
• characters (array, contains default value): An array of characters to be displayed in the effect. By Default it contains 36 characters consisting 26 alphabets & 0 - 9 integers.
• delay (number, contains default value): The delay (in milliseconds) between each frame of the effect. By Default it is 20 (in milliseconds)
• completeLimit (number, contains default value): Only required when using scroll print effect to define how many times the complted word should print. By Default it is 10.

1
2// order of function parameters
3TypeWaveFlow.rotationPrint(word, consoleElemId, characters, delay)
4
5// parameter completeLimit should only be required in Scroll Print Effect
6TypeWaveFlow.rotationPrint(word, consoleElemId, characters, delay, completeLimit)

1
2// available functions
3
4TypeWaveFlow.rotationPrint(word, consoleElemId, characters, delay)
5
6TypeWaveFlow.smoothPrint(word, consoleElemId, characters, delay)
7
8TypeWaveFlow.afterEffect(word, consoleElemId, characters, delay)
9
10TypeWaveFlow.scrollPrint(word, consoleElemId, characters, delay, completeLimit) // parameter completeLimit should only be required in Scroll Print Effect
11
12

Via CDN

1
2<script src="https://cdn.jsdelivr.net/npm/type-wave-flow"></script>
3

1 const word = 'hello world'
2 const consoleElemId = 'console'
3 const characters = ['q', 'w', 'e', 'r', 't', 'y']
4 const delay = 50
5
6 // Using default values for characters & delay (in milliseconds)
7 window.onload = () =>  TypeWaveFlow.rotationPrint(word, consoleElemId); 
8 
9 
10 // Using custom parameters for characters & delay (in milliseconds)
11 window.onload = () =>  TypeWaveFlow.rotationPrint(word, consoleElemId, characters, delay); 

Via NPM

To install the package, run npm install type-wave-flow

In React

1import React, { useEffect, useRef } from 'react';
2import { TypeWaveFlow } from 'type-wave-flow';
3
4function MyComponent() {
5  const consoleRef = useRef(null);
6  const consoleRefTwo = useRef(null);
7
8  useEffect(() => {
9    // using default values for characters & delay
10    const word = 'hello world'
11    
12    TypeWaveFlow.rotationPrint(word, consoleRef);
13  }, []);
14
15  return <div ref={consoleRef}></div>;
16  
17  
18  
19  useEffect(() => {
20    // using custom parameters
21    const word = 'hello world'
22    const characters = ['q', 'w', 'e', 'r', 't', 'y']
23    const delay = 50
24    
25    TypeWaveFlow.smoothPrint(word, consoleRefTwo, characters, delay);
26  }, []);
27
28  return <div ref={consoleRefTwo}></div>;
29  
30}

In Angular

1import { Component, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
2import { TypeWaveFlow } from 'type-wave-flow';
3
4@Component({
5  selector: 'app-my-component',
6  template: '<div #console></div>   <div style="overflow-y: scroll" #printScroll></div>'
7})
8export class MyComponent implements AfterViewInit {
9  @ViewChild('console', { static: false }) consoleRef: ElementRef;
10  @ViewChild('printScroll', { static: false }) printScrollRef: ElementRef;
11
12  ngAfterViewInit(): void {
13    // using default values for characters & delay
14    const word = 'hello world'
15    
16    TypeWaveFlow.rotationPrint(word, this.consoleRef.nativeElement);
17  }
18  
19  
20  
21  ngAfterViewInit(): void {
22    // using custom parameters
23    // argument completeLimit is number of times the completed word should print while scrolling
24    const word = 'hello world'
25    const characters = ['q', 'w', 'e', 'r', 't', 'y']
26    const delay = 50
27    const completeLimit = 20
28    
29    TypeWaveFlow.scrollPrint(word, this.printScrollRef.nativeElement, characters, delay, completeLimit);
30}

Upcoming Features

• Option to display the effect in different colors or gradients
• Option to display effect in different patterns
• Ability to pause and resume the effect
• Option to change the direction of the wave animation (e.g. left-to-right, right-to-left)

We are constantly working to improve and expand the capabilities of TypeWaveFlow, so stay tuned for updates and new features!

We are always looking for ways to improve and enhance our software, so please feel free to share any feedback or ideas you may have!

Contribution

If you'd like to contribute to TypeWaveFlow, please fork the repository and submit a pull request.

License

MIT