WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Neon Lasso
1298
Andev.web
Open In Editor
Publish Your Code
Recommended
11 July 2024
Neon Glowing Effect
30 August 2024
Neon button
HTML
Copy
<!DOCTYPE html> <html lang="es" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="app"> <div id="hero"> </div> </div> <script type="module" src="./script.js"></script> </body> </html>
CSS
Copy
body, html, #app { margin: 0; width: 100%; height: 100%; } #app { overflow: hidden; touch-action: pan-up; color: #ffffff; font-family: 'Montserrat', sans-serif; text-align: center; text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000; } #app h1 { --fontSize: 40px; --lineHeight: 60px; width: auto; height: calc(2 * var(--lineHeight)); line-height: var(--lineHeight); margin: calc(50vh - var(--lineHeight)) auto 0; font-size: var(--fontSize); } #app a { margin-top: 10px; display: inline-block; text-decoration: none; color: #fff; } #app canvas { display: block; position: fixed; z-index: -1; top: 0; }
JS
Copy
import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/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 })
