OptiFocus

Text size is functional now and added a basic display of the user’s screentime! (Screentime data shown is currently hardcoded, just getting an example down)
ㅤㅤ
Before, I was using the CSS zoom property to change the text size, so I think that’s why it wasn’t differentiating text from other parts of the display. I used a variable for the text sizes and manipulated that instead, which fixed the feature.(!!!)

Added appearance features! Also synced with gh-pages display of current prototype. Options so far are light/dark mode, custom font size, and dyslexic font.
ㅤㅤ
Dark mode and dyslexic font are functional, but the font size options aren’t quite what I want… the options resize the whole window! So hopefully I can fix that to actually change the font size and not the entire frame size.

so I just realized I can’t upload a gif here but it awkwardly makes some things bigger and not others

Fluffernaut, the first (and second) “MediaMonster,” is here! I added and tweaked many aesthetic customization options. Also displays energy level (0-100) correlating with monster appearance — intent is that number decreases as screen time increases.
ㅤ
The spikes took a few tries. I started by duplicating one spike around the monster, but it looked too artificial. So, I randomized the size and angle of each one.
ㅤ
However, the random function would run and change the monster’s appearance on every render. So, I decided to create a pseudo-randomization that always returns the same output for a given input. Essentially, the appearance of each tuft is predictable, but the overall shape still looks natural because each one is unique!
ㅤ
(edit: formatting)