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

141

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

Hero section
Beatiful landing page hero section

Author:
Rajesh Maheshwari

11 months ago

2.3k
Registration
used in personal information

Author:
Uwase Alliance

8 months ago

1k
Drinkware 2

Author:
Maxim

10 months ago

992
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

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

Author:
Omer fils ELENGA

1 month ago

94
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

11 months ago

1.4k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

10 months ago

1.4k
template hero

Author:
Raul antonio de la cruz hernandez

1 month ago

264
Hero

Author:
ABDO-SY

11 months ago

1.4k
The future ai
The is technology

Author:
ORGIN_DREAMS

8 months ago

781
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

579
Hero Section Fashion Page

Author:
ABDO-SY

10 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components