Home
Omer fils ELENGA
composent clean

composent clean

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Omer fils ELENGA

128

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Modern 3D Scroll Experience</title>
  <script src="https://cdn.tailwindcss.com"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <style>
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      overflow: hidden;
      perspective: 1000px;
    }

/* --- Animations originales conservées --- */
    @keyframes reveal {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }
    @keyframes textReveal {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }
    @keyframes shine {
      from { transform: translateX(-100%) rotate(45deg); }
      to { transform: translateX(200%) rotate(45deg); }
    }

.shine-effect::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transform: translateX(-100%) rotate(45deg);
      z-index: 10;
    }
    .shine-effect:hover::before {
      animation: shine 1.2s ease-out;
    }

.float-animation {
      animation: float 6s ease-in-out infinite;
    }

.split-reveal {
      animation: reveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) both;
    }
    .text-reveal-delay {
      opacity: 0;
    }

.scroll-container {
      scroll-snap-type: y mandatory;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .scroll-section {
      scroll-snap-align: start;
      height: 100vh;
      display: flex;
      transform-style: preserve-3d;
    }

#three-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
    }

.card-3d {
      transform: translateZ(30px);
      transition: transform 0.6s ease, box-shadow 0.4s ease;
    }
    .card-3d:hover {
      transform: translateZ(50px) rotateX(5deg) rotateY(5deg);
    }

.content-mask {
      -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    }
  </style>
</head>
<body class="bg-neutral-950 text-white">
  
  <canvas id="three-canvas"></canvas>

<div class="scroll-container" id="scrollContainer">
    
    <section class="scroll-section relative">
      <div class="w-full md:w-1/2 h-full relative overflow-hidden group shine-effect">
        <img src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" 
             alt="Architectural detail" 
             class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" />
        <div class="absolute inset-0 bg-gradient-to-r from-neutral-950/70 to-neutral-950/50"></div>
      </div>
      <div class="w-full md:w-1/2 h-full flex items-center justify-center p-8 bg-neutral-950">
        <div class="max-w-lg card-3d float-animation">
          <span class="text-neutral-400 tracking-wider text-sm font-mono opacity-0 text-reveal-delay" data-delay="0">01 / VISION</span>
          <h2 class="mt-4 text-5xl md:text-7xl font-bold leading-none bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent opacity-0 text-reveal-delay" data-delay="200">Modern Architecture</h2>
          <p class="mt-6 text-neutral-400 text-lg leading-relaxed opacity-0 text-reveal-delay" data-delay="400">Exploring the intersection of form and function in contemporary design.</p>
          <button class="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-full text-sm font-medium transition-all duration-300 hover:tracking-wider opacity-0 text-reveal-delay" data-delay="600">Explore More →</button>
        </div>
      </div>
    </section>

<section class="scroll-section relative">
      <div class="w-full md:w-1/2 h-full flex items-center justify-center p-8 bg-neutral-900">
        <div class="max-w-lg card-3d float-animation">
          <span class="text-neutral-400 tracking-wider text-sm font-mono opacity-0 text-reveal-delay" data-delay="0">02 / DESIGN</span>
          <h2 class="mt-4 text-5xl md:text-7xl font-bold leading-none bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent opacity-0 text-reveal-delay" data-delay="200">Urban Spaces</h2>
          <p class="mt-6 text-neutral-400 text-lg leading-relaxed opacity-0 text-reveal-delay" data-delay="400">Creating environments that inspire and transform daily life.</p>
          <button class="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-full text-sm font-medium transition-all duration-300 hover:tracking-wider opacity-0 text-reveal-delay" data-delay="600">Learn More →</button>
        </div>
      </div>
      <div class="w-full md:w-1/2 h-full relative overflow-hidden group shine-effect">
        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" 
             alt="Urban landscape" 
             class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" />
        <div class="absolute inset-0 bg-gradient-to-l from-neutral-950/70 to-neutral-950/50"></div>
      </div>
    </section>

