HTML Text Animation Editor

TL;DR: I made a Text Animation Editor

I wanted to make my 404 page more exciting than just a static message, so I decided to add an animation to it. I came up with the idea of making some sort of text animation rather than a video or gif (which seem to be quite common around the web).

So I started to Google. I looked up “text animation creator”, “ASCII animation maker”, and other stuff like that, but I was having a hard time finding one that would let me make an animation from scratch (there’s probably one out there, just not that I could find). So I decided to make my own.

I started by making a UI and adding all the features I wanted - different text alignments, cycling through frames, adding and deleting frames, and playing the animation. I also added some buttons to export the animation in a few different formats, and a way to import animations I’d created.

Once I got the basic structure down, I decided to add a few more features - cloning frames of the animation, copying the exported text to the clipboard, and dots to show where spaces are.

You can view the finished page here. I’d love to hear your feedback on ways I can improve it - shoot me an email at [email protected]

Here’s an example of the end result:

The JSON for that animation looks like this:

{

   "align": "left",

   "frames": [

      ".\n",

      "W.\n^",

      "OW.\n^",

      "WOW.\n^ ^",

      ".WOW.\n  ^",

      " .WOW.\n  ^ ^",

      " ..WOW.\n    ^",

      " . .WOW.\n    ^ ^",

      ".   .WOW.\n      ^",

      "    ..WOW.\n      ^ ^",

      "    . .WOW\n        ^",

      "   .   .WO\n        ^",

      " .      .W\n",

      "         .\n",

      "\n"

   ]

}

On my 404 page I have a spinning ?:

The JSON for the question mark looks like this:

{

   "align": "center",

   "frames": [

      "## _\n/  __ \\\n| /  | |\n    / /\n  / /\n\n[ ]",

      "___\n/ _ \\\n|/ | |\n  / /\n//\n\n[]",

      "__\n/  \\\n|  |\n  /\n/\n\nH",

      "_\n/\\\n||\n /\n/\n\nI",

      "\n|\n|\n|\n|\n\n|",

      "_\n/\\\n||\n\\ \n\\\n\nI",

      "__\n/  \\\n|  |\n\\  \n\\\n\nH",

      "___\n/ _ \\\n| / \\|\n\\ \\  \n\\\\\n\n[]",

      "## _\n/ __  \\\n| |  \\_|\n\\ \\    \n\\_\\  \n\n[ ]",

      "___\n/ _ \\\n| / \\|\n\\ \\  \n\\\\\n\n[]",

      "__\n/  \\\n|  |\n\\  \n\\\n\nH",

      "_\n/\\\n||\n\\ \n\\\n\nI",

      "\n|\n|\n|\n|\n\n|",

      "_\n/\\\n||\n /\n/\n\nI",

      "__\n/  \\\n|  |\n  /\n/\n\nH",

      "___\n/ _ \\\n|/ | |\n  / /\n//\n\n[]"

   ]

}