Interactive Site for Artifact Route

https://preview.redd.it/k831efezgzag1.png?width=1920&format=png&auto=webp&s=4d8e70d111f29b3277dcd98c3f8af00c959d567e

I made a little site that shows an artifact route, check it out if you can. Also let me know if there's anything I can improve for the route UI. [https://genshin-artifacts.vercel.app](https://genshin-artifacts.vercel.app)

Voir le contenu lié

Commentaires

Available-Kiwi-58292026-01-02 21:17

Thanks, I was looking to begin farming more, cause I'm broke

the_new_standard2026-01-03 04:26

I've got a few notes specifically about the map.

1) Maybe work on the mobile responsiveness of the app. At mobile size (really should start at tablet size) there is no break point which stacks the buttons above the map, so the map keeps shrinking until it's unreadable. Also at larger sizes there is no need to keep the container for the whole page set to a 1200px max width. The map itself only grows to 765, which is a little on the small size considering it's the main attraction on this page. I'd let the whole thing grow up to at least 2200px.

2) Be wary of user's expectations for UI/UX interactions that your app doesn't have. Most people are trained to think that clicking on a map pin will have an interaction. But currently the only interaction is on the those colored circles. I'd either change to icon used to represent those locations, so no one would think they are intractable, or make them intractable somehow.

SignificantRoof65762026-01-03 04:37

I definitely agree with the mobile responsiveness, I mostly developed and tested the thing with desktop, I was looking at narrowing widths, but wasn't really thinking about mobile. I'll try to get that to work better.

Do you think I should get a map without the pins and then instead of circles, use an icon that makes it seem more interactible? I created my own scanning tool to get the map directly from the genshin interactive map and I included the icons since that was easier to map, but I can remove them fairly easily, I just wanted it to be more clear which teleport waypoints people can use for the route.

the_new_standard2026-01-03 04:47

Pro tip when working on a desktop sized monitor. Every once in awhile just set your browser zoom to 50% to see how the design breaks down at larger sizes. Your design is going to run into a good deal of monitors that size, especially if your target audience is gamers.

In that case maybe make the pins the start of a route. Make each pin a separate image sitting on top of the map. If a user hovers a pin it grows slightly to show it's intractable. Clicking it changes screens to the optimal farming route that starts from that spot.

Graph0662026-01-03 06:09

That's a nice route! You're well-informed.

How do you have the moving marker on the map synchronize with your in-game position in the videos? Is there some way to automate that?

SignificantRoof65762026-01-03 06:13

Nope, automating would be close to impossible so the points were set manually, but I'm a programmer so I made a whole editor and component for this. If you want to see the UI I made for manually adding them [https://genshin-artifacts.vercel.app/api/route/0/sync](https://genshin-artifacts.vercel.app/api/route/0/sync) . I am thinking of fully fleshing it out and publishing it as an npm component since I made it very generic so it's usable for any video and image.

Also I'm the one who made this video [https://youtu.be/Yc\_J8Yd37F8](https://youtu.be/Yc_J8Yd37F8) , used the exact same route :)

Graph0662026-01-03 06:32

I see, at any rate it looks like a great reference to learn the routes and it's the first time I've seen something like this. Most folks either do maps (the big picture) or videos (details on how it's done). Combining the two in an intuitive way is quite a feat!

One suggestion for the interface, I've noticed after clicking on a route segment, it takes me to a smaller marked-up map where I can't zoom out much. Then I have to click back a few times to get back to the full map and see where the place is in the big picture.

I wonder if it's possible to have a miniature version of the full Teyvat map in the corner, with a rectangle marking out which part of the map we're zoomed in on. Bonus points if we can use that minimap to navigate between segments!

SignificantRoof65762026-01-03 06:35

I was going to add a back button to get to the big map, but a minimap is also an interesting idea.

Graph0662026-01-03 06:42

Oh, it turns out I've seen your Youtube channel before! That explains a lot, you're one of the artifact route veterans pretty much.

SignificantRoof65762026-01-03 06:56

Thanks! Yeah my main goal with this project was trying to make the video route interactive. A good way to show a route and as a web dev teaching me a lot about making an interactive and responsive site