Skip to content

Instantly share code, notes, and snippets.

@CrazyBoy49z

CrazyBoy49z/index.html

Created May 6, 2022 22:51
Show Gist options
  • Save CrazyBoy49z/a13cde7f2b83b021012eee0c42d4252d to your computer and use it in GitHub Desktop.
Save CrazyBoy49z/a13cde7f2b83b021012eee0c42d4252d to your computer and use it in GitHub Desktop.
Download ZIP
ThreeJS Toys - Neon Cursor
Raw
index.html
<div id="app">
<div id="hero">
<h1>NEON<br/>CURSOR</h1>
</div>
</div>
Raw
script.js
import { neonCursor } from 'https://unpkg.com/[email protected]/build/threejs-toys.module.cdn.min.js'
neonCursor({
el: document.getElementById('app'),
shaderPoints: 16,
curvePoints: 80,
curveLerp: 0.5,
radius1: 5,
radius2: 30,
velocityTreshold: 10,
sleepRadiusX: 100,
sleepRadiusY: 100,
sleepTimeCoefX: 0.0025,
sleepTimeCoefY: 0.0025
})
Raw
style.css
body, html, #app {
margin: 0;
width: 100%;
height: 100%;
}
#app {
overflow: hidden;
}
#app h1 {
--fontSize: 70px;
--lineHeight: 90px;
width: auto;
height: calc(2 * var(--lineHeight));
line-height: var(--lineHeight);
margin: calc(50vh - var(--lineHeight)) auto 0;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: var(--fontSize);
text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
}
#app canvas {
display: block;
position: fixed;
z-index: -1;
top: 0;
}
Raw
styles
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&amp;display=swap" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment