Тест of Свадьбы

Корпоративы

Сергей Маковкин

Сергей Маковкин

Веду свадьбы,
которые
чувствуются

Люди
эмоции
истории

(function () {
  var LOOP_1 = 'https://static.tildacdn.ink/vide6232-3735-4336-b433-303861656331/_2__3.mp4';   
  var LOOP_2 = 'https://static.tildacdn.ink/vide6232-3735-4336-b433-303861656331/_2__3.mp4';   
  var TILES = [
    { elemId: '1789011776701000003', loop: LOOP_1, ytId: 'kWD7AmnZQj4', label: 'СМОТРЕТЬ ШОУ-РИЛ' },
    { elemId: '1789011776735000010', loop: LOOP_2, ytId: 'kWD7AmnZQj4', label: 'СМОТРЕТЬ ИСТОРИИ' }
  ];
  var rec = document.getElementById('rec3874340403');
  if (!rec) return;
  var canHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
  var cursor = document.createElement('div');
  cursor.className = 'sv-cursor';
  cursor.innerHTML = '<span class="sv-cursor__br">[</span><span class="sv-cursor__tx"></span><span class="sv-cursor__br">]</span>';
  document.body.appendChild(cursor);
  var cursorTx = cursor.querySelector('.sv-cursor__tx');
  var mx = 0, my = 0, cx = 0, cy = 0, cursorOn = false;
  if (canHover) {
    document.addEventListener('mousemove', function (e) {
      mx = e.clientX; my = e.clientY;
      if (!cursorOn) { cx = mx; cy = my; }
    });
    (function tick() {
      cx += (mx - cx) * 0.18;
      cy += (my - cy) * 0.18;
      cursor.style.transform = 'translate(' + cx + 'px,' + cy + 'px) translate(-50%,-50%) scale(' + (cursorOn ? 1 : 0.85) + ')';
      requestAnimationFrame(tick);
    })();
  }
  function showCursor(text) {
    cursorTx.textContent = text;
    cursorOn = true;
    cursor.classList.add('is-on');
  }
  function hideCursor() {
    cursorOn = false;
    cursor.classList.remove('is-on');
  }
  var stage = document.createElement('div');
  stage.className = 'sv-stage';
  stage.innerHTML =
    '<video class="sv-stage__bridge" muted playsinline loop></video>' +
    '<div class="sv-stage__player"><div id="sv-yt-player"></div></div>' +
    '<div class="sv-stage__ui">' +
      '<button class="sv-stage__close" aria-label="Закрыть">' + String.fromCharCode(215) + '</button>' +
      '<div class="sv-stage__time">0:00</div>' +
      '<div class="sv-stage__seek"><div class="sv-stage__track"><div class="sv-stage__fill"></div></div></div>' +
    '</div>';
  document.body.appendChild(stage);
  var bridge = stage.querySelector('.sv-stage__bridge');
  var playerBox = stage.querySelector('.sv-stage__player');
  var closeBtn = stage.querySelector('.sv-stage__close');
  var seek = stage.querySelector('.sv-stage__seek');
  var fill = stage.querySelector('.sv-stage__fill');
  var timeEl = stage.querySelector('.sv-stage__time');
  var open = null;
  var tileVideos = [];
  var player = null;
  var playerReady = false;
  function fmt(sec) {
    if (!sec || isNaN(sec)) sec = 0;
    var m = Math.floor(sec / 60), s = Math.floor(sec % 60);
    return m + ':' + (s < 10 ? '0' : '') + s;
  }
  function setRect(r, instant) {
    if (instant) stage.style.transition = 'none';
    stage.style.top = r.top + 'px';
    stage.style.left = r.left + 'px';
    stage.style.width = r.width + 'px';
    stage.style.height = r.height + 'px';
    if (instant) {
      void stage.offsetHeight;
      stage.style.transition = '';
    }
  }
  function openTile(tile, tileEl, tileVideo) {
    if (open) return;
    hideCursor();
    document.documentElement.style.overflow = 'hidden';
    open = { tile: tile, tileEl: tileEl };
    tileVideos.forEach(function (tv) { try { tv.pause(); } catch (e) {} });
    var r = tileEl.getBoundingClientRect();
    setRect({ top: r.top, left: r.left, width: r.width, height: r.height }, true);
    bridge.src = tile.loop;
    bridge.style.opacity = '1';
    try { bridge.currentTime = tileVideo ? tileVideo.currentTime : 0; } catch (err) {}
    bridge.play().catch(function () {});
    playerBox.classList.remove('is-on');
    stage.style.opacity = '';
    stage.classList.add('is-open');
    requestAnimationFrame(function () {
      setRect({ top: 0, left: 0, width: window.innerWidth, height: window.innerHeight });
    });
    setTimeout(function () {
      if (!open || !playerReady) return;
      player.loadVideoById({ videoId: tile.ytId, startSeconds: 0 });
      player.unMute();
      player.setVolume(100);
      player.playVideo();
    }, 620);
  }
  function closeStage() {
    if (!open) return;
    var r = open.tileEl.getBoundingClientRect();
    stage.classList.remove('is-ready');
    playerBox.classList.remove('is-on');
    bridge.style.opacity = '1';
    if (playerReady) { player.mute(); player.pauseVideo(); }
    setRect({ top: r.top, left: r.left, width: r.width, height: r.height });
    stage.style.opacity = '0';
    document.documentElement.style.overflow = '';
    setTimeout(function () {
      stage.classList.remove('is-open');
      stage.style.opacity = '';
      bridge.pause();
      bridge.removeAttribute('src');
      bridge.load();
      open = null;
      tileVideos.forEach(function (tv) { tv.play().catch(function () {}); });
    }, 560);
  }
  closeBtn.addEventListener('click', function (e) { e.stopPropagation(); closeStage(); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeStage(); });
  stage.addEventListener('click', function (e) {
    if (!open || !playerReady) return;
    if (seek.contains(e.target) || closeBtn.contains(e.target)) return;
    var st = player.getPlayerState();
    if (st === 1) player.pauseVideo(); else player.playVideo();
  });
  function seekAt(clientX) {
    if (!playerReady || !open) return;
    var box = seek.getBoundingClientRect();
    var p = (clientX - box.left) / box.width;
    p = Math.max(0, Math.min(1, p));
    var d = player.getDuration();
    if (d) player.seekTo(d * p, true);
  }
  var dragging = false;
  seek.addEventListener('mousedown', function (e) { dragging = true; seekAt(e.clientX); e.preventDefault(); });
  document.addEventListener('mousemove', function (e) { if (dragging) seekAt(e.clientX); });
  document.addEventListener('mouseup', function () { dragging = false; });
  seek.addEventListener('touchstart', function (e) { seekAt(e.touches[0].clientX); }, { passive: true });
  (function progress() {
    if (open && playerReady) {
      var d = player.getDuration(), c = player.getCurrentTime();
      if (d) {
        fill.style.width = (c / d * 100) + '%';
        timeEl.textContent = fmt(c) + ' / ' + fmt(d);
      }
    }
    requestAnimationFrame(progress);
  })();
  function killCaptions() {
    if (!player) return;
    try { player.unloadModule('captions'); } catch (e) {}
    try { player.unloadModule('cc'); } catch (e) {}
  }
  function createPlayer() {
    player = new YT.Player('sv-yt-player', {
      videoId: TILES[0].ytId,
      playerVars: {
        controls: 0, disablekb: 1, fs: 0, modestbranding: 1, rel: 0,
        playsinline: 1, iv_load_policy: 3, cc_load_policy: 0, autoplay: 0
      },
      events: {
        onReady: function () { playerReady = true; player.mute(); killCaptions(); },
        onStateChange: function (e) {
          killCaptions();
          if (e.data === 1 && open) {
            playerBox.classList.add('is-on');
            bridge.style.opacity = '0';
            stage.classList.add('is-ready');
          }
        }
      }
    });
  }
  if (window.YT && window.YT.Player) {
    createPlayer();
  } else {
    var prevCb = window.onYouTubeIframeAPIReady;
    window.onYouTubeIframeAPIReady = function () {
      if (typeof prevCb === 'function') prevCb();
      createPlayer();
    };
    if (!document.getElementById('sv-yt-api')) {
      var tag = document.createElement('script');
      tag.id = 'sv-yt-api';
      tag.src = 'https://www.youtube.com/iframe_api';
      document.head.appendChild(tag);
    }
  }
  var NEEDS_CANVAS = (window.matchMedia && window.matchMedia('(hover: none)').matches) ||
                     /iP(hone|od|ad)/.test(navigator.platform) ||
                     /iPhone|iPad|iPod|Android/.test(navigator.userAgent) ||
                     (navigator.maxTouchPoints > 1 && /Mac/.test(navigator.userAgent));
  if (NEEDS_CANVAS) document.documentElement.classList.add('sv-canvasvideo');
  var TILE_LABELS = {
    '1789011776701000003': ['1789011776703000004','1789011776711000005','1789011776715000006','1789011776731000007'],
    '1789011776735000010': ['1789011776737000011','1789011776742000012','1789011776746000013','1789011776757000014']
  };
  function mirrorToCanvas(host, video, labelEls) {
    var cv = document.createElement('canvas');
    cv.className = 'sv-tile__canvas';
    host.insertBefore(cv, host.firstChild);
    var ctx = cv.getContext('2d');
    if (!ctx) return;
    var ctxFilter = ('filter' in ctx);
    if (!ctxFilter) cv.style.filter = 'grayscale(1)';
    var dpr = Math.min(window.devicePixelRatio || 1, 2);
    var cache = null, cacheAt = 0;
    function measure() {
      var hb = host.getBoundingClientRect();
      cache = labelEls.map(function (el) {
        var atom = el.querySelector('.tn-atom') || el;
        var r = atom.getBoundingClientRect();
        var cs = getComputedStyle(atom);
        var fs = parseFloat(cs.fontSize) || 14;
        var lh = parseFloat(cs.lineHeight);
        if (!lh || isNaN(lh)) lh = fs * 1.2;
        var al = cs.textAlign === 'right' ? 'right' : (cs.textAlign === 'center' ? 'center' : 'left');
        return {
          x: r.left - hb.left, y: r.top - hb.top, w: r.width, lh: lh, align: al,
          font: cs.fontStyle + ' ' + cs.fontWeight + ' ' + fs + 'px ' + cs.fontFamily,
          text: (atom.textContent || '').replace(/\s+/g, ' ').trim()
        };
      });
      cacheAt = Date.now();
    }
    function wrap(text, maxW) {
      var words = text.split(' '), lines = [], cur = '';
      for (var i = 0; i < words.length; i++) {
        var t = cur ? cur + ' ' + words[i] : words[i];
        if (ctx.measureText(t).width > maxW && cur) { lines.push(cur); cur = words[i]; }
        else cur = t;
      }
      if (cur) lines.push(cur);
      return lines;
    }
    function drawLabels() {
      if (!cache) return;
      ctx.save();
      if (ctxFilter) ctx.filter = 'none';
      ctx.globalCompositeOperation = 'difference';
      ctx.fillStyle = '#ffffff';
      ctx.textBaseline = 'middle';
      cache.forEach(function (L) {
        if (!L.text) return;
        ctx.font = L.font;
        ctx.textAlign = L.align;
        var x = L.align === 'right' ? L.x + L.w : (L.align === 'center' ? L.x + L.w / 2 : L.x);
        var lines = wrap(L.text, L.w + 1);
        for (var i = 0; i < lines.length; i++) {
          ctx.fillText(lines[i], x, L.y + L.lh * (i + 0.5));
        }
      });
      ctx.restore();
    }
    var last = 0;
    function frame(now) {
      requestAnimationFrame(frame);
      if (now - last < 40) return;        
      last = now;
      if (open) return;
      if (video.readyState < 2) return;
      var box = host.getBoundingClientRect();
      if (box.bottom < 0 || box.top > innerHeight) return;
      var w = host.clientWidth, h = host.clientHeight;
      var vw = video.videoWidth, vh = video.videoHeight;
      if (!w || !h || !vw || !vh) return;
      var pw = Math.round(w * dpr), ph = Math.round(h * dpr);
      if (cv.width !== pw || cv.height !== ph) { cv.width = pw; cv.height = ph; cache = null; }
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      if (ctxFilter) ctx.filter = 'grayscale(1)';
      ctx.globalCompositeOperation = 'source-over';
      var k = Math.max(w / vw, h / vh);
      var dw = vw * k, dh = vh * k;
      ctx.drawImage(video, (w - dw) / 2, (h - dh) / 2, dw, dh);
      if (!cache || Date.now() - cacheAt > 1000) measure();
      drawLabels();
    }
    requestAnimationFrame(frame);
  }
    TILES.forEach(function (tile) {
    var el = rec.querySelector('[data-elem-id="' + tile.elemId + '"]');
    if (!el) return;
    var atom = el.querySelector('.tn-atom') || el;
    atom.classList.add('sv-tile');
    var v = document.createElement('video');
    v.className = 'sv-tile__video';
    v.src = tile.loop;
    v.muted = true;
    v.loop = true;
    v.autoplay = true;
    v.playsInline = true;
    v.setAttribute('muted', '');
    v.setAttribute('playsinline', '');
    v.setAttribute('webkit-playsinline', '');
    v.setAttribute('preload', 'auto');
    atom.insertBefore(v, atom.firstChild);
    tileVideos.push(v);
    v.play().catch(function () {});
    if (NEEDS_CANVAS) {
      var labelEls = (TILE_LABELS[tile.elemId] || []).map(function (id) {
        return rec.querySelector('[data-elem-id="' + id + '"]');
      }).filter(Boolean);
      mirrorToCanvas(atom, v, labelEls);
    }
    if (canHover) {
      atom.addEventListener('mouseenter', function () { if (!open) showCursor(tile.label); });
      atom.addEventListener('mouseleave', hideCursor);
    }
    atom.addEventListener('click', function () { openTile(tile, el, v); });
  });
})();

