WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Neon Lasso
1460
Andev.web
Open In Editor
Publish Your Code
Recommended
15 May 2025
Boutons Neon
24 February 2025
Neon Login Form
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 })
