Rakkiruu

@rakha_enn

Game developer, UI/UX designer, and builder of small web things.

Indonesia Developer since 2021
Blog Field notes
Rakkiruu journal

Zhuang Fangyi's Gallery

It started as an endless page of Zhuang Fangyi pictures. Then I added eight chibis, duplicate detection, random easter eggs, and a global Chubby Lung squishing counte

I love playing Arknights: Endfield. I started playing on day one, and when I first played the Wuling update and saw Zhuang Fangyi, my immediate reaction was just:

God. What a beautiful leek.

Unfortunately, I never got her. I took a break after the Tangtang banner and only returned when the Arcane banner was already here. Truly excellent timing on my part.

Then like weeks before I published this, I started thinking: what if I made a website that was literally just an endless collection of our Tianshi's pictures?

That was supposed to be the entire idea. Nothing complicated, nothing particularly useful—just Fangyi, forever.

Somehow, it became zhuangfangyi.moe.


#A completely reasonable plan

The first concept was basically Pinterest, except every image was Zhuang Fangyi.

There would be no header, no navigation bar, no account system, and no complicated controls. The page would open with eight chibi Fangyis moving across the screen, followed by a small character credit and a masonry gallery that continued as the user scrolled.

I kept the visual direction simple: an ivory background using #F4F4E9, green text using #879841, small rounded corners, and a green shadow when an image was hovered.

Yes, That was supposed to be the entire website.

#The images started causing problems

The gallery gets most of its images from Safebooru using the tags zhuang_fangyi_(arknights) and 1girl. I also had several images from Pinterest that I wanted to include manually.

Instead of creating a database or renaming every file, I made a dedicated folder for them. Any supported image placed inside that folder is discovered automatically during the next build, even when it keeps its original filename or sits inside another subfolder.

Then the annoying problems appeared.

Some images arrived late and suddenly inserted themselves into the middle of the gallery while I was already scrolling. Some posts were duplicates. Others were parent and child posts of the same artwork, which made the same image appear twice even when their post IDs were different.

The solution was to prepare each image before showing it, read its actual dimensions, and only insert it once it was ready. The API route also checks post families and file hashes so parent-child variants do not survive as separate images.

After that, Safebooru images and local Pinterest images are mixed together and randomized once for each visit. The order stays stable while the page is open, so the gallery feels random without constantly rearranging itself under the user.

Apparently, displaying pictures is easy. Displaying pictures without them behaving strangely is the actual project.


#Eight chibis were not enough

The eight chibis were originally only meant to be a looping carousel at the top.

Then the bottom of the page felt empty, so I added the carousel there too. Then I wanted the website to feel a little more alive, so the same chibis started appearing as easter eggs from the sides or bottom of the screen.

At first, they appeared after a certain number of images. That made the timing too predictable and tied the joke to scrolling speed, so I changed it. Now a random chibi appears after a random amount of time, chooses a random entrance, stays for a moment, and leaves again. The timer pauses when the tab is hidden because surprising an empty browser tab would be a waste of effort.

None of this helps the gallery perform its main function.

Group 86 (2)

#The Chubby Lung incident

Zhuang Fangyi has a soft spot for Chubby Lung. Her office contains a plushie, limited-edition goods, and several stickers layered behind her chair. She may even have been its lead designer when she was still a Tianshi Intern.

Naturally, I added a Chubby Lung to the website.

Visitors can click it to squeeze it. The image squashes, a small +1 appears, and a squeak sound plays. Clicking again does not cut off the previous sound, so rapid clicks can create several squeaks at once—as they should.

The counter is shared globally through Upstash Redis. Clicks are shown immediately, sent in small batches, and added atomically so two visitors pressing it at the same time do not overwrite each other. There is also a lightweight rate limit, because apparently even a fictional creature needs protection from autoclickers.

The dumbest feature on the page became the only feature that needed persistent global state.

image 3
An extremely serious piece of infrastructure.

#Giving it an actual domain

The website was built with SvelteKit, TypeScript, and vanilla CSS, then deployed to Vercel.

The funniest part is that I WANTED to owned the perfect domain: zhuangfangyi.moe (soon, I had no money 💔).

#Was any of this necessary?

No.

But it was a good reminder that a project does not need to solve an important problem to be worth building. A small, stupid idea can still teach me how to handle unreliable data, control asynchronous loading, polish tiny interactions, and keep adding features without destroying the original simplicity.

Sometimes the best reason to build something is simply because the idea is funny enough that you cannot leave it alone.

© 2026 Rakha Enn