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 648 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

Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
Générateur de Certificat Officiel
Générateur de Certificat Officiel

Omer fils ELENGA

9 months ago

771
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Omer fils ELENGA

8 months ago

902
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

8 months ago

632
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.3k
use-scroll-effect
use-scroll-effect

Omer fils ELENGA

8 months ago

962
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

627
card section neon
card section neon

Omer fils ELENGA

7 months ago

1.3k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

422
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

566
L'art de coder
L'art de coderL'art de coder

Omer fils ELENGA

6 months ago

484