Restructure around the basic word processor

[toBeOfUse]

Now that I don't need to present a bunch of content such that it's impressive that I made it all in 24 hours in a hackathon, the home page should be centered on the one-handed word processor, which is the only relatively dignified part of the whole production. The tutorial and "fun game" might as well keep existing, but they will have a disclaimer and the links to them will be small. Ideally, there should be some kind of animation demonstrating how the one-handed word processor works. Maybe there could be a feature where you type normally, but it shows you what you would have to press in single-handed mode to achieve the same thing?

The word processor should also be glossier and more full-featured from a typography perspective. There should be a button to copy the content out of it as rich text.

[toBeOfUse]

Here is one potential design for the page:

If the keyboard state representation graphic is too minimized in that one, this is pretty simplistic but would probably be effective and is bento-y:

A split keyboard display would maybe look cool and help people focus on one hand at a time:

A lot of split keyboard designs are kind of asymmetric and jagged, which I think would look weird in this context; the keyboard in the above should probably be ortholinear, like this:

The main downfall of the "split keyboard" view, especially an orthogonal one, is that it probably doesn't match the real physical keyboard that the IRL user has, making it harder to use for reference. This suggests that there could be a split keyboard mode for the page, but it shouldn't be the default.

The mobile design is really a complete afterthought since on mobile, you can already reach your whole keyboard with one hand...

[toBeOfUse]

I am now really curious as to whether I could pull this design off, so that only one half of the keyboard is displayed at any one time:

It would default to right hand mode. Smoothing the transition between modes might be tricky - I'm guessing that text alignment isn't a transitionable property in CSS. But keeping all the text left-aligned probably wouldn't be bad either. The main benefit would be the illustration of "you only use this side of the keyboard." You would lose a little bit of visual representation that the keys are just mirrored from side to side. But that doesn't jump out of the graphic anyway, and could easily be explained by the text.

[toBeOfUse]

This is a very rough version of the basic design I'm probably going with. The button on the bottom center should look like a button, and it stays in place; the text in it just changes.