LIQUID PLASMA by omerlinks

This tailwind example is contributed by Omer fils ELENGA, on 08-Jan-2026. Component is made with Tailwind v3.4. It is responsive.

Hero Comment Section

Author Omer fils ELENGA

Tailwind v3.4 651 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fond Liquide Plasma 3D</title>

#canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

/* Overlay pour le texte */
        .ui-overlay {
            position: relative;
            z-index: 10;
            pointer-events: none; /* Laisse passer la souris vers le 3D */
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

/* Réactive les clics sur les boutons */
        .ui-overlay button, .ui-overlay a {
            pointer-events: auto;
        }
    </style>
     -->
</head>
<body>

<div id="canvas-container"></div>

<div class="ui-overlay px-4">
        <div class="max-w-3xl w-full text-center">
            <span class="inline-block py-1 px-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-cyan-300 text-sm font-semibold tracking-wider mb-4 animate-pulse">
                EXPÉRIENCE IMMERSIVE
            </span>
            <h1 class="text-6xl md:text-8xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 drop-shadow-2xl mb-6">
                LIQUID<br>PLASMA
            </h1>
            <p class="text-xl md:text-2xl text-gray-200 font-light mb-10 max-w-2xl mx-auto leading-relaxed drop-shadow-md">
                Explorez un univers fluide. Déplacez votre souris pour interagir avec la vague numérique.
            </p>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <button class="px-8 py-4 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg hover:shadow-[0_0_30px_rgba(236,72,153,0.6)] transition-all transform hover:-translate-y-1">
                    Commencer
                </button>
                <button class="px-8 py-4 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white font-bold text-lg hover:bg-white/20 transition-all">
                    En savoir plus
                </button>
            </div>
        </div>
    </div>

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // Positionner la caméra en hauteur et penchée
        camera.position.set(0, -15, 12); 
        camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        container.appendChild(renderer.domElement);

// --- 2. CRÉATION DE LA GÉOMÉTRIE (LA NAPPE D'EAU) ---
        
        // On crée un plan avec beaucoup de segments pour avoir une forme fluide
        // Largeur, Hauteur, Segments X, Segments Y
        const geometry = new THREE.PlaneGeometry(40, 40, 64, 64);

// Activer les couleurs par sommet (Vertex Colors) pour l'effet Plasma
        const count = geometry.attributes.position.count;
        geometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(count * 3), 3));

// --- 3. MATÉRIAU LIQUIDE ---
        
        const material = new THREE.MeshPhysicalMaterial({
            color: 0xffffff,        // Couleur de base blanche (car on utilise les vertex colors)
            metalness: 0.1,         // Peu métallique
            roughness: 0.2,         // Assez lisse
            reflectivity: 0.5,      // Un peu de réflexion
            clearcoat: 0.8,         // Effet verni / mouillé
            clearcoatRoughness: 0.1,
            flatShading: false,     // Lissage pour effet liquide (true = low poly)
            side: THREE.DoubleSide,
            vertexColors: true      // IMPORTANT : active les couleurs calculées sommet par sommet
        });

const plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

// --- 4. LUMIÈRES ---
        
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambientLight);

// Lumières colorées pour accentuer l'effet fluo
        const light1 = new THREE.PointLight(0x00ffff, 1, 50); // Cyan
        light1.position.set(10, 10, 10);
        scene.add(light1);

const light2 = new THREE.PointLight(0xff00ff, 1, 50); // Magenta
        light2.position.set(-10, -10, 5);
        scene.add(light2);

// --- 5. ANIMATION ET PHYSIQUE ---

// Variables pour l'interaction souris
        let mouseX = 0;
        let mouseY = 0;
        let targetRotationX = 0;
        let targetRotationY = 0;

document.addEventListener('mousemove', (event) => {
            // Normaliser les coordonnées de la souris (-1 à 1)
            mouseX = (event.clientX / window.innerWidth) * 2 - 1;
            mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        });