(function () {
  var MENU_REC   = 'rec3874339803';          
  var HERO_REC   = 'rec3874339903';          
  var MENU_NAME  = '1789010888500000006';    
  var HERO_NAME  = '1789010888455000000';    
  var NEXT_REC   = 'rec3874340403';          
  var EASE_POWER = 2;                        
  var MOBILE_MAX = 959;                      
  var menuRec = document.getElementById(MENU_REC);
  var heroRec = document.getElementById(HERO_REC);
  if (!menuRec || !heroRec) return;
  var menuNameEl = menuRec.querySelector('[data-elem-id="' + MENU_NAME + '"]');
  var heroNameEl = heroRec.querySelector('[data-elem-id="' + HERO_NAME + '"]');
  if (!menuNameEl || !heroNameEl) return;
  var heroAtom = heroNameEl.querySelector('.tn-atom') || heroNameEl;
  var spacer = document.createElement('div');
  spacer.className = 'sv-menu-spacer';
  menuRec.parentNode.insertBefore(spacer, menuRec);
  var bar = document.createElement('div');
  bar.className = 'sv-menu-bg';
  document.body.appendChild(bar);
  var heroArt = heroRec.querySelector('.t396__artboard') || heroRec;
  var nextRec = document.getElementById(NEXT_REC);
  var clone = document.createElement('div');
  clone.className = 'sv-name-clone';
  clone.textContent = (heroAtom.textContent || '').trim();
  heroArt.appendChild(clone);
  var M = null;
  function measure() {
    heroNameEl.classList.remove('sv-hero-name-hidden');
    menuNameEl.style.opacity = '';
    clone.style.display = 'none';
    var mh = menuRec.getBoundingClientRect().height;
    spacer.style.height = mh + 'px';
    bar.style.height = mh + 'px';
    var sy = window.pageYOffset;
    var hr = heroNameEl.getBoundingClientRect();
    var mr = menuNameEl.getBoundingClientRect();
    var hcs = getComputedStyle(heroAtom);
    M = {
      heroTop:  hr.top + sy,
      heroLeft: hr.left,
      heroW:    hr.width,
      heroH:    hr.height,
      menuViewTop:  mr.top,      
      menuViewLeft: mr.left,
      menuW:    mr.width,
      barH:     mh
    };
    M.heroCx = hr.left + hr.width / 2;
    M.menuCx = mr.left + mr.width / 2;
    M.dur = Math.max(220, Math.min(700, M.heroTop - M.menuViewTop + M.heroH * 0.6));
    clone.style.display = '';
    clone.style.fontFamily    = hcs.fontFamily;
    clone.style.fontSize      = hcs.fontSize;
    clone.style.fontWeight    = hcs.fontWeight;
    clone.style.fontStyle     = hcs.fontStyle;
    clone.style.letterSpacing = hcs.letterSpacing;
    clone.style.lineHeight    = hcs.lineHeight;
    clone.style.textTransform = hcs.textTransform;
    clone.style.color         = hcs.color;
    clone.style.transform = 'none';
    var cn = clone.getBoundingClientRect();
    M.natW = cn.width;
    M.natH = cn.height;
    M.k0 = M.natW ? M.heroW / M.natW : 1;              
    M.k1 = M.natW ? M.menuW / M.natW : 0.13;           
    heroNameEl.classList.add('sv-hero-name-hidden');
  }
  function ease(p) {
    return 1 - Math.pow(1 - p, EASE_POWER);
  }
  function render() {
    if (!M) return;
    var sy = window.pageYOffset;
    var R1 = 550, DWELL = 300; var rp = Math.max(0,Math.min(1,sy/R1)); var re = 1-Math.pow(1-rp,EASE_POWER); var msv = Math.max(0, sy-R1-DWELL); var p = M.dur > 0 ? Math.max(0, Math.min(1, msv / M.dur)) : 1;
    var e = ease(p);
    var startTop = M.heroTop;
    var top  = startTop   + (M.menuViewTop  - startTop)   * e;
    var s    = M.k0 + (M.k1 - M.k0) * e;
    var cx   = M.heroCx + (M.menuCx - M.heroCx) * e;
    var left = cx - (M.natW * s) / 2;
    var ar = heroArt.getBoundingClientRect();
    clone.style.top = (top - ar.top + (1-re)*420) + 'px';
    clone.style.left = (left - ar.left) + 'px';
    clone.style.transform = 'scale(' + s + ')';
    var done = p >= 1;
    clone.style.opacity = done ? '0' : String(re);
    menuNameEl.style.opacity = done ? '1' : '0';
    var opaque = nextRec
      ? (nextRec.getBoundingClientRect().top <= M.barH + 40)
      : (sy > window.innerHeight * 0.8);
    bar.style.opacity = opaque ? '1' : '0';
  }
  var ticking = false;
  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(function () { render(); ticking = false; });
  }
  function isMobile() {
    return false;
  }
  function init() {
    if (isMobile()) {
      M = null;
      var mh = menuRec.getBoundingClientRect().height;
      spacer.style.height = mh + 'px';
      bar.style.height = mh + 'px';
      bar.style.opacity = '1';          
      clone.style.display = 'none';
      heroNameEl.classList.remove('sv-hero-name-hidden');
      menuNameEl.style.opacity = '';
      return;
    }
    clone.style.display = '';
    var sy = window.pageYOffset;
    window.scrollTo(0, 0);
    measure();
    window.scrollTo(0, sy);
    render();
  }
  init();
  window.addEventListener('scroll', onScroll, {passive: true});
  var __lw=window.innerWidth;window.addEventListener('resize', function(){ if(window.innerWidth!==__lw){__lw=window.innerWidth; init();} });
  window.addEventListener('load', function () { init(); });
  setTimeout(init, 1200);
  setTimeout(init, 3000);
})();

