footer-floating-shape

Summary

Sticky bottom-right circular badge that links to /contact. Two layered PNG shapes (an outer ring and an inner mark) rotate at different speeds via CSS keyframes, producing a kinetic emblem that lives outside the smooth-scroll wrapper.

HTML structure (minimal)

<div class="tp-footer-shape-wrap z-index-5 smooth">
  <a href="/contact">
    <div class="tp-footer-shape p-relative">
      <img class="img-1" src="/footer-circle-shape-1.png" alt="shape">
      <img class="img-2" src="/footer-circle-shape-2.png" alt="shape">
      <span></span>
    </div>
  </a>
</div>

Key SCSS tokens

.tp-footer-shape-wrap {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 5;
  pointer-events: auto;
}
.tp-footer-shape { width: 140px; height: 140px; }
.tp-footer-shape .img-1 { animation: rotate2 12s linear infinite; }
.tp-footer-shape .img-2 { animation: rotate2 6s linear infinite reverse; position: absolute; inset: 0; margin: auto; }
.tp-footer-shape:hover .img-1 { animation-duration: 4s; }
@keyframes rotate2 { to { transform: rotate(360deg); } }

Animation logic

/* Pure CSS — no JS needed */
.tp-footer-shape .img-1 { animation: rotate2 12s linear infinite; }
.tp-footer-shape .img-2 { animation: rotate2 6s linear infinite reverse; }

Notable details

• Two rotating PNGs at different speeds is the cheapest way to make a static logo feel alive.
• Lives outside #smooth-content, so it does not parallax with ScrollSmoother — stays fixed regardless of scroll engine state.
• z-index-5 keeps it below modals (which sit at z-index 9999) but above all section content.

Use when

• Persistent CTAs (Hire / Contact / Book a call) on portfolio sites where you want a tactile call-out.
• Anywhere you'd otherwise put a chat bubble but prefer the studio's own branding.

Caveats

• On mobile, 140px in the corner can occlude content — consider hiding below md or shrinking.
• Two PNGs add HTTP requests; consider one SVG with two <g> rotating elements.