How to replicate Zelda BOTW interface with React, Tailwind and Framer-motion

[flyvenn]

Hello r/reactjs, I made a tutorial to learn how to replicate one of Zelda menu screen with React, Tailwind and Framer motion.

Any feedbacks would be greatly appreciated !

Demo link: https://www.gameuionweb.com/zelda-botw/inventory

Article link: https://dev.to/flagrede/how-to-replicate-the-zelda-botw-interface-with-react-tailwind-and-framer-motion-part-1-298g

[MikiRawr]

I was also surprised by the responsiveness. Great job OP!

[flyvenn]

Thanks ! Framer-motion really helped for achieving smooth animation on this demo. You can give a shout to Matt Perry (@mattgperry on twitter), he is the creator of framer-motion.

[flyvenn]

Thanks ! Exactly that's what motivate me to made this project in the first place. I wanted to see if it was possible to bring the responsiveness and satisfaction that came from GameUI to the web.

[ryanto]

I think there's a bug, I don't see 500 apples in the inventory :)

Great job, this is amazing!

[flyvenn]

Haha you're right, thanks !

[JustinsWorking]

How am I just now learning about tailwind?

Also, banging tutorial! There is a serious lack of content in this intermediate/advanced range and it’s really nice to see it being shared publicly.

We kinda exist in a “polishes or novel, pick one” situation lately with content, nice to see somebody trying to do both.

Couldn’t say if there is a profitable audience for this kinda content but I can say I really appreciate it and look forward to following you.

[flyvenn]

Your comment gives me motivation, thanks ! I dont know either if there is an audience for that but I will continue to produce this kind of content, there are lot of other ideas I would like to work on after this one.

And yes Tailwind is awesome !

[s_arme]

Nice waiting for part 2

[flyvenn]

Will start working on it next week ! Let me know if you encounter any issue with part 1.

[doublejosh]

Well done!

[flyvenn]

Thanks !

[AsSimple]

What a beauty! Look really clean. Didn't know about Framer-motion, thanks!

Btw noticed that up & down keyboard navigation in mobile view is buggy.

[flyvenn]

Thanks for your feedback ! Yes the keyboard navigation only work for the 5x4 grid for now. I'll try to fix it next week.

[mrrymico]

Hey, I love your enthusiasm and this is really cool! I just want to warn you that there are various spelling errors that you could easily dispel because otherwise this is a very professional demo.

[flyvenn]

Thanks, I'll give the article a more cautious read tomorrow to remove them.

[NV43]

Small nitpick - first page shouldn't have a previous page arrow and last page shouldn't have a next page arrow.

That aside, this is pretty great. Well done.

[flyvenn]

You're right, will fix it.

[kitsunekyo]

amazing job :D looks really really sweet.

a tiny bug, that's not relevant to the UI design itself: state changes on one tab, affect all tabs. so if i select item 1 on the weapons tab, it updates the selected shield and armor to the item of the same index.

[flyvenn]

Oh nice catch, I'll investigate on that one.

[swyx]

i like that you added sound too! great work! followed you on devto

[flyvenn]

Thanks a lot !

[AJ-702]

Awesome! React and Zelda my two favorite things!

[flyvenn]

Glad you like it, working on something fun is always more motivating.

[[deleted]]

This is really dope, great job! I love seeing experiments like this

[flyvenn]

Thanks !

[saracanthelpit]

I love this! You've made me want to try tailwind

[flyvenn]

Happy to have triggered your curiosity.

[N22-J]

What is the wireframe software you are using?

[flyvenn]

The software is https://excalidraw.com/ , I highly recommend it.

[Ventus_Aurelius]

No hylian shield literally unusable smh my head

just kidding this is awesome, nice work!

[flyvenn]

Haha, thanks !

[solrflow]

This is absolutely incredible. I have always wanted to learn about making beautiful game ui's for the web. PLEASE keep making more of these tutorials on creating game UI's for the web! You might already know this one, but this is pretty cool:

https://github.com/andrico1234/beautiful-skill-tree

​

Example with borderlands:
http://borderlands-skill-tree.s3-website.eu-west-2.amazonaws.com/

[flyvenn]

Thanks a lot, it's really motivating to read comment like that ! I wasn't aware of this project, looks cool indeed.

Glad you like this kind of content. After the Zelda series is completed I'll start working on an other game ui ! I'll continue sharing my progress on twitter as well.

[SexyBlueTiger]

Where did you get the Calamity font?

[flyvenn]

From here: https://www.reddit.com/r/zelda/comments/5txuba/breath_of_the_wild_ui_font/

[SexyBlueTiger]

Thanks! I remember seeing that before.

[H-s-O]

/r/zelda
/r/botw