Home
Omer fils ELENGA
background effect luminar

background effect luminar

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

Gradient

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            overflow-x: hidden;
            background-color: #0f172a; /* Couleur de fond au chargement */
        }
        
        /* Conteneur pour le Canvas Three.js (en arrière-plan) */
        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; /* Derrière tout */
            outline: none;
        }

/* Conteneur principal pour les cartes */
        .main-content {
            position: relative;
            z-index: 10; /* Au-dessus du canvas */
        }
    </style>
</head>
<body>

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

<div class="main-content flex items-center justify-center min-h-screen p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">

</div>
    </div>

<script>
        const container = document.getElementById('canvas-container');
        
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); // Caméra 2D pour un plein écran parfait
        const renderer = new THREE.WebGLRenderer({ alpha: false });
        
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

// --- SHADER PERSONNALISÉ POUR L'EFFET FLUIDE ---
        // Utilisation de GLSL pour une performance maximale et un lissage infini
        
        const vertexShader = `
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = vec4(position, 1.0);
            }
        `;

const fragmentShader = `
            uniform float uTime;
            uniform vec2 uResolution;
            varying vec2 vUv;

// Fonction de mélange de couleurs doux
            vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
                return a + b*cos( 6.28318*(c*t+d) );
            }

void main() {
                // Normalisation des coordonnées UV pour prendre en compte le ratio d'écran
                vec2 uv = (gl_FragCoord.xy * 2.0 - uResolution.xy) / uResolution.y;
                vec2 uv0 = uv;
                vec3 finalColor = vec3(0.0);
                
                // Création de l'effet de fluide par superposition d'ondes
                for (float i = 0.0; i < 4.0; i++) {
                    // Déformation de l'espace UV
                    uv = fract(uv * 1.5) - 0.5;
                    
                    float d = length(uv) * exp(-length(uv0));
                    
                    // Choix de la palette de couleurs (Deep Blue -> Purple -> Cyan)
                    vec3 col = palette(length(uv0) + i*.4 + uTime*.4, 
                        vec3(0.5, 0.5, 0.5),
                        vec3(0.5, 0.5, 0.5),
                        vec3(1.0, 1.0, 1.0),
                        vec3(0.263,0.416,0.557) // Tinte bleu/violette dominante
                    );

d = sin(d*8. + uTime)/8.;
                    d = abs(d);
                    
                    // Néon glow inverse
                    d = pow(0.01 / d, 1.2);

finalColor += col * d;
                }
                
                // Assombrir un peu le fond pour faire ressortir les cartes
                finalColor *= 0.4;

gl_FragColor = vec4(finalColor, 1.0);
            }
        `;

const geometry = new THREE.PlaneGeometry(2, 2);
        const uniforms = {
            uTime: { value: 0 },
            uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
        };

const material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: vertexShader,
            fragmentShader: fragmentShader
        });

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

// Animation Loop
        function animate() {
            requestAnimationFrame(animate);
            uniforms.uTime.value += 0.005; // Vitesse du fluide
            renderer.render(scene, camera);
        }

animate();

// Gestion du redimensionnement
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

Related Examples

SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

842
Text Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.2k
Mango gradient

Author:
Mohit Prajapati

3 years ago

12.1k
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)

Author:
Ayyamperumal S

8 months ago

1.8k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

Author:
UI-Templates

3 months ago

331
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.6k
Gradient Breadcrumb
Breadcrumb. Gradient background. Gradient text on hover. Based on gopi/breadcrumb-2.

Author:
Nick Girga

9 months ago

932
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

4 months ago

769
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

11 months ago

1.3k
Glassmorphic Animated Searchabar
This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

Author:
Muhamad Rufaid kv

8 months ago

1.1k
Indian Flag Color Gradient

Author:
Mohit Prajapati

3 years ago

14.8k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components