Rule 34 XYZ
Loading...

Goon-scrolling

8 days ago by Sieghard

I was blushing the whole time I was making this video

Hey everyone. I've been waiting for this moment for a very long time. I finally get to show you a new way of interacting with the site. From here on I'll write "app" instead of "site", because in terms of how you interact with it, it's much closer to an app than a website.


DISCLAIMER

THIS IS A CLOSED PRE-ALPHA, the earliest stage there is (go easy on it)


goon scrolling test

test.rule34.xyz

test.rule34.xyz

test.rule34.xyz

You're the first to see this.

Keep in mind that this is a test build where I'm mainly testing the current state of the codebase. The test.rule34.xyz domain is used strictly for testing.

In other words, this is just a different UI for rule34.xyz, not a separate site with a separate database.

The mobile interface for the other sites will come much later, closer to release.


Mobile version

When I was building the first rule34 site more than 8 years ago, I focused on the desktop interface first, because according to Google Analytics most users were accessing the site from desktop. But time passed, and the balance kept shifting toward mobile.

Right now the user split looks like this:

  • 84% mobile
  • 12% desktop
  • 4% tablet

As you can see, mobile is way ahead. I spent a long time thinking about how to make one interface that works well on desktop and mobile at the same time. After a lot of research I realized it would be simpler to split them, since the two platforms are just too different. Better to have two separate interfaces than one universal one. This way I can play to the strengths of each platform separately.

This also means the desktop version will keep improving. Mouse interactions and other desktop-specific things will be added, and each UI/UX layout will adapt to its own target platform.

Look and feel

Once I committed to designing the app mobile-first, I started asking myself what it should actually be like. The Blazor version taught me a hard lesson. It's better to just study the market, find the players who are solving a similar problem, and take the solutions that work. I looked at who built mobile interfaces and how, down to the UI/UX details. Honestly, I took a lot of inspiration from the UI/UX of TikTok, YouTube Shorts and Instagram Reels.

The first and most important thing, the one that became the foundation of the mobile UI, is moving key navigation to the bottom of the screen, so you never have to reach for the top while holding your phone.

Second is the swipe. I don't think this one needs explaining. Everyone takes this gesture for granted.

Third is navigation. Side swipes should move you between different parts of the app.

Everything else is me compiling the best solutions from other players on the market.

The "back" button / gesture

Since I want the site to be controlled by gestures as much as possible, I also had to account for the back button/gesture. It works differently on different phones and platforms. On regular Android phones it's a plain back button that the browser picks up, on others it's a short swipe from the edge of the screen. Either way, pressing "back" to close a panel that slides out is easier than hunting for a close button. The problem is that on a website you can't just hijack "back" from the browser, because back means moving through browser history. So I have to invent all kinds of tricks to get around those limitations.

Now, while flipping through posts, you can close the viewer with "back". Panels close with "back" too, and dialogs will as well.

And one thing I want to show off. If you open a post, then open Details -> Suggested and open a post from there, you'll be scrolling that post's Suggested feed! You can nest this as deep as you like, and every "back" press takes you to the exact post you came from. I went way out of my way to make this work.

Customization

One of the important features will be tuning the app's UI to your liking. For example:

  • video playback settings (autoplay, auto-mute)
  • interface behavior, like how many video columns to show on wide screens
  • transparency and blur of the interface (adjustable per component)
  • themes (dark by default, light, and system)

All of this customization will be added gradually.

Three separate UIs

Here's the current situation in the project. There are three different UIs that all do the same job of giving you visual access to the site. Let's go through them.

  • app-main. The current version of rule34.xyz, written in Angular.
  • app-next. The mobile version I'm working on now, the one this post is about. Also written in Angular.
  • blazor. A version built a few years ago. Today it's rule34archive.com. Blazor turned out to be a poor fit. The technology has too many critical flaws, so I'm dropping it. The plan is to replace this version with app-next.

Magnum opus

I can safely say that the app I'm building now is my magnum opus. I'm pouring everything I know about frontend/UI/UX into it to show you my vision of what a Rule34 app like this should look and feel like. You could say I'm putting my soul into it. (I put my soul into all of my development work, but here a little more.)

What's next

This is only the beginning. The current build is just a demonstration of what's possible and where the UI/UX is heading. Every feature that already exists in app-main will make its way here over time.

