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

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

Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.7k
Cyamunara
used to sell everything someone need to sell

Author:
INGRIDE MUZIRANENGE

6 months ago

709
No distraction search field

Author:
_Amar_

2 years ago

12k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.1k
onlinee
examination

Author:
Nezerwa Debora

6 months ago

430
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

1 year ago

2.2k
Perspective 3D
Perspective 3D

Author:
Omer fils ELENGA

1 day ago

11
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

5 months ago

598
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

1 year ago

5.2k
Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Author:
Mereani Waqa

2 years ago

8.4k
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

Author:
nii fanny

6 months ago

511
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components