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

103

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

hero template

Author:
Raul antonio de la cruz hernandez

2 weeks ago

22
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

1 year ago

1.8k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

20.1k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.9k
LIQUID PLASMA by omerlinks
LIQUID PLASMA by omerlinks

Author:
Omer fils ELENGA

1 week ago

28
Hero

Author:
ariaw

3 months ago

606
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.9k
Trading
used to trade something

Author:
nii fanny

7 months ago

753
Portfolio Hero Section

Author:
KULDEEP

6 months ago

640
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Hero Beer

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

1 year ago

4.9k
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

Author:
INGRIDE MUZIRANENGE

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components