hero-banner

Summary

Full-viewport dark hero anchored bottom-center with a thin/regular mixed-weight headline ("Designing a Better World Today"), a short paragraph, two CTAs, and three layered rotating dodecahedron decorations parallax-scaling on scroll. A circular Scroll-down SVG anchor sits bottom-right.

HTML structure (minimal)

<section class="mil-banner mil-dark-bg">
  <div class="mi-invert-fix">
    <div class="mil-animation-frame">
      <div class="mil-animation mil-position-1 mil-scale" data-value-1="7" data-value-2="1.6"></div>
      <div class="mil-animation mil-position-2 mil-scale" data-value-1="4" data-value-2="1"></div>
      <div class="mil-animation mil-position-3 mil-scale" data-value-1="1.2" data-value-2=".1"></div>
    </div>
    <div class="mil-gradient"></div>
    <div class="container">
      <div class="mil-banner-content mil-up">
        <h1 class="mil-muted mil-mb-60">Designing <span class="mil-thin">a Better</span><br> World <span class="mil-thin">Today</span></h1>
        <div class="row">
          <div class="col-md-7 col-lg-5">
            <p class="mil-light-soft mil-mb-60">Welcome to our world of endless imagination...</p>
          </div>
        </div>
        <a href="services.html" class="mil-button mil-arrow-place mil-btn-space"><span>What we do</span></a>
        <a href="portfolio-1.html" class="mil-link mil-muted mil-arrow-place"><span>View works</span></a>
        <div class="mil-circle-text">
          <svg class="mil-ct-svg mil-rotate" data-value="360" viewBox="0 0 300 300">
            <defs><path id="circlePath" d="M 150,150 m -60,0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0"/></defs>
            <text style="letter-spacing: 6.5px"><textPath xlink:href="#circlePath">Scroll down - Scroll down - </textPath></text>
          </svg>
          <a href="#about" class="mil-button mil-arrow-place mil-icon-button mil-arrow-down"></a>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.mil-banner {
  height: 100vh;
  & .container { height: 100%; display: flex; align-items: flex-end; }
  & .mil-banner-content { width: 100%; padding-bottom: 120px; position: relative; }
}
.mil-circle-text {
  position: absolute; right: 0; bottom: 90px;
  width: 140px; height: 140px;
  & .mil-ct-svg { transform: scale(2); }
  & text { fill: $lt-40; transition: $t-md; }
  &:hover svg text { fill: $light; }
}

Animation logic

// scale primitive used by all three .mil-animation .mil-scale dodecahedrons
const scaleImage = document.querySelectorAll(".mil-scale");
scaleImage.forEach((section) => {
  const v1 = $(section).data("value-1");
  const v2 = $(section).data("value-2");
  gsap.fromTo(section, { scale: v1 }, {
    scale: v2,
    scrollTrigger: { trigger: section, scrub: true }
  });
});

// rotation primitive driving the circular Scroll-down text
document.querySelectorAll(".mil-rotate").forEach((el) => {
  gsap.fromTo(el, { rotate: 0 }, {
    rotate: $(el).data("value"),
    scrollTrigger: { trigger: el, scrub: true }
  });
});

Notable details

• Uses mi-invert-fix wrapper to flip cursor color over dark sections without JS.
• Headline mixes .mil-thin spans inline so a single H1 reads as two voices (regular + 100-weight).
• Three offset dodecahedrons at .mil-position-1/2/3 are cloned in by JS from .mil-hidden-elements — the markup carries placeholders only.
• Bottom-aligned content with align-items: flex-end keeps the text grounded at any viewport height.

Use when

• Creative agency or studio site that wants a quietly dramatic dark first frame.
• You need a hero that decorates itself with depth without a video or photo.
• The layout calls for an explicit "Scroll down" affordance integrated with the brand voice.

Caveats

• Three-position dodecahedron decorations hide below 1400px (CSS display: none) — the .mil-circle-text hides below 992px, so don't rely on these on tablet/mobile.
• Requires the global .mil-up GSAP fromTo to have run, otherwise the H1 stays at opacity 0.