Motion components, hand drawn stuff for web, brand resources etc

If you like micro animations and animated components but don’t know how to create them, motion-primitives is a go-to website. It's open source and provides copy-paste components.

Need to add some hand drawn stuff to your website like highlight, annotation, freehand drawing or fonts then here are some resources you can use for web development:

• rough-notation - A JavaScript library to create and animate hand drawn annotations on a web page
• handy-arrows.vercel.app - Hand drawn arrows as SVG code or React component
• perfect-freehand - Npm package for javascript to draw pressure-sensitive freehand lines
• ikigai, chi, zoi - Free handwritten fonts

Swapy is a versatile tool that transforms any layout into a drag-and-swap interface with minimal coding effort.

I am amazed by a website called Brandfetch, where you can see any brand’s logo, fonts, and colors. It fetches this information from the website's metadata with such a clean implementation!

This week, I learned that handling forms without any React library is a pain. So far in my development journey, I have used react-hook-form and a few others. I also realized that I am very bad at reading documentation and want to change this habit. I always try to find video content on a topic, which has taught me that I need to read more and dive deeper into the fundamentals. In the world of AI, we are really missing out on this!

This is the motivation video of the week for me.

relatedit_ • FollowOriginal audio

49 seconds

That’s it for this week. I am making progress on my clothing brand website and am currently looking into backend stuff. I will update you in future weeks once I have more to share about it. Let’s catch up next week.