(function () {
  var HERO_REC = 'rec3874339903';
  var LAYERS = [
    { id: '1789010888492000003', shift: 34, scale: 0.06, fade: 0.10 },  
    { id: '1789010888472000001', shift: 82, scale: 0.02, fade: 0.85 },  
    { id: '1789010888484000002', shift: 62, scale: 0.02, fade: 0.85 }   
  ];
  var heroRec = document.getElementById(HERO_REC);
  if (!heroRec) return;
  var items = [];
  LAYERS.forEach(function (l) {
    var el = heroRec.querySelector('[data-elem-id="' + l.id + '"]');
    if (el) {
      el.style.transformOrigin = '50% 50%';
      items.push({ el: el, cfg: l });
    }
  });
  if (!items.length) return;
  function amount() {
    return window.innerWidth < 960 ? 0.5 : 1;
  }
  function render() {
    var h = heroRec.getBoundingClientRect().height || window.innerHeight;
    var p = Math.max(0, Math.min(1, Math.max(0, window.pageYOffset - 850) / h));
    var k = amount();
    items.forEach(function (it) {
      var c = it.cfg;
      var __sy=window.pageYOffset,__R=550,__intro=Math.max(0,Math.min(1,__sy/__R)),__ie=1-Math.pow(1-__intro,2);var __isText=(c.id.indexOf("472000001")>-1||c.id.indexOf("484000002")>-1);var y = -p * c.shift * k + (__isText?(1-__ie)*420:0);
      var s = 1 - p * c.scale * k;
      it.el.style.transform = 'translateY(' + y + 'px) scale(' + s + ')';
      if (c.fade) {
        it.el.style.opacity = String(Math.max(0, 1 - p * c.fade) * (__isText?__ie:1));
      }
    });
  }
  var ticking = false;
  function onScroll() {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(function () {
      try { render(); } finally { ticking = false; }
    });
  }
  render();
  window.addEventListener('scroll', onScroll, {passive: true});
  window.addEventListener('resize', onScroll);
  window.addEventListener('load', render);
})();

01.SHOWREEL

[02:18]

Год свадеб,
сжатый в две минуты

[2026]

01.ИСТОРИИ/ЛЮДИ

[01:57]

Загс, банкет, первый танец

[2026]

+7 900 000 00 00

INST

WHATSAPP

TELEGRAM