Before anything, keep in mind I am extremely new to both NextJS, CodePen, and web dev in general.
I found this cool mouse movement animation on CodePen and wanted to implement it onto the website I just started building on NextJS. I'm fairly certain I imported the files correctly and the CSS works however the script does not.
This is my entire index.js code.
import Head from 'next/head'
import Script from 'next/script'
export default function Home() {
return (
<html lang="en" >
<Head>
<meta charset="UTF-8"/>
<title>CodePen - Animated Background</title>
<link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet' type='text/css'/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<link rel='stylesheet' href='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css'/><link rel="stylesheet" href="../styles/dynamic.css"/>
</Head>
<body>
<div id="large-header" className="large-header">
<canvas id="demo-canvas"></canvas>
<h1 className="main-title">Vansh <span className="thin">Sharma</span></h1>
</div>
<Script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js'/>
<Script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js'/>
<Script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js'/>
<Script src="../scripts/dynamic_script.js" strategy='beforeInteractive' defer={false} type='text/javascript'/>
</body>
</html>
)
}