Home
Omer fils ELENGA
hero section

hero section

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

105

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Watch.ME — 3D Time</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r158/three.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: url('https://i.pinimg.com/1200x/56/39/92/563992d6e4c38d6c100f26b30165ff85.jpg');
      background-size:cover;
      color: #fff;
      overflow: hidden;
      cursor: default;
    }

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

.content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      text-align: center;
      padding: 2rem;
    }

.header {
      position: absolute;
      top: 2rem;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: 20;
    }

.header nav a {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      margin: 0 1rem;
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.3s;
    }

.header nav a:hover {
      color: white;
    }

h1 {
      font-weight: 700;
      font-size: 3.5rem;
      line-height: 1.1;
      margin: 1.5rem 0 1rem;
    }

h1 span {
      background: linear-gradient(135deg, #ff2d75, #ff9ab5);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

p {
      max-width: 500px;
      color: rgba(255,255,255,0.6);
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 2rem;
    }

.buttons {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
    }

.btn {
      padding: 0.75rem 1.75rem;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.3s ease;
    }

.btn-primary {
      background: linear-gradient(135deg, #ff2d75, #ff6ba5);
      color: white;
      box-shadow: 0 8px 20px rgba(255, 45, 117, 0.35);
    }

.btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(255, 45, 117, 0.5);
    }

.btn-secondary {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.2);
      color: white;
    }

.btn-secondary:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.4);
    }

@media (max-width: 640px) {
      h1 { font-size: 2.5rem; }
      .buttons { flex-direction: column; align-items: center; }
    }
  </style>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body>
  <canvas id="three-canvas"></canvas>

<div class="header">
    <nav class="flex space-x-6">
      <a href="#">Home</a>
      <a href="#">Watch</a>
      <a href="#">Product</a>
      <a href="#">Contact</a>
      <a href="#">Career</a>
    </nav>
  </div>

<div class="content">
    <h1>Be on<br/><span>Time.</span></h1>
    <p>A dimension of reality that makes change possible — precise, elegant, timeless.</p>
    <div class="buttons">
      <a href="#" class="btn btn-primary">Get started</a>
      <a href="#" class="btn btn-secondary">Read more</a>
    </div>
  </div>

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 15;

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three-canvas'), antialias: true, alpha: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 0);

// === ARRIÈRE-PLAN : NÉBULEUSE + PARTICULES ===
    const bgGeometry = new THREE.SphereGeometry(200, 64, 64);
    const bgMaterial = new THREE.MeshBasicMaterial({
      color: 0x0a0a1a,
      side: THREE.BackSide,
      transparent: true,
      opacity: 0.2
    });
    const bgSphere = new THREE.Mesh(bgGeometry, bgMaterial);
    scene.add(bgSphere);

// Particules douces
    const particleCount = 1200;
    const particles = new THREE.BufferGeometry();
    const pos = new Float32Array(particleCount * 3);
    const colors = new Float32Array(particleCount * 3);
    const color = new THREE.Color();

for (let i = 0; i < particleCount; i++) {
      const i3 = i * 3;
      pos[i3] = (Math.random() - 0.5) * 400;
      pos[i3 + 1] = (Math.random() - 0.5) * 400;
      pos[i3 + 2] = (Math.random() - 0.5) * 400;

const hue = Math.random() * 0.15 + 0.9; // rose/violet
      color.setHSL(hue, 0.4, Math.random() * 0.3 + 0.3);
      colors[i3] = color.r;
      colors[i3 + 1] = color.g;
      colors[i3 + 2] = color.b;
    }

particles.setAttribute('position', new THREE.BufferAttribute(pos, 3));
    particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const particleMaterial = new THREE.PointsMaterial({
      size: 0.8,
      vertexColors: true,
      transparent: true,
      opacity: 0.7,
      sizeAttenuation: true
    });

const particleSystem = new THREE.Points(particles, particleMaterial);
    scene.add(particleSystem);

// === MONTRE 3D ===
    const watchGroup = new THREE.Group();

// Boîtier (cercle extérieur)
    const caseGeom = new THREE.TorusGeometry(2.5, 0.12, 16, 64);
    const caseMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.15 });
    const watchCase = new THREE.Mesh(caseGeom, caseMat);
    watchGroup.add(watchCase);

