document.addEventListener('DOMContentLoaded', () => {
  // Espera a que todo cargue (incluido Bricks)
  window.addEventListener('load', () => {
    setTimeout(() => {
      const headerEl = document.getElementById('brx-header');
      const targetEls = Array.from(document.querySelectorAll('.fb-hide-on-scroll'));

      if (!headerEl || !targetEls.length) return;

      let headerHeight = 0;
      let addThreshold = 0;
      let removeThreshold = 0;
      let hidden = false;
      let ticking = false;

      function updateHeights() {
        headerHeight = headerEl.getBoundingClientRect().height;
        addThreshold = Math.ceil(headerHeight) + 1;
        removeThreshold = Math.max(0, Math.floor(headerHeight) - 6);
      }

      function applyHiddenClass(shouldHide) {
        targetEls.forEach(el => {
          el.classList.toggle('fb-hide', shouldHide);
        });
      }

      function onScrollRaf() {
        const scrollY = window.scrollY || window.pageYOffset;

        if (!hidden && scrollY > addThreshold) {
          hidden = true;
          applyHiddenClass(true);
        } else if (hidden && scrollY < removeThreshold) {
          hidden = false;
          applyHiddenClass(false);
        }
        ticking = false;
      }

      function onScroll() {
        if (!ticking) {
          ticking = true;
          requestAnimationFrame(onScrollRaf);
        }
      }

      updateHeights();
      window.addEventListener('scroll', onScroll, { passive: true });

      window.addEventListener('resize', () => {
        updateHeights();
        onScrollRaf();
      });

      if (typeof ResizeObserver !== 'undefined') {
        const ro = new ResizeObserver(() => {
          updateHeights();
          onScrollRaf();
        });
        ro.observe(headerEl);
      }

      onScrollRaf();
    }, 400); // <-- inicia 1 segundo después de la carga completa
  });
});

Hero

Enjoy Now

Discover the new set of templates, the difference with FB 1.0 is that FB 2.0 is component-based, keeps consistency and is more accessible without sacrificing creativity. New templates will be released every week.

You can use FB 1.0 and FB 2.0 at the same time without any problems.

Dynamic hero navigation
hero split image
Hero rubik box 3d
wave image animation
text background image reveal
Hero 3d box Bricks builder
Hero image circle radial rotate bricks builder
Hero sas
Hero horizontal perspective