const clock = new THREE.Clock();
        
        // Stockage des positions originales pour le calcul des vagues
        const originalPositions = geometry.attributes.position.array.slice();

function animate() {
            requestAnimationFrame(animate);

const time = clock.getElapsedTime();

// 1. ANIMATION DES VAGUES (Vertex Displacement)
            const positions = geometry.attributes.position.array;
            const colors = geometry.attributes.color.array;

// Définition des couleurs de l'arc-en-ciel fluo
            const color1 = new THREE.Color(0x06b6d4); // Cyan (Bas)
            const color2 = new THREE.Color(0x8b5cf6); // Violet (Milieu)
            const color3 = new THREE.Color(0xec4899); // Rose (Haut)

for (let i = 0; i < count; i++) {
                // Récupérer la position originale (x, y, 0)
                const px = originalPositions[i * 3];
                const py = originalPositions[i * 3 + 1];

// CALCUL DE LA HAUTEUR (Z)
                // Combinaison de plusieurs ondes sinus pour un effet "aléatoire" naturel
                // Plus on s'éloigne du centre, plus les vagues sont calmes (facteur * distance)
                const distance = Math.sqrt(px*px + py*py);
                
                const wave1 = Math.sin(px * 0.3 + time * 1.5);
                const wave2 = Math.cos(py * 0.4 + time * 1.2);
                const wave3 = Math.sin(distance * 0.5 - time); // Onde radiale

// Amplitude de la vague
                const z = (wave1 + wave2 + wave3) * 1.5;

// Appliquer la nouvelle hauteur
                positions[i * 3 + 2] = z;

// 2. CALCUL DE LA COULEUR (EFFET PLASMA)
                // La couleur dépend de la hauteur (z)
                const mixedColor = new THREE.Color();
                
                // Si z est bas -> Cyan, Moyen -> Violet, Haut -> Rose
                if (z < -1) {
                    mixedColor.copy(color1);
                } else if (z > 1) {
                    mixedColor.copy(color3);
                } else {
                    // Interpolation entre violet et les extrêmes
                    mixedColor.lerpColors(color1, color2, (z + 1) / 2);
                    mixedColor.lerpColors(mixedColor, color3, Math.max(0, z - 0.5));
                }

colors[i * 3] = mixedColor.r;
                colors[i * 3 + 1] = mixedColor.g;
                colors[i * 3 + 2] = mixedColor.b;
            }

// Nécessaire pour dire à Three.js de mettre à jour la géométrie
            geometry.attributes.position.needsUpdate = true;
            geometry.attributes.color.needsUpdate = true;
            geometry.computeVertexNormals(); // Recalculer les ombres/lumières pour le brillant

// 3. INTERACTION SOURIS (INCLINAISON DU PLAN)
            // On lisse le mouvement avec une interpolation (Lerp)
            targetRotationX = mouseY * 0.5; // Inclinaison haut/bas
            targetRotationY = mouseX * 0.5; // Inclinaison gauche/droite

plane.rotation.x += 0.05 * (targetRotationX - plane.rotation.x);
            plane.rotation.y += 0.05 * (targetRotationY - plane.rotation.y);

// Légère rotation automatique constante
            plane.rotation.z = time * 0.05;

renderer.render(scene, camera);
        }

// --- 6. GESTION DU REDIMENSIONNEMENT ---
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

animate();
    </script>
</body>
</html>

Related Examples

home
html , css

Hacker Development

1 year ago

2.4k
hero section

Anonymous

2 years ago

10.5k
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

nii fanny

1 year ago

1.6k
Hero banner

Piet Vriend

3 years ago

17.9k
Tailwind Pricing Section
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.3k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Coastal UI

2 years ago

2.4k
Hero

ariaw

1 year ago

824
work hard
by salvator

Baraka Salvator

1 year ago

938
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

630
Hero Section

Muzammil Riaz

3 months ago

198
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

ishimwe prince

1 year ago

1.4k
User Comments Section
Display users' comments beautifully. The component also has a form for commenting.

Prajwal Hallale

3 years ago

7.6k