Project Overview

A small learning project I built to explore how to create a typing-like animation and animate the transition of letters on a page using vanilla JavaScript. The main goal was to practice core JS fundamentals, especially timing and sequencing, by implementing different animation behaviors with setTimeout (and iterative updates to the DOM).

This project was inspired by the Decryption Simulation App, which simulates a “password decryption” effect done by me. After finishing this application, I challenged myself to recreate the animation using my own knowledge, then later applied what I learned to an older project I had built with Romero Mendonça and Werton Silva - the AssinaAí (Checkin Now!) laboratory attendance system.

Demo Video

Direct video link: 1730137068160.mp4

What I Practiced / Implemented
  • Letter-by-letter text updates (typing effect)
  • Character replacement / “scramble” transitions (decrypt-like feel)
  • Timing control with setTimeout chains
  • DOM manipulation for smooth visual updates
  • Small feature experiments to understand animation trade-offs (speed, readability, pacing)
Technology Stack
  • Language: Vanilla JavaScript (ES6+)
  • Concepts: DOM manipulation, timing functions (setTimeout), string manipulation, animation sequencing
  • No frameworks or libraries - pure JavaScript implementation
Project Context

This was a learning-focused project to deepen my understanding of:

  • JavaScript timing and sequencing
  • DOM manipulation techniques
  • Animation principles and trade-offs
  • Recreating effects from scratch without relying on libraries

The project demonstrates practical application of core JavaScript concepts in creating engaging visual effects.