3 ms·

Show HN: Hacker News on a train station-style flip board

114 points by PaybackTony 3mo ago

Although the page itself is more just fun to have made and look at (I like the flip sound), the fun part is how I made it to verify the (and I hate to say it) vibe host service I've been working on. The recent flip board back and forth's on Twitter (X) are what inspired me. The idea here is that people (like me or you) can create something neat like this, and others can remix it, change it and publish their own version. This is that all in action and it worked great. I wrote a blog about it (the blog is dogfooding, it's just an app hosted on quickish that uses the built in db lib). For the HN version of this flip board I use their firebase api via the built in quickish server functions that make use of the fact that the front-end can get realtime updates (now that you mention firebase) from cloud function db updates. Of course that's over-kill but I wanted to show something fun. You can remix and host your own version for free, just need a google oauth login that's it. OG flip board I built (Portland Based - Current Weather): https://popflame.quickish.space/flipboard-preview https://popflame.quickish.space/flipboard-preview Blog post that dives a tiny bit deeper: https://popflame.quickish.space/blog/hacker-news-on-a-split-flap-board/ https://popflame.quickish.space/blog/hacker-news-on-a-split-...

blue1 3mo ago
To my ears, the sound is wrong. At least the Solari flip boards had a typical rustling sound, this is too much clicking.
- PaybackTony 3mo ago
  Sound could be better.
deleted 3mo ago
[deleted]
kevinten10 3mo ago
[flagged]
throw03172019 3mo ago
Rate limited. RIP
- PaybackTony 3mo ago
  Yes, got rate limited. Didn't expect the traffic but it's back
freitasm 3mo ago
Sounds cool. Couldn't see it though. "Rate limited" on my first visit. Using a static IPv4 and IPv6. Unless your host is limiting number of requests, indiscriminately.
- PaybackTony 3mo ago
  Was CloudFlare limiting after a large burst of interest. All better. Only took a leg
gorgoiler 3mo ago
Do I recognize the UI style here as being that cool, hacker, dark-mode, glowing aura text, rounded mono typeface style? Whoever came up with that motif and inadvertently coaxed fhe AI tools into copying it into ubiquity has had an enormous impact on the world! There are a lot of cells used for rank and vote count. If you used A-Z for rank and dropped the vote count you’d be able to see 50% more title, which is a lot. Vote count could be an optional overlay shown at the end of the title in the last 3 seconds of each frame. Or just drop it altogether.
- graypegg 3mo ago
  And there's always a flashing "ONLINE" or "LIVE" indicator for whatever reason. I think the general aestetic is more just pointlessly greebled UI [0] since more stuff on screen has got to directly correlate with people's first surface-level impression of "how much AI can do". A sort of phosphor-glowing TTY-esque interface just has many greebling options, maybe? You nudge the vectors towards impressing people, and implied complexity is one way to impress people. [0] https://en.wikipedia.org/wiki/Greeble https://en.wikipedia.org/wiki/Greeble
- PaybackTony 3mo ago
  I don't disagree at all on the AI design. I can do a bit more (I have worked as a senior UI engineer at Nike and AWS), the reality is many of the parts I wanted to focus on outside the UI of the flaps got that "Claude Designed This" feel to it. The original drop flap board I remixed this from (also one I did as a demo) I added a couple more rows and cols. I played with a few things but felt like this was more in-line with what I wanted the result to be but it still feels like it could be better.
StizzurpXDD 3mo ago
The title of the first post is crealy readable, while the rest of the texts and numbers are glitched. It's cool though.
- PaybackTony 3mo ago
  Was not expecting 30k visits in an hour. Patched up the mobile view and got everything running again. Oof. Thank you for checking it out!
  - sixtyj 3mo ago
    Nice graphics. It reminded me https://en.wikipedia.org/wiki/Split-flap_display https://en.wikipedia.org/wiki/Split-flap_display In Prague near the main railway station there is a physical installation made from discarded Pragotron split-flap cards. Installation named Variety was made by Richard Loskot and it randomly generates sentences.
- jimmydddd 3mo ago
  Are there supposed to be article titles? It just looks like giberish to me?
- sombragris 3mo ago
  Still today, the posts below the title are all gibberish.
gab007 3mo ago
Neat. Now where can I get a real physical flip board, lol?
- jimmcslim 3mo ago
  You can! https://www.vestaboard.com https://www.vestaboard.com
  - qingcharles 3mo ago
    Or if you're a bit handy this guy is selling the plans to make your own: https://www.youtube.com/watch?v=-C8_AtxEEQc https://www.youtube.com/watch?v=-C8_AtxEEQc
bitwize 3mo ago
I was kinda hoping that you would arduino the Hackernews front page onto an actual train-style flipboard, but this is a pretty cute web trick.
- PaybackTony 3mo ago
  Stand by.... I agree.
Otek 3mo ago
Please vibecode mobile support
- krishnasangeeth 3mo ago
  [flagged]
blourvim 3mo ago
quite satisfying to hear the clicks
krishnasangeeth 3mo ago
[flagged]
kaueg 3mo ago
After clicking "?", the help page mentions there should be a settings icon [1], but it seems its not visible. [1]: "Up top: opens settings (page timing and a token to drive the board from a script), ♪ toggles the flap clicks, and goes fullscreen. Own this board? Click any row to pin your own text over it."
- PaybackTony 3mo ago
  If you were to "Remix" it and have it on your own quickish page that settings dialog appears however it is simply an oversight on my part that it doesn't say that explicitly.
anonu 3mo ago
With AI coding tools lots of people are having the same idea. Here is another one that uses sampled split flap sounds: https://www.minisplitflap.com https://www.minisplitflap.com
- conartist6 3mo ago
  That's a pretty good one. It's more realistic than the one shared here in that it uses an actual deck of cards so that all the segments don't arrive at their destination at exactly the same moment, but rather the message is revealed as the cards arrive one by one (depending on how far they had to travel to get there). I love that effect! Anyway, here's one that I made with jQuery 10 years ago (since forked and now maintained by qrion) https://qrion25.github.io/splitflap/ https://qrion25.github.io/splitflap/ In terms of features I haven't seen other split flap displays offer, it rolls a little better (more than one flap segment can be rolling at a time, letting the rolling animation be slower) it lets you set up a completely custom deck, and can even support muliple letters or numbers on a single flap (like the real displays sometimes do -- they might have the name of a whole train station)
- PaybackTony 3mo ago
  I tried to use a more digital sound at first, then went a step more realistic (ElevenLabs actually) but would have preferred to just record a real one.
dangay 3mo ago
[dead]
insane_dreamer 3mo ago
love the design. I agree with another poster who commented that the sounds are the wrong click.
goyoon 3mo ago
[dead]
vladsiu 3mo ago
[dead]
PaybackTony 3mo ago
For those finding it now: Added more realistic flap sound effects. Mobile improvements. UI tweaks with flap animations. You can remix this and make your own, change it, etc. Download the source and have some fun. Thank you all!
WenboS 3mo ago
[flagged]
HexlifeX 3mo ago
Pretty cool! would be nice if it was customizable, like how quickly it finishes, would be a nice widget for a home media display.
- PaybackTony 3mo ago
  I built this by testing a workflow for a service I started (hobby project) called quickish (https://quickish.site https://quickish.site). You can just remix this (basically forks it and hosts it on your own space on quickish) for free. Can be public too. Can use the "Remix" button on the bottom right (just need a google account to login) or on CLI run: `npm i -g quickish && quickish remix create quickish/hn-flipboard`, there is also a quickish/flipboard that the HN one was remixed from (just a git fork behind the scenes). You can work on it locally however you like, there is also a `quickish dev` command you can run in the site folder that starts up a local dev server with live reload. When you're happy with the changes just run `quickish . /flipboard` and it will publish it. With all of that said, I am working on a version that is exactly what you are asking for. An editable board that lets you change the grid size, give it a unique url and password protect on top of a POST endpoint that let's you change the content via API (also all hosted on quickish) for that exact use case. I have a few more optimizations I am going through and will get that out. I appreciate the kind words!

114 points by PaybackTony 3mo ago

blue1 3mo ago

To my ears, the sound is wrong. At least the Solari flip boards had a typical rustling sound, this is too much clicking.

PaybackTony 3mo ago
Sound could be better.

deleted 3mo ago

[deleted]

kevinten10 3mo ago

[flagged]

throw03172019 3mo ago

Rate limited. RIP

PaybackTony 3mo ago
Yes, got rate limited. Didn't expect the traffic but it's back

freitasm 3mo ago

Sounds cool. Couldn't see it though. "Rate limited" on my first visit. Using a static IPv4 and IPv6. Unless your host is limiting number of requests, indiscriminately.

PaybackTony 3mo ago
Was CloudFlare limiting after a large burst of interest. All better. Only took a leg

gorgoiler 3mo ago

Do I recognize the UI style here as being that cool, hacker, dark-mode, glowing aura text, rounded mono typeface style? Whoever came up with that motif and inadvertently coaxed fhe AI tools into copying it into ubiquity has had an enormous impact on the world! There are a lot of cells used for rank and vote count. If you used A-Z for rank and dropped the vote count you’d be able to see 50% more title, which is a lot. Vote count could be an optional overlay shown at the end of the title in the last 3 seconds of each frame. Or just drop it altogether.

graypegg 3mo ago
And there's always a flashing "ONLINE" or "LIVE" indicator for whatever reason. I think the general aestetic is more just pointlessly greebled UI [0] since more stuff on screen has got to directly correlate with people's first surface-level impression of "how much AI can do". A sort of phosphor-glowing TTY-esque interface just has many greebling options, maybe? You nudge the vectors towards impressing people, and implied complexity is one way to impress people. [0] https://en.wikipedia.org/wiki/Greeble https://en.wikipedia.org/wiki/Greeble
PaybackTony 3mo ago
I don't disagree at all on the AI design. I can do a bit more (I have worked as a senior UI engineer at Nike and AWS), the reality is many of the parts I wanted to focus on outside the UI of the flaps got that "Claude Designed This" feel to it. The original drop flap board I remixed this from (also one I did as a demo) I added a couple more rows and cols. I played with a few things but felt like this was more in-line with what I wanted the result to be but it still feels like it could be better.

StizzurpXDD 3mo ago

The title of the first post is crealy readable, while the rest of the texts and numbers are glitched. It's cool though.

PaybackTony 3mo ago
Was not expecting 30k visits in an hour. Patched up the mobile view and got everything running again. Oof. Thank you for checking it out!
- sixtyj 3mo ago
  Nice graphics. It reminded me https://en.wikipedia.org/wiki/Split-flap_display https://en.wikipedia.org/wiki/Split-flap_display In Prague near the main railway station there is a physical installation made from discarded Pragotron split-flap cards. Installation named Variety was made by Richard Loskot and it randomly generates sentences.
jimmydddd 3mo ago
Are there supposed to be article titles? It just looks like giberish to me?
sombragris 3mo ago
Still today, the posts below the title are all gibberish.

gab007 3mo ago

Neat. Now where can I get a real physical flip board, lol?

jimmcslim 3mo ago
You can! https://www.vestaboard.com https://www.vestaboard.com
- qingcharles 3mo ago
  Or if you're a bit handy this guy is selling the plans to make your own: https://www.youtube.com/watch?v=-C8_AtxEEQc https://www.youtube.com/watch?v=-C8_AtxEEQc

bitwize 3mo ago

I was kinda hoping that you would arduino the Hackernews front page onto an actual train-style flipboard, but this is a pretty cute web trick.

PaybackTony 3mo ago
Stand by.... I agree.

Otek 3mo ago

Please vibecode mobile support

krishnasangeeth 3mo ago
[flagged]

blourvim 3mo ago

quite satisfying to hear the clicks

krishnasangeeth 3mo ago

[flagged]

kaueg 3mo ago

After clicking "?", the help page mentions there should be a settings icon [1], but it seems its not visible. [1]: "Up top: opens settings (page timing and a token to drive the board from a script), ♪ toggles the flap clicks, and goes fullscreen. Own this board? Click any row to pin your own text over it."

PaybackTony 3mo ago
If you were to "Remix" it and have it on your own quickish page that settings dialog appears however it is simply an oversight on my part that it doesn't say that explicitly.

anonu 3mo ago

With AI coding tools lots of people are having the same idea. Here is another one that uses sampled split flap sounds: https://www.minisplitflap.com https://www.minisplitflap.com

conartist6 3mo ago
That's a pretty good one. It's more realistic than the one shared here in that it uses an actual deck of cards so that all the segments don't arrive at their destination at exactly the same moment, but rather the message is revealed as the cards arrive one by one (depending on how far they had to travel to get there). I love that effect! Anyway, here's one that I made with jQuery 10 years ago (since forked and now maintained by qrion) https://qrion25.github.io/splitflap/ https://qrion25.github.io/splitflap/ In terms of features I haven't seen other split flap displays offer, it rolls a little better (more than one flap segment can be rolling at a time, letting the rolling animation be slower) it lets you set up a completely custom deck, and can even support muliple letters or numbers on a single flap (like the real displays sometimes do -- they might have the name of a whole train station)
PaybackTony 3mo ago
I tried to use a more digital sound at first, then went a step more realistic (ElevenLabs actually) but would have preferred to just record a real one.

dangay 3mo ago

[dead]

insane_dreamer 3mo ago

love the design. I agree with another poster who commented that the sounds are the wrong click.

goyoon 3mo ago

[dead]

vladsiu 3mo ago

[dead]

PaybackTony 3mo ago

For those finding it now: Added more realistic flap sound effects. Mobile improvements. UI tweaks with flap animations. You can remix this and make your own, change it, etc. Download the source and have some fun. Thank you all!

WenboS 3mo ago

[flagged]

HexlifeX 3mo ago

Pretty cool! would be nice if it was customizable, like how quickly it finishes, would be a nice widget for a home media display.

PaybackTony 3mo ago
I built this by testing a workflow for a service I started (hobby project) called quickish (https://quickish.site https://quickish.site). You can just remix this (basically forks it and hosts it on your own space on quickish) for free. Can be public too. Can use the "Remix" button on the bottom right (just need a google account to login) or on CLI run: `npm i -g quickish && quickish remix create quickish/hn-flipboard`, there is also a quickish/flipboard that the HN one was remixed from (just a git fork behind the scenes). You can work on it locally however you like, there is also a `quickish dev` command you can run in the site folder that starts up a local dev server with live reload. When you're happy with the changes just run `quickish . /flipboard` and it will publish it. With all of that said, I am working on a version that is exactly what you are asking for. An editable board that lets you change the grid size, give it a unique url and password protect on top of a POST endpoint that let's you change the content via API (also all hosted on quickish) for that exact use case. I have a few more optimizations I am going through and will get that out. I appreciate the kind words!