Najar - Samin

by Samin Sami

HTML

<link rel="stylesheet" href="style.css">

<div class="hero-module">
  <header>
    <div class="container">
      <div class="logo-container">
        <div class="logo-circles">
          <div class="circle circle-1"></div>
          <div class="circle circle-2"></div>
        </div>
      </div>
    </div>
  </header>

  <div class="effects-sidebar">
    <ul>
      <li><a href="#" data-effect="flame" class="active">Flame</a></li>
      <li><a href="#" data-effect="venetian">Venetian</a></li>
      <li><a href="#" data-effect="curtain">Curtain</a></li>
      <li><a href="#" data-effect="hexagon">Hexagon</a></li>
      <li><a href="#" data-effect="liquid">Liquid</a></li>
      <li><a href="#" data-effect="zoomsplit">Zoom Split</a></li>
    </ul>
  </div>

  <section class="hero-section">
    <div class="text-columns">
      <div class="text-column">
        <span class="text-item">Premium</span>
        <span class="text-item">Luxury</span>
        <span class="text-item">Elegance</span>
        <span class="text-item">Style</span>
        <span class="text-item">Fashion</span>
        <span class="text-item">Trend</span>
        <span class="text-item">Chic</span>
        <span class="text-item">Classic</span>
        <span class="text-item">Modern</span>
        <span class="text-item">Vogue</span>
        <span class="text-item">Glamour</span>
        <span class="text-item">Grace</span>
        <span class="text-item">Refined</span>
        <span class="text-item">Tailored</span>
        <span class="text-item">Exquisite</span>
      </div>
      <div class="text-column">
        <span class="text-item">Wardrobe</span>
        <span class="text-item">Collection</span>
        <span class="text-item">Boutique</span>
        <span class="text-item">Couture</span>
        <span class="text-item">Design</span>
        <span class="text-item">Fabric</span>
        <span class="text-item">Texture</span>
       ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap');

@font-face {
  font-family: "PPSupplyMono";
  src: url("https://assets.codepen.io/7558/PPSupplyMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "GT Standard";
  src: url("https://assets.codepen.io/7558/GT-Standard-VF-Trial.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 0% 150%;
  font-style: normal;
}

:root {
  --font-sans: "GT Standard", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "PPSupplyMono", "Courier New", monospace;
  --color-text: #ffffff;
  --color-text-dark: #888888;
  --color-gradient-1: #3a3a3a;
  --color-gradient-2: #3f3f3f;
  --color-gradient-3: #444444;
  --color-gradient-4: #494949;
  --color-gradient-5: #4e4e4e;
  --color-gradient-6: #535353;
  --color-gradient-7: #585858;
  --color-gradient-8: #5d5d5d;
  --color-gradient-9: #626262;
  --color-gradient-10: #676767;
  --color-gradient-11: #6c6c6c;
  --color-gradient-12: #717171;
  --color-gradient-13: #767676;
  --color-gradient-14: #7b7b7b;
  --color-gradient-15: #808080;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background-color: #000;
  touch-action: pan-y;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/7558/noise-002.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
}

svg[aria-hidden='true'][height='0'] { position: fixed; }

.hero-module {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

header {
  position: absolute;
  top: 0;
 ...

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const animateTextColumns = () => {
    const tl = gsap.timeline();
    tl.to(".text-item", {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      duration: 0.8,
      ease: "power2.out",
      stagger: { amount: 3, from: "start" }
    }).to(".rotated-item", {
      opacity: 1,
      filter: "blur(0px)",
      duration: 0.8,
      ease: "power2.out",
      stagger: 0.2
    }, "-=2");
  };
  setTimeout(animateTextColumns, 200);

  /* ─── 3D Tilt on Samin Jisan box (lightweight, CSS transition driven) ─── */
  const tiltBox = document.getElementById("tiltBox");
  const tiltInner = tiltBox.querySelector(".video-text-inner");

  if (tiltBox && tiltInner) {
    const maxTilt = 8;
    let tiltTimeout = null;

    tiltBox.addEventListener("mousemove", (e) => {
      const rect = tiltBox.getBoundingClientRect();
      const dx = e.clientX - (rect.left + rect.width / 2);
      const dy = e.clientY - (rect.top + rect.height / 2);
      tiltInner.style.transform = `rotateX(${-dy / (rect.height / 2) * maxTilt}deg) rotateY(${dx / (rect.width / 2) * maxTilt}deg)`;
      clearTimeout(tiltTimeout);
      tiltTimeout = setTimeout(() => { tiltInner.style.transform = "rotateX(0deg) rotateY(0deg)"; }, 3000);
    });

    tiltBox.addEventListener("mouseleave", () => {
      tiltInner.style.transform = "rotateX(0deg) rotateY(0deg)";
      clearTimeout(tiltTimeout);
    });
  }

  const container = document.querySelector(".hero-section");
  const speedIndicator = document.querySelector(".speed-indicator");
  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth <= 768;

  const config = {
    imageCount: 14,
    imageLifespan: 600,
    removalDelay: 16,
    mouseThreshold: isMobile ? 20 : 40,
    scrollThreshold: 50,
    inDuration: 600,
    outDuration: 800,
    inEasing: "cubic-bezier(.07,.5,.5,1)",
    outEasing:...