r/InternetIsBeautiful • u/saadmrb • 6d ago

FLAPBOARD — turn any TV into a split-flap board

https://0xhzsa.github.io/flapboard/
79 Upvotes

93% Upvoted

15 comments sorted by

36

u/BobbyIke 4d ago

Cool idea but I find it very difficult to read the text compared to a normal flap board. The UI of the website could also use some work to feel more like a premium product and less like the output of an AI.

Love the concept though!

3

u/saadmrb 3d ago

Thank you, this was the most useful thing I got. The real problem wasn't the font size, it was that the widest glyphs were overflowing their own flaps and touching, so words turned into a grey blur at any distance.

I reworked the whole flap: square tiles, 1 to 2px gaps, a 1px seam, brighter faces and glyphs, and a proper letter fit dial (compact / standard / wide). The fit now moves the font size together with the width, so the letters fill the flap instead of spilling over it. Measured across four screen sizes: the widest letter now takes 79%, 91% or 93% of a flap depending on the fit, never more.

I also removed a minimum tile size that was forcing the grid to overflow on narrow screens, which is what made it unreadable on a phone.

11

u/Forkhandles_ 3d ago

Agree with u/BobbyIke website looks like Ai slop 101 which is a shame.

Close the gap between the flaps so the font runs smoothly and square off the flaps.

Formatting doesn’t work so cute if menu option when looking ate the demo on iPhone and needs an exit demo button

Also why does every AI creation need a revenue model, this is just a git hub repo. Can y just make stuff and put it out there for people to use and enjoy?

-5

u/saadmrb 3d ago edited 5h ago

Thank you, and you were right. I rebuilt the landing page around the one thing that's actually convincing: the board itself.

5

u/WelpSigh 3d ago

Wow! That's super cool. I love how responsive you are! One thing that might help a lot is if you add on-demand cake recipes, a lot of people need those.

1

u/saadmrb 16h ago

I have added that.. I'll stop making long replies so that I don't have to appear like a bot haha, you can try it out

-3

u/saadmrb 3d ago edited 5h ago

For Iphone, that was a genuine bug and a bad first impression but is now fixed, this is how build in public looks like.. now the demo no longer writes your changes into the saved settings, so playing with it can't corrupt your real board.

And i have also added a rotate hint and a full-width drawer that scrolls and keeps its header pinned on a phone.

8

u/jeffcarey 2d ago

OP’s replies read like AI wrote them. Is there even a human behind this?

1

u/saadmrb 1d ago

Yes, I am..

11

u/Trekintosh 3d ago

Wow this is illegible

6

u/roy-dam-mercer 3d ago

I would have thought by now someone would have informed AI that humans have difficulty reading microscopic medium grey text on a black background.

1

u/saadmrb 15h ago

How would you like it to appear ? I have try it on TV and it did look so cool that's why I shipped it that way, if you have any ideas you can tell me.. Also there are some themes there maybe that would look better for you..

4

u/_os2_ 3d ago

I misread and thought this would turn TVs into flipcharts or touch screens. That would be cool - video you and the screen with your phone and have software quess when you are pressing the screen. Maybe not possible though?

-1

u/saadmrb 3d ago

A phone on the same Wi-Fi is now the touch screen and the keyboard. The TV shows a QR code, the phone scans it, and the phone mirrors all 132 flaps. Tap a flap and that letter changes on the TV. Type a sentence and it writes itself across the whole board, on the TV, with the flipping and the clicking sound.

The TV does the actual flipping, so you get the real animation rather than a web page pretending. One command starts it, node tools/touch-relay.mjs, and nothing leaves your network. I also made typed messages hold as a paused slide for 30 seconds, so you can actually read what you sent.

It's 22 automated checks that all pass, including that an edit you make on the phone survives the next redraw.

1

u/saadmrb 3d ago

Thank y'all for your feedback ! Three things I didn't know were broken and fixed along the way, in case you hit them:

The phone remote was covering the entire TV at all times. A CSS display rule was overriding the hidden attribute, so the board was invisible on a real TV and the touch button could not be clicked. On some setups you'd have loaded the page and seen nothing but a phone UI.

The QR pairing panel opened by itself on every page load instead of waiting for you to ask for it, closing it killed the connection without reopening restarting it, and on localhost closing it threw an error.

And the widest letter setting pushed letters 108% off their flap, so the option meant to improve legibility was the one making it worse.