Ahmad Awais



How I Am Using Particles.js to Build an Impressive Hero Unit

Ahmad AwaisAhmad Awais

Hey folks! It’s been a while since I wrote a piece here. I’ve been very busy with a premium WordPress Framework which I am building from the ground up for about last ten months (which will probably never see the light of the day). While building it, I had to build an impressive hero block or unit whatever you call it nowadays.

Hero Units#

So, if you don’t already know what is a hero unitΒ then here is a simple definition:

Normally the top most block of a website containing a heading with some description and one or two call to action buttons is what we call a hero unit. I believe this term was coined by people behind the Bootstrap project, but I may be wrong.

So, I’m about to complete the framework I was working over for so long and nowadays most my time is being spent at the front-end. I was designing a few if not many hero units for a premium WordPress theme when it hit me that I should create something creative with infinite user interaction. Yes! A hero unit which actually makes you stop doing everything and take a look at it while you interact and get engaged.

Particles.js based hero unit

Particles.js saved the day. A lightweight JavaScript library for creating particles. All you need to build a particles.js based hero unit is

I went ahead and built a demo of what I am working on, at CodePen. Hope so you guys will like it

See the Pen ParticlesJS based Hero Unit


See the Pen ParticlesJS based Hero Unit by Ahmad Awais (@ahmadawais) on CodePen.

Peace! ✌️

I help businesses understand developers πŸ“Ÿ Currently recording Node.js CLI Automation Course πŸ‘¨β€πŸ« Edutainer at VSCode.pro 🎩 An award-winning open-source engineer and developer advocate 🦊 Google Developers Expert for web 🌳 Node.js foundation Community Committee member ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker πŸ™Œ Leading developers and publishing technical content for over a decade πŸ˜‚ Self-confessed tech comedian cracking silly jokes in the JavaScript web and cloud communities πŸ’œ Loves his wife (Maedah) ❯ Learn more about Awais ↣

Say πŸ‘‹ on Twitter @MrAhmadAwais | Subscribe to the Developers Takeaway!


Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β€” pinky-promise!

πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» 115,834 Developers Already Subscribed