blakazulu

.blink {
  border-right-style: solid;
  animation: 1s blink infinity;
}
@keyframes blink {
  to {
    opacity: 0;
  }
}

blakazulu

<div>
  <span #textElement class="text"></span>
  <span #blinkElement class="text blink"></span>
</div>

blakazulu

import {
  AfterViewInit, Component, ElementRef, Input, Renderer2, ViewChild
} from "@angular/core";

@Component({
  selector: "app-type-delete",
  templateUrl: "./type-delete.component.html",
  styleUrls: ["./type-delete.component.css"]
})
export class TypeDeleteComponent implements AfterViewInit {

blakazulu

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";
import { BubblingTextDirective } from "./bubbling-text.directive";

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, BubblingTextDirective],
  bootstrap: [AppComponent]

blakazulu

body {
  background-color: #2b2c34;
}

.animated-text {
  font-family: "VT323", monospace, sans-serif;
  text-shadow: 0 0 1px #ffffff;
  position: fixed;
  bottom: -100vh;
  user-select: none;

blakazulu

import {AfterViewInit, Directive, ElementRef, Input, Renderer2} from '@angular/core';

@Directive({
  selector: '[sbzTextAnimation]'
})
export class NgxSbzTextAnimationDirective implements AfterViewInit {
  @Input() maxFontSize = 20;
  @Input() colorSchemeArray: string[];
  @Input() position: 'left' | 'right' = 'right';
  @Input() percentOfScreen = 30;

blakazulu

@keyframes float-animation {
  0% {
    bottom: 100vh;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;

blakazulu

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatInputModule } from "@angular/material/input";
import { FormsModule } from '@angular/forms';

@NgModule({

blakazulu

<section class="flex">

  <section>
    <h1>This is an Input Eye Trace animation for login</h1>
  </section>

	<section class="svg-container">
		<svg #svgEye width="200" viewBox="0 0 911 654" fill="none" xmlns="http://www.w3.org/2000/svg">
			<g id="undraw_Surveillance_re_8tkl 1">
				<path id="eyeball"

blakazulu

.flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  
    .form-field {
      width: 200px;
    }