In the near term, after the alpha, I'll switch to other tasks for a while. Then I'll work on playlists and subscriptions, plus the ability to pick a tag for search.

For app-next, the goal is a full release before the end of the year. After that I'll replace all the Blazor versions of the sites with it. At release, every site will show a banner inviting users to switch to the new version.

Depending on AI

goon-scrolling-2.jpg

For several months now I've been using Claude Code as an assistant on the project. It helps me with the routine work. But app-next is complex, especially the behavioral UI and all the hacks, so the codebase is hard to maintain and I find myself leaning on AI more and more. I think I've passed the point of no return. AI has massively raised the ceiling on the kind of project I can handle, but it also means I now depend on it. I just hope AI isn't going anywhere. I have faith it's the same story as the internet. It showed up and never left. So on one hand, yes, I feel the dependence. On the other hand, my productivity has grown a lot and I get far more done in the same amount of time.

Thanks for reading

I hope this wall of text was worth reading. Please try the new site and write in the comments below what you liked and what you didn't. Share your user experience, so to speak. I read every comment and your opinion really matters to me.

P.S. Feast your eyes on the icon app-next will be using for rule34.xyz

site-avatar.png

Comments

To comment you need to sign in or sign up
Or
pazute7118 hours ago
Gagamaru punch
Sieghard Jr1 day ago
Lets go papa
Evalynn Serrano1 day ago
Ts is wild ✌😭
walnut3 days ago
I was using this site fot a few years already but didnt saw this announcment page lol. Never was thinking that this was made by 1 person
hecking_boi3 days ago
LESS GOOO!!! 🔥
Full3 days ago
W
𝙼𝚒𝚢𝚊𝚋𝚒3 days ago
I ngl, the different UI is peak, I hope you can make this site getting better more than he already is. I really appreciate your work.
cosmicyujiro3 days ago
No sé si aquí puedo dar sugerencias o pedidos. Pero me gustaria que duplicaras los botones de desplazamiento, no se como explicarlo. Es decir, a la izquierda está detrás (siguiente publicación), a la derecha esta siguiente (anterior publicación), pero ¿podrías hacer que haya 2 botones en cada lado? A la izquierda, un botón de atrás y otro adelante, y en la derecha un botón de atrás y adelante.
John Ultrakill4 days ago
How the fuck do you [HYPERLINK BLOCKED] with [4% USER]
Hentai Adict4 days ago
omg peak
maxc239834 days ago
This is a genius idea
Victoe5 days ago
How do anyone upload vid or photos here??
didy_foid5 days ago
can you like somehow add the video preview thing to mobile? when you hover on a video on desktop it just plays out
Adolf Hitler5 days ago
Goated
unkeldiddy6 days ago
Peak 🙌
Nishiniro6 days ago
That 4% is me btw
inflamebunnydemonsama6 days ago
Abligotry fuck you to AI. Like I get the feeling you think you have with AI, but I doubt it's actually productive and by the way you talk about it you seem more trapped by it than it actually helping you and not gonna lie that sounds bad. I'd say if you're having AI psychosis to try and have someone in your life reach out to you and stop using Claude, I guarantee your work flow would be about the same, it is just a crutch.
Freakycar6 days ago
Ts lowkey nice i thought maybe it would be kind of laggy but its quite smooth
lime6 days ago
Holy shit, kinda peak. Rule 34 TikTok is out and GTA 6 isn't 💔
ThePearOfTeto7 days ago
Im flamed bro 😢😢
somee7 days ago
works flawless on long images
RIO1210 (open for DMs ehehe)7 days ago
Nahhh ts magnificent 🥹🥹🥹
O_O7 days ago
this shit gonna be good, where be ready.
trashvapes77 days ago
Thanks mommy
GunnedObama8 days ago
It's so peak
TheGooner8 days ago
I hope this will be PEAK
GIF
🖤Cockogoat🖤8 days ago
Сигма как всегда
MR. Fantastic8 days ago
(This gif is to the yapfest i did but i reached limit zzz)
MR. Fantastic8 days ago
This is truly remarkable, the development of this site is truly on a league of its own. Tysm for putting so much effort to improve this website or you can say "app" soon enough. Genuinely better than the original 34 in many ways. Only problem i see is some stuff never make it here while they are on the original 34. But the community difference between xyz and original 34 is night and day. One is lovely and the other just pure role-playing, barely any decent comments at all there
Fundo8 days ago
genuinely thanks