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! ✌️

πŸ‘¨β€πŸ« Edutainer & teacher at VSCode.pro 🎩 Full-time #OpenSourcerer 🦊 Google Developers Expert for Web πŸ₯‘ OSS Developer Advocate 🌳 Node.js Foundation Community Committee Member πŸ”₯ Ridiculously hard-working Full Stack Web Developer πŸ˜‚ Hilarious comedian ⓦ Regular WordPress Core Developer πŸ“£ TEDx Speaker ✌️ Spends 50-80% of his time building professional FOSS (Free & Open Source Software) used by over 1,399,687 Developers πŸ™Œ Cloud Community Evangelist 🎯 JavaScript & DevOps fanboy πŸ’œ Loves his wife (Maedah) πŸ• Learn more about Ahmad ↣

Say πŸ‘‹ on Twitter @MrAhmadAwais | Subscribe to the Developer's Takeaway!


TheDevTakeaway: Developers' Newsletter!

Takeaway my professional opinion about Open Source, JavaScript/Cloud, Full Stack Development, building a business, growing a family, and everything in between! Delivered to your inbox once a month. 🀣 I'm even funny some times. πŸ‘» I hate spam! Pinky Promise!

πŸ”₯ CHECK OUT β†’