TappyTyper

A basic typewriter type effect for Angular websites.

Includes basic styling and links.

Use

TS:

import { Component } from '@angular/core';
import { TyperContent, TyperContentOptions } from './typer/typer.service';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.less']
})
export class MyComponent {
  typerContent: TyperContent = new TyperContent(`Hi, this is [[style:bold##TappyTyper]].
  I'm a typewriter component. I support [[style:italic##a few]] different styles.
  This includes [[url:https://google.com##links]]. And multi-line text.
  I even support a few basic [[color:red##C]][[color:orange##o]][[color:yellow##l]][[color:Green##o]][[color:blue##u]][[color:indigo##r]][[color:violet##s]]`, 
  {speed: 20, delay: 2000});
}

HTML:

<tappy-typer [content]="tappyTyperContent"></tapper-typer>

TappyTyper uses its own syntax for markup because... Uhh... I wasn't aware of anything that works for a similar purpose. Most text exists as normal text in a string. If you want to style a block, you can put some text in this format:

const typerStringTemplate = "NON STYLED TEXT [[STYLE-IDENTIFIER:STYLE-DATA##THE TEXT I WANT TO STYLE]] MORE NON-STYLED TEXT;

1. Two square brackets to start and end.
2. a style-identifier such as "style", "color", or "link", a separating colon, and the style-relevant data.
3. Two hash-marks to close the style.
4. And the text that is being stylised.

Here's some examples:

const coloredTyperContent = "These word are [[color:blue##feeling kind of blue]], I guess we could [[color:orange##cheer them up]]."; // you can apply one color at once

const styledTyperContent = "I'm feeling [[style:bold##kind of bold]]. I don't know how to feel [[style:italic##italic]], though. But I can be [[style:bold##style:italic##both at once]]!" // you can apply multiple styles at once.

const linkTyperContent = "I feel like I could [[link:https://github.com##host some code]]." // for links, the style-relevant data is the URL, and default color is blue. You can change override that with one of our other colours, though.

const mixedTyperContent = "I want to [[link:https://github.com##color:red##style:bold##host some bold, red code]]." // you can chain multiple different tags at once to achieve different styles.

Support

This is a hobby project. It's bound to be a little janky. Sorry.

I currently have no particular intention of supporting this beyond my own needs, but may extend it further if there are requests and I have time/interest in the request. Code submissions will be considered on the same basis.

If you find this project useful, feel free to star or fund it. I can't promise that it'll mean more support, but it's a good way to get my attention. :woman_shrugging:

Potential future features (if I feel like it)

• Custom color input.
• Better fault tolerance/handling.
• Support for style blocks in style blocks, maybe? (might be a lil' hairy)
• More styles - underline, strikethrough, etc.
• Accepting start/stop/skip to end trigger functions.

Licence

Anyone is free to use, fork, steal etc. this code at their own risk. Credit me if you wanna, don't if you don't.