<section class="scroll-section relative">
      <div class="w-full md:w-1/2 h-full relative overflow-hidden group shine-effect">
        <img src="https://images.unsplash.com/photo-1682687220067-dced0a5865c5" 
             alt="Minimalist interior" 
             class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" />
        <div class="absolute inset-0 bg-gradient-to-r from-neutral-950/70 to-neutral-950/50"></div>
      </div>
      <div class="w-full md:w-1/2 h-full flex items-center justify-center p-8 bg-neutral-950">
        <div class="max-w-lg card-3d float-animation">
          <span class="text-neutral-400 tracking-wider text-sm font-mono opacity-0 text-reveal-delay" data-delay="0">03 / SPACE</span>
          <h2 class="mt-4 text-5xl md:text-7xl font-bold leading-none bg-gradient-to-r from-white to-neutral-400 bg-clip-text text-transparent opacity-0 text-reveal-delay" data-delay="200">Interior Flow</h2>
          <p class="mt-6 text-neutral-400 text-lg leading-relaxed opacity-0 text-reveal-delay" data-delay="400">Harmonizing space and light to create immersive experiences.</p>
          <button class="mt-8 px-6 py-3 bg-white/10 hover:bg-white/20 rounded-full text-sm font-medium transition-all duration-300 hover:tracking-wider opacity-0 text-reveal-delay" data-delay="600">Discover More →</button>
        </div>
      </div>
    </section>
  </div>

<div class="fixed right-8 top-1/2 -translate-y-1/2 flex flex-col gap-4 z-50">
    <button onclick="scrollToSection(0)" class="w-3 h-3 rounded-full bg-white/20 hover:bg-white transition-all hover:scale-150"></button>
    <button onclick="scrollToSection(1)" class="w-3 h-3 rounded-full bg-white/20 hover:bg-white transition-all hover:scale-150"></button>
    <button onclick="scrollToSection(2)" class="w-3 h-3 rounded-full bg-white/20 hover:bg-white transition-all hover:scale-150"></button>
  </div>

const particlesGeometry = new THREE.BufferGeometry();
    const particlesCount = 1500;
    const posArray = new Float32Array(particlesCount * 3);
    for (let i = 0; i < particlesCount * 3; i++) {
      posArray[i] = (Math.random() - 0.5) * 20;
    }
    particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));

const particlesMaterial = new THREE.PointsMaterial({
      color: 0xffffff,
      size: 0.03,
      transparent: true,
      opacity: 0.7,
      sizeAttenuation: true
    });

const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
    scene.add(particlesMesh);

camera.position.z = 3;

const animate = () => {
      requestAnimationFrame(animate);
      const time = Date.now() * 0.0005;
      particlesMesh.rotation.x = time * 0.1;
      particlesMesh.rotation.y = time * 0.15;
      renderer.render(scene, camera);
    };
    animate();

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

// === SCROLL & ANIMATIONS ===
    const container = document.getElementById('scrollContainer');
    const sections = document.querySelectorAll('.scroll-section');
    const dots = document.querySelectorAll('.fixed.right-8 button');
    let isScrolling = false;

function updateDots() {
      const index = Math.round(container.scrollTop / window.innerHeight);
      dots.forEach((dot, i) => {
        dot.classList.toggle('bg-white', i === index);
        dot.classList.toggle('scale-150', i === index);
        if (i !== index) dot.classList.remove('scale-150');
      });
    }
 
    container.addEventListener('scroll', updateDots);
    updateDots(); // init

// === TEXT REVEAL ON SCROLL ===
    const observerOptions = { threshold: 0.2 };
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const elements = entry.target.querySelectorAll('.text-reveal-delay');
          elements.forEach(el => {
            const delay = parseInt(el.dataset.delay) || 0;
            setTimeout(() => {
              el.style.opacity = '1';
              el.style.transform = 'translateY(0)';
              el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            }, delay);
          });
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);

document.querySelectorAll('.scroll-section').forEach(section => {
      observer.observe(section);
    });
  </script>
</body>
</html>

Related Examples

GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

8 months ago

1.1k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

9.2k
Hero section with big heading

Author:
Leon Bachmann

3 years ago

11.9k
onlinee
examination

Author:
Nezerwa Debora

7 months ago

571
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Author:
Gianluca Secondo

10 months ago

1.4k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.8k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

2.6k
test
test

Author:
Anonymous

6 months ago

610
Garden
by salvator

Author:
Baraka Salvator

8 months ago

1.1k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

8 months ago

890
Startup page

Author:
ORGIN_DREAMS

8 months ago

579
hero section

Author:
Anonymous

2 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components