hero-display-type

Summary

A centred display hero where a four-line serif headline ("Creative / Digital / Studio") wraps a small rotating shape and an inline image tile inside the second word. SplitText drives the entrance, and a soft curved SVG sits behind the type on the left.

HTML structure (minimal)

<div class="tp-hero-area tp-hero-ptb main-slider">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-xxl-12">
        <div class="tp-hero-title-wrap mb-35 p-relative">
          <div class="tp-hero-shape-1"><img src="/hero-bg-shape.svg" alt=""></div>
          <div class="tp-hero-title-box text-center p-relative">
            <h1 class="tp-hero-title tp_fade_bottom">
              <span class="p-relative">
                Creative
                <span class="tp-hero-subtitle d-none d-lg-block">Hello <br>People! We're</span>
                <span class="tp-hero-shape-2"><img src="/hero-shape.png" alt=""></span>
              </span>
              <br>Digital
              <span class="tp-hero-title-img"><img class="tp-zoom-img" src="/hero-1-1.png" alt=""></span>
              Studio
            </h1>
          </div>
        </div>
        <div class="tp-hero-content tp_fade_bottom">
          <p>Global digital design studio partnering with brands and businesses…</p>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-hero-ptb { padding-top: 200px; }
.tp-hero-title {
  font-weight: 400;
  font-size: 220px;
  line-height: 1;
  color: var(--tp-common-black);
  font-family: var(--tp-ff-gallery); // gallery_modernregular custom face
}
.tp-hero-title-img { margin: 0 20px; display: inline-block; }
.tp-hero-shape-2 { position: absolute; top: -6px; right: -80px; }
.tp-hero-shape-2 img { animation: rotate2 5s linear infinite; }

Animation logic

useGSAP(() => {
  setTimeout(() => fadeAnimation(), 100);
}, {});
// fadeAnimation: gsap.set('.tp_fade_bottom',{y:100,opacity:0}); per-element scrollTrigger
// fades each .tp_fade_bottom up with duration 1.5 ease power2.out.
// charAnimation (called from page) splits .tp-char-animation titles into chars
// and stagger-tweens x:100, autoAlpha:0 with perspective:300.

Notable details

• Inline image baked into a single <h1> — keeps SEO weight on the headline while still giving the layout its visual punch.
• The rotating star/shape uses a CSS rotate2 keyframe at 5s infinite, no JS cost.
• Wrapping span tp-hero-subtitle floats supplemental copy ("Hello / People! We're") at the upper-left of the first word, an editorial flourish.

Use when

• Studio or agency landings where the type is the hero and imagery is decorative.
• When you want to mix a custom serif display face with a sans body without the headline feeling formal.

Caveats

• Custom display face gallery_modernregular ships as woff/woff2/ttf — substitute with a similar humanist serif if licensing is a concern.
• Hero title scales aggressively (220px → 70px on xs); test on narrow viewports.