Learn how to make a stunning 'Badass Links Page' with Vanta.js' 3D motion background. Follow this guide and make your website stand out today!

Patrick Skinner

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to create a killer links page with a 3D motion background using Vanta.js. The tutorial covers HTML, CSS, and JavaScript and provides step-by-step instructions for creating the page.

Create a Killer Links Page with Vanta.js' 3D Motion Background

Permalink Step: 1 - Create your work environment

Permalink Step 2: Create your HTML Wire Frame

Permalink Step 3: Fill in your <head> tags:

Permalink Step 4: Begin Filling your <body> tags

Permalink Step 6: Importing Font-Awesome Icons

Permalink STEP 7: Add Hyperlinks to Each <li>

Permalink STEP 8: Add an Image to the <header>

Permalink STEP 10: Stylizing the Profile Picture

Permalink STEP 12:Stylizing the Link Buttons

Permalink STEP 13:Stylizing the Background with Vanta.js Motion Graphics

<blockquote>
<a href="https://www.vantajs.com/" target="_blank" rel="noopener nofollow">https://www.vantajs.com/</a>
</blockquote>
JavaScript Library used for the effect :)
I have to say, some of the effects are simply stunning! My personal favorite is the <a href="https://www.vantajs.com/?effect=globe" target="_blank" rel="noopener nofollow">globe effect</a>.

I haven’t tried it yet. But wouldn’t it be cool if it just used JavaScript and complied out to canvas

Some of these look amazing, thank you, The birds one though, not so much. Seemed very distracting to me.

Looks awful. Reminds me of 1990s old days javascript was used to put fireworks in website. Ridiculous.