WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par cyrillsemah
860
cyrillsemah
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
22 March 2025
Un code par carab5256
10 May 2025
Un code de Mete
7 November 2024
Évaluation par étoiles
HTML
Copy
Document
VietStrix
Grid
CSS
Copy
/* Copyright (c) 2025 by Kevin Levron (https://codepen.io/soju22/pen/QwLpBBa) */ body, html, #app { margin: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,0.5) 200%); } #app { height: 100%; font-family: "Montserrat", serif; } .hero { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1, h2 { margin: 0; padding: 0; color: white; text-transform: uppercase; text-shadow: 0 0 20px rgba(0, 0, 0, 1); line-height: 100%; user-select: none; } h1 { font-size: 80px; font-weight: 700; } h2 { font-size: 60px; font-weight: 500; } #webgl-canvas { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } <!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
import Grid2Background from 'https://cdn.jsdelivr.net/npm/threejs-components@0.0.17/build/backgrounds/grid2.cdn.min.js' const bg = Grid2Background(document.getElementById('webgl-canvas')) document.body.addEventListener('click', () => { bg.grid.setColors([0xffffff * Math.random(), 0xffffff * Math.random(), 0xffffff * Math.random()]) bg.grid.light1.color.set(0xffffff * Math.random()) bg.grid.light1.intensity = 500 + Math.random() * 1000 bg.grid.light2.color.set(0xffffff * Math.random()) bg.grid.light2.intensity = 250 + Math.random() * 250 // bg.grid.plane.material.color.set(0xffffff * Math.random()) })