// Cadran
    const dialGeom = new THREE.CircleGeometry(2.2, 64);
    const dialMat = new THREE.MeshBasicMaterial({ color: 0x0f0f1a, side: THREE.DoubleSide });
    const dial = new THREE.Mesh(dialGeom, dialMat);
    dial.rotation.x = -Math.PI / 2;
    watchGroup.add(dial);

// Marqueurs (heures)
    const markerGeom = new THREE.BoxGeometry(0.06, 0.4, 0.01);
    const markerMat = new THREE.MeshBasicMaterial({ color: 0x8888aa });
    for (let i = 0; i < 12; i++) {
      const marker = new THREE.Mesh(markerGeom, markerMat);
      marker.position.y = 1.9;
      marker.rotation.z = (i / 12) * Math.PI * 2;
      marker.position.applyAxisAngle(new THREE.Vector3(0, 0, 1), (i / 12) * Math.PI * 2);
      watchGroup.add(marker);
    }

// Aiguilles
    const hourHand = new THREE.Mesh(new THREE.BoxGeometry(0.06, 0.9, 0.01), new THREE.MeshBasicMaterial({ color: 0xffffff }));
    const minHand = new THREE.Mesh(new THREE.BoxGeometry(0.04, 1.4, 0.01), new THREE.MeshBasicMaterial({ color: 0xddddff }));
    const secHand = new THREE.Mesh(new THREE.BoxGeometry(0.02, 1.6, 0.01), new THREE.MeshBasicMaterial({ color: 0xff4488 }));

hourHand.position.y = 0.45;
    minHand.position.y = 0.7;
    secHand.position.y = 0.8;

watchGroup.add(hourHand, minHand, secHand);

scene.add(watchGroup);
    watchGroup.position.y = -2;

// Lumières douces
    const ambient = new THREE.AmbientLight(0xffffff, 0.1);
    scene.add(ambient);

const spot = new THREE.SpotLight(0xff44aa, 0.8);
    spot.position.set(5, 5, 10);
    spot.castShadow = false;
    scene.add(spot);

// === INTERACTION SOURIS ===
    let mouseX = 0, mouseY = 0;
    const targetX = 0, targetY = 0;
    const windowHalfX = window.innerWidth / 2;
    const windowHalfY = window.innerHeight / 2;

document.addEventListener('mousemove', (e) => {
      mouseX = (e.clientX - windowHalfX) * 0.002;
      mouseY = (e.clientY - windowHalfY) * 0.002;
    });

// === ANIMATION ===
    const clock = new THREE.Clock();

const animate = () => {
      requestAnimationFrame(animate);

const time = clock.getElapsedTime();

// Rotation douce du groupe montre
      watchGroup.rotation.y = Math.sin(time * 0.1) * 0.1;

// Aiguilles synchronisées à l’heure réelle
      const date = new Date();
      const sec = date.getSeconds();
      const min = date.getMinutes() + sec / 60;
      const hour = (date.getHours() % 12) + min / 60;

secHand.rotation.z = - (sec / 60) * Math.PI * 2;
      minHand.rotation.z = - (min / 60) * Math.PI * 2;
      hourHand.rotation.z = - (hour / 12) * Math.PI * 2;

// Parallaxe caméra
      camera.position.x += (mouseX * 3 - camera.position.x) * 0.05;
      camera.position.y += (-mouseY * 3 - camera.position.y) * 0.05;
      camera.lookAt(scene.position);

// Rotation lente des particules
      particleSystem.rotation.y += 0.0002;

renderer.render(scene, camera);
    };

animate();

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

Related Examples

Perspective 3D
Perspective 3D

Author:
Omer fils ELENGA

1 month ago

172
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

32.7k
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

14.6k
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

7 months ago

1.2k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

3 weeks ago

196
Hero Section with Dark Mode
Hero Section template using Tailwind CSS. It adapts to light and dark modes using the dark: variant and still fits seamlessly under your fixed navbar.

Author:
Rathanak Phan

7 months ago

644
Hero section for website

Author:
Leon Bachmann

3 years ago

11.9k
Hero section

Author:
iamlos

10 months ago

1.5k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

3 months ago

408
Landing page

Author:
Maxim

10 months ago

1.8k
hero section

Author:
Anonymous

2 years ago

9.8k
template hero

Author:
Raul antonio de la cruz hernandez

4 weeks ago

122

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components