3D UI Motion Design

Share Button Animation

Arc Pitch Angle: 46°
Arc Radius: 155px
Spring Tension: Bouncy 
<!-- Radial Share Arc Structure -->
<div class="share-hub">
  <nav class="splay-arc">
    <a class="ch" data-ch="x" style="--i: 0;"><svg class="ch-icon">...</svg></a>
    <a class="ch" data-ch="linkedin" style="--i: 1;"><svg class="ch-icon">...</svg></a>
    <a class="ch" data-ch="whatsapp" style="--i: 2;"><svg class="ch-icon">...</svg></a>
    <a class="ch" data-ch="email" style="--i: 3;"><svg class="ch-icon">...</svg></a>
    <a class="ch" data-ch="link" style="--i: 4;"><svg class="ch-icon">...</svg></a>
  </nav>
  <button class="hub-btn">SHARE</button>
</div>
/* THE ARC IS SOLVED FOR, NOT PLACED */
.splay-arc {
  --pitch: 46deg;
  --gap: 1.5;
  --r: calc((var(--d) * var(--gap)) / (2 * sin(var(--pitch) / 2)));
}

.ch {
  --a: calc((var(--i) - (var(--n) - 1) / 2) * var(--pitch));
  transform: translate(
    calc(sin(var(--a)) * var(--r)),
    calc(cos(var(--a)) * var(--r) * -1)
  ) scale(var(--s));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
// Native Clipboard Write & Action Trigger
async function copyLink(url) {
  await navigator.clipboard.writeText(url);
  setHubState('copied', 'Link copied');
  fireConfetti();
}