WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1157
Andev.web
Abrir no Editor
Publique Seu Código
Precisa de um site?
Recomendado
24 November 2024
flor para minha menina
10 February 2025
botão
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 })
