There is a problem with the 2 characters colon : and comma , since these are used as separators. I will see what I can do about that. Until then you can get the other characters into the string by using BACKQUOTE (GRAVE ACCENT) delimiters and code it thus:
const range = `A:Z,0:9,!:!,':',*:*, : `; // The range of characters that are on the flipcards
No problem, I’ll do that when I make the other change.
Your wish is my command. There is a new parameter to accomplish this:
const additional_chars = `:*,+-' \`\\`; // Extra characters not in already in the range. Grave-accent and backslash are escaped
I made the screen background a parameter, but did it slighly differently from your suggestion. The parameter is:
--screen_background : linear-gradient(to bottom, #303030 0%,#545354 100%); /* or a color, like black, or #1d1d1d */
As you can see it enables gradients to be used (even images as well) instead of just a solid colour.
Thanks for adding these new parameters @Elusien 
I thought of another little thing that, in my opinion, would add even more realism.
But I fear it would require a lot of changes in the entire script. Let me know what you think.
So here’s the idea 
When the flipping begins, the board gets filled with random characters.
What if we could set the board to start with personalized text?
Something like this maybe?
With “const order” set to ascending, if a specific card is set to start with B and end with S it would flip from B to S then stop.
If it’s set to start with D and end with C it would flip from D to Z, then use all other allowed characters in their proper order, then go from A to C
OK, the event you’ve all been waiting for with bated breath is now here: Flipperboard MkII. This doe a pretty good emulation of a flipperboard where the letters are in 2 halves and the top half flips down to cover the bottom half and reveal the next letter. Here is the HTML file:
Flipperboard_MkII.html.txt (20.7 KB)
and here is a video (recorded by OBS Studio and edited in Shotcut) showing it in use:
This requires quite a rewrite and my kids and grandkids arrive this weekend for a fortnight, so I won’t be able to do much before the New Year, but I will definitely look into doing it.
That looks pretty amazing. Mind blown. You even added the thin black separation line and shadows.
Can’t wait to get back home and play with the file
No hurry of course. Thanks!
If you slow down the animation and increase the size of the flipcards you will see that the perspective I use makes it even more realistic.
I had several false starts when doing the coding and found a few strange limitations of 3D rotation in the plane at 90% to the computer screen, but I got there in the end.
I have put the code on Codepen as a publicly accessible pen for anyone to use/modify:
It’s flipping brilliant! Very realistic and a big improvement. Bravo!
@Elusien Wow! Man! That’s amazing! You are genious!
@MusicalBox Concerning your example and video, might I ask how did you get this sound effect? From where is that imported? And how is that done?
I searched on YouTube to find a video of one of these flip boards. I captured the audio with Audacity and edited that audio (cutting parts of it) until it fit my own video.
I enjoy working out how to get these effects using HTML/CSS/Javascript. It’s very satisfying when it all comes together.
I tried it with my cryptographs and it definitely seems to work.
Do you know if there is an easy way for it to work line by line?
Only by modifying the Javascript. I’ll look into providing a parameter for this.
I was thinking that you would say that. I’m going to look at it myself sometime.
btw, have you seen these “webby” parameter parsing/input systems that exist on some of the CAD systems. They let some parameters be accepted into a form where only the module knows what the parameters will be.
I was thinking it would be great to have this type of parameter input system to make it easier to feed input parameters into the html file.
In actuality, I would suggest that you could even use a Templating engine like CheetahTemplates, Jinja or whatever you like and then distribute the file as a Template that would actually create the final html.
As a user, it would be great to fill in some fields and then get the .html file created in the project directory rather than having to modify the .html file which is scary for even me because I have no test-suite to run regression tests - 
(looks at self and sees grumpy old man)
Because .html opens up so many possibilities it would be nice to see progress made with addons like these and others.
There is now a parameter you can choose to run the flipperboard animations either in sequence or concurrently.
const animate_separately = true; // true: lines animate in sequence; false: lines animate concurrently
I have updated the Flipperboard_MkII.html.txt file in post #1 and post #26 above - Enjoy.
Cool.
I’ve actually been learning pySimpleGUI so that I could use this more easily without editing the HTML myself.
I made a template for this file with a simple gui. I’m just demonstrating how I’m using it for now.