Dial :: Lab :: Carter Ogunsola

A tuner dial you spin: a full ring of channels hubbed off-screen left, one active where it crosses the axis. Drag, scroll, or arrow-key it; each detent snaps with an elastic settle and a click pitched to how fast you spun.

Dependencies

GSAPCore :: ticker, tweens, elastic ease

A radio you can’t listen to

Old FM tuners had a weighted wheel. You’d spin past the stations and it would settle into one with a soft click. This is that, minus the radio: a ring of channels you spin with the knob, a drag, the scroll wheel, or the arrow keys. Whichever one crosses the centerline is live.

It’s a full circle, you only see the edge

The dial looks like an arc, but it’s a complete ring of 26 channels turning around a hub that sits off the left of the stage. You only ever see its right cap. The rest of it (the left of the ring, the top and bottom curling away) gets painted back over with the page’s own background by one conic-gradient centered on that hub. So there’s no clever culling to keep offscreen items hidden: the ring is always all there, and the dial you see is just the slice the cover leaves uncovered.

The tick ruler is the same move: a full ring of marks, a long one on every channel, spun by a single transform and clipped by the same cover. A major tick lands on the axis exactly when a channel goes live.

The feel is the whole point

Anyone can rotate a ring. The reason this one feels like hardware is a handful of numbers, carried over from the original build and left exactly where they were tuned:

const DAMP_DRAG = 15;   // follow while dragging — laggy, has weight
const DAMP_IDLE = 25;   // follow at rest — settles quicker
const SNAP_EASE = "elastic.out(2, 0.6)";   // the detent
const SNAP_DUR  = 0.8;

Your finger sets a target; the dial damps toward it a beat behind, so it has mass. Let go and it settles onto the nearest channel with a short elastic overshoot. That’s the detent. Every time a channel crosses the line it clicks, pitched by how fast you’re spinning (playback rate 0.8 → 1.6 over velocity / 600), so a slow nudge and a hard flick don’t sound alike. Drag the knob and its grip line see-saws against the motion, then springs back level. None of these are load-bearing; all of them are why it reads as an object.

Make it yours

SLICE — 360 / channel-count. Fewer channels, wider spacing; the ring stays a ring.
--dial-accent — the knob’s fill. It’s --ink by default, since the site is monochrome; set it to any color to bring the knob back to life.
The tuning block — DAMP_*, SNAP_*, the sound rates. Change these and nothing else to make the dial heavier, snappier, or silent.

Reduced-motion callers get the same dial with the physics off: it jumps to each channel, no coast, no click.

Would you ship this?

Probably not as your nav. But it’s a fair reminder that “pick one of N” doesn’t have to be a dropdown, and that most of what makes an interaction feel expensive lives in four or five constants you can tune by hand.

Setup

1
<!-- GSAP (from CDN) -->
2
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
3

4
<!-- Site tokens the styles use — swap freely -->
5
<style>
6
  :root {
7
    --font-sans: "Oracle", "Geist", system-ui, sans-serif;
8
    --track: -0.02em;
9
    --paper: #d6d6d5;
10
    --ink: #1e1e1e;
11
    --ink-muted: rgba(30, 30, 30, 0.7);
12
    --surface: #fdfcfb;
13
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
14
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
15
  }
16
</style>
17

18
<!-- Sized stage — the script fills it -->
19
<div class="stage" style="position: relative; height: 100vh; background: var(--paper);"></div>
20

21
<!-- Then the Script, inside <script> (CodePen's JS panel does this for you) -->

Style

1
.dial {
2
  position: absolute;
3
  inset: 0;
4
  overflow: hidden;
5
  font-family: var(--font-sans);
6
  --dial-accent: var(--ink);
7
  --dial-accent-ink: var(--paper);
8
  touch-action: none;
9
  -webkit-user-select: none;
10
  user-select: none;
11
  outline: none;
12
}
13

14
.dial__stage {
15
  position: absolute;
16
  inset: 0;
17
}
18

19
.dial__ticks {
20
  position: absolute;
21
  inset: 0;
22
  pointer-events: none;
23
}
24

25
.dial__ticks-rotor {
26
  position: absolute;
27
  left: 0;
28
  top: 0;
29
  width: 0;
30
  height: 0;
31
}
32

33
.dial__tick {
34
  position: absolute;
35
  left: 0;
36
  top: 0;
37
  height: 1px;
38
  border-radius: 1px;
39
  background: var(--ink);
40
  transform-origin: 0 50%;
41
  opacity: .2;
42
}
43

44
.dial__tick--major {
45
  height: 1.5px;
46
  opacity: .42;
47
}
48

49
.dial__item {
50
  position: absolute;
51
  left: 0;
52
  top: 0;
53
  display: flex;
54
  align-items: center;
55
  gap: .7rem;
56
  transform-origin: 0 50%;
57
  white-space: nowrap;
58
  text-decoration: none;
59
  color: var(--ink-muted);
60
  will-change: transform;
61
  transition: color .3s var(--ease-out-quad);
62
}
63

64
.dial__ic {
65
  flex: none;
66
  display: grid;
67
  place-items: center;
68
  width: 1.9rem;
69
  height: 1.9rem;
70
  transition: transform .35s var(--ease-out-expo);
71
}
72

73
.dial__ic svg {
74
  width: 100%;
75
  height: 100%;
76
  fill: currentColor;
77
}
78

79
.dial__label {
80
  font-size: 1.05rem;
81
  letter-spacing: var(--track);
82
  line-height: 1;
83
  transition: font-weight .2s,letter-spacing .3s var(--ease-out-quad);
84
}
85

86
.dial__item.is-active {
87
  color: var(--ink);
88
}
89

90
.dial__item.is-active .dial__label {
91
  font-weight: 600;
92
}
93

94
.dial__item.is-active .dial__ic {
95
  transform: scale(1.08);
96
}
97

98
.dial__cover {
99
  position: absolute;
100
  inset: 0;
101
  pointer-events: none;
102
  --dial-clear: rgb(from var(--surface) r g b / 0);
103
  background: conic-gradient(from 0deg at var(--dial-cx,40%) var(--dial-cy,50%), var(--surface) 0deg 12deg, var(--dial-clear) 38deg 142deg, var(--surface) 168deg 360deg);
104
}
105

106
.dial__index {
107
  position: absolute;
108
  top: 50%;
109
  height: 1.5px;
110
  background: var(--ink);
111
  opacity: .85;
112
  transform: translateY(-.75px);
113
  pointer-events: none;
114
}
115

116
.dial__knob {
117
  position: absolute;
118
  top: 50%;
119
  display: grid;
120
  place-items: center;
121
  border-radius: 50%;
122
  background: var(--dial-accent);
123
  color: var(--dial-accent-ink);
124
  cursor: grab;
125
  border: 0;
126
  padding: 0;
127
  box-shadow: 0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35);
128
  transform: translate(-50%,-50%);
129
  transition: box-shadow .3s var(--ease-out-quad);
130
}
131

132
.dial.is-dragging .dial__knob {
133
  cursor: grabbing;
134
  box-shadow: 0 2px 4px rgba(0,0,0,.16),0 14px 34px -12px rgba(0,0,0,.42);
135
}
136

137
.dial__grip {
138
  width: 46%;
139
  height: 2px;
140
  border-radius: 2px;
141
  background: currentColor;
142
  opacity: .92;
143
  transform-origin: 50% 50%;
144
}
145

146
.dial__item:focus-visible {
147
  outline: 2px solid var(--ink);
148
  outline-offset: 4px;
149
  border-radius: .4rem;
150
}
151

152
@media (prefers-reduced-motion: reduce) {
153
  .dial__item,.dial__ic,.dial__label {
154
    transition: none;
155
  }
156
}

Script

1
const svgFacebook = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M9.58404 21.706V15.0561H7.52015V12H9.58404V10.6833C9.58404 7.27944 11.124 5.70333 14.464 5.70333C15.0963 5.70333 16.1879 5.82722 16.6363 5.95111V8.71944C16.4001 8.69556 15.9879 8.68333 15.4801 8.68333C13.8401 8.68333 13.2079 9.30333 13.2079 10.9194V12H16.4763L15.9163 15.0556H13.2124V21.9277C18.1637 21.3279 22 17.112 22 12C22 6.47722 17.5228 2 12 2C6.47722 2 2 6.47722 2 12C2 16.6899 5.22813 20.6253 9.58404 21.706Z" fill="currentColor"/></svg>';
2
const svgX = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M17.5652 3.25H20.5319L14.0505 10.6628L21.6753 20.75H15.7052L11.0291 14.6322L5.67867 20.75H2.71017L9.64264 12.8212L2.32812 3.25H8.44986L12.6766 8.84192L17.5652 3.25ZM16.524 18.9731H18.1679L7.55662 4.93359H5.79256L16.524 18.9731Z" fill="currentColor"/></svg>';
3
const svgInstagram = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 4.21173C14.5365 4.21173 14.837 4.22123 15.8389 4.267C16.4411 4.27427 17.0377 4.38499 17.6024 4.59432C18.0151 4.74662 18.3884 4.9895 18.6949 5.30509C19.0105 5.61156 19.2534 5.98488 19.4057 6.39759C19.615 6.96235 19.7257 7.55888 19.733 8.16114C19.7788 9.16295 19.7883 9.4635 19.7883 12C19.7883 14.5365 19.7788 14.837 19.733 15.8389C19.7257 16.4411 19.615 17.0377 19.4057 17.6024C19.2476 18.0122 19.0055 18.3844 18.6949 18.6949C18.3844 19.0055 18.0122 19.2476 17.6024 19.4057C17.0377 19.615 16.4411 19.7257 15.8389 19.733C14.837 19.7788 14.5365 19.7883 12 19.7883C9.4635 19.7883 9.16295 19.7788 8.16114 19.733C7.55859 19.7258 6.96176 19.6151 6.39673 19.4057C5.98433 19.2533 5.61132 19.0104 5.30509 18.6949C4.9895 18.3884 4.74662 18.0151 4.59432 17.6024C4.38499 17.0377 4.27427 16.4411 4.267 15.8389C4.22123 14.837 4.21173 14.5365 4.21173 12C4.21173 9.4635 4.22123 9.16295 4.267 8.16114C4.27427 7.55888 4.38499 6.96235 4.59432 6.39759C4.74662 5.98488 4.9895 5.61156 5.30509 5.30509C5.61156 4.9895 5.98488 4.74662 6.39759 4.59432C6.96235 4.38499 7.55888 4.27427 8.16114 4.267C9.16295 4.22123 9.4635 4.21173 12 4.21173ZM12 2.5C9.42032 2.5 9.09645 2.51123 8.08341 2.557C7.29535 2.57272 6.51567 2.72194 5.7775 2.99832C5.1433 3.2371 4.56886 3.61141 4.09427 4.09514C3.61096 4.56956 3.23695 5.14369 2.99832 5.7775C2.72224 6.51572 2.57331 7.2954 2.55786 8.08341C2.51036 9.09645 2.5 9.42032 2.5 12C2.5 14.5797 2.51123 14.9035 2.557 15.9166C2.57272 16.7046 2.72194 17.4843 2.99832 18.2225C3.2371 18.8567 3.61141 19.4311 4.09514 19.9057C4.56956 20.389 5.14369 20.763 5.7775 21.0017C6.51572 21.2778 7.2954 21.4267 8.08341 21.4421C9.09645 21.4896 9.42032 21.5 12 21.5C14.5797 21.5 14.9035 21.4888 15.9166 21.443C16.7046 21.4273 17.4843 21.2781 18.2225 21.0017C18.8538 20.7576 19.4271 20.3843 19.9057 19.9057C20.3843 19.4271 20.7576 18.8538 21.0017 18.2225C21.2778 17.4843 21.4267 16.7046 21.4421 15.9166C21.4896 14.9035 21.5 14.5797 21.5 12C21.5 9.42032 21.4888 9.09645 21.443 8.08341C21.4273 7.29535 21.2781 6.51567 21.0017 5.7775C20.7629 5.1433 20.3886 4.56886 19.9049 4.09427C19.4304 3.61096 18.8563 3.23695 18.2225 2.99832C17.4843 2.72224 16.7046 2.57331 15.9166 2.55786C14.9035 2.51036 14.5797 2.5 12 2.5ZM12 7.12132C11.0351 7.12132 10.0918 7.40745 9.28955 7.94352C8.48725 8.4796 7.86194 9.24155 7.49269 10.133C7.12343 11.0245 7.02682 12.0054 7.21506 12.9518C7.40331 13.8982 7.86796 14.7675 8.55025 15.4497C9.23255 16.132 10.1018 16.5967 11.0482 16.7849C11.9946 16.9732 12.9755 16.8766 13.867 16.5073C14.7585 16.1381 15.5204 15.5127 16.0565 14.7105C16.5926 13.9082 16.8787 12.9649 16.8787 12C16.8787 10.7061 16.3647 9.46518 15.4497 8.55025C14.5348 7.63532 13.2939 7.12132 12 7.12132ZM12 15.167C11.3736 15.167 10.7613 14.9812 10.2405 14.6332C9.71973 14.2852 9.31382 13.7906 9.07412 13.2119C8.83442 12.6333 8.7717 11.9965 8.8939 11.3822C9.0161 10.7678 9.31772 10.2035 9.76063 9.76063C10.2035 9.31772 10.7678 9.0161 11.3822 8.8939C11.9965 8.7717 12.6333 8.83442 13.2119 9.07412C13.7906 9.31382 14.2852 9.71973 14.6332 10.2405C14.9812 10.7613 15.167 11.3736 15.167 12C15.167 12.8399 14.8333 13.6455 14.2394 14.2394C13.6455 14.8333 12.8399 15.167 12 15.167ZM17.0713 5.78873C16.8458 5.78873 16.6254 5.85559 16.4379 5.98085C16.2505 6.10612 16.1043 6.28416 16.0181 6.49247C15.9318 6.70078 15.9092 6.92999 15.9532 7.15113C15.9972 7.37227 16.1057 7.5754 16.2652 7.73483C16.4246 7.89426 16.6277 8.00284 16.8489 8.04682C17.07 8.09081 17.2992 8.06823 17.5075 7.98195C17.7158 7.89567 17.8939 7.74955 18.0191 7.56208C18.1444 7.37461 18.2113 7.1542 18.2113 6.92873C18.2113 6.62638 18.0912 6.33642 17.8774 6.12263C17.6636 5.90883 17.3736 5.78873 17.0713 5.78873Z" fill="currentColor"/></svg>';
4
const svgLinkedin = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M19.65 3H4.35C3.99196 3 3.64858 3.14223 3.39541 3.39541C3.14223 3.64858 3 3.99196 3 4.35V19.65C3 20.008 3.14223 20.3514 3.39541 20.6046C3.64858 20.8578 3.99196 21 4.35 21H19.65C20.008 21 20.3514 20.8578 20.6046 20.6046C20.8578 20.3514 21 20.008 21 19.65V4.35C21 3.99196 20.8578 3.64858 20.6046 3.39541C20.3514 3.14223 20.008 3 19.65 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.625C6.74056 8.61616 6.4406 8.51632 6.18758 8.33797C5.93456 8.15962 5.7397 7.91066 5.62737 7.6222C5.51503 7.33374 5.49019 7.01857 5.55595 6.71607C5.6217 6.41358 5.77515 6.13716 5.9971 5.92138C6.21906 5.70559 6.49968 5.55999 6.80391 5.50278C7.10814 5.44556 7.42248 5.47927 7.70766 5.59969C7.99284 5.7201 8.23622 5.92189 8.40737 6.17983C8.57853 6.43778 8.66987 6.74044 8.67 7.05C8.66289 7.47331 8.4885 7.8766 8.18495 8.17173C7.88139 8.46685 7.47335 8.62982 7.05 8.625ZM18.3 18.3H15.6V14.034C15.6 12.756 15.06 12.297 14.358 12.297C14.1522 12.3107 13.9511 12.3649 13.7663 12.4566C13.5815 12.5482 13.4166 12.6755 13.2811 12.831C13.1457 12.9866 13.0422 13.1674 12.9768 13.363C12.9114 13.5586 12.8853 13.7652 12.9 13.971C12.8955 14.0129 12.8955 14.0551 12.9 14.097V18.3H10.2V10.2H12.81V11.37C13.0733 10.9695 13.435 10.6433 13.8605 10.4227C14.286 10.2021 14.761 10.0944 15.24 10.11C16.635 10.11 18.264 10.884 18.264 13.404L18.3 18.3Z" fill="currentColor"/></svg>';
5
const svgGoogle = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12.1369 2C14.8367 2.00011 17.0911 2.99128 18.8273 4.60938L15.9641 7.47266C14.9187 6.49094 13.6095 5.98155 12.1369 5.98145C9.5402 5.98145 7.33274 7.73178 6.53921 10.0908V10.0996C5.29869 13.8213 8.01593 18.0273 12.1369 18.0273C14.6114 18.0273 17.0288 16.6458 17.5207 14.0547H12.1389V10.1816H21.5568C21.675 10.8362 21.7385 11.5184 21.7385 12.2275C21.7384 15.2729 20.6479 17.8366 18.757 19.582H18.7551L18.4377 19.8604C16.8159 21.2168 14.6682 21.9999 12.1369 22C8.22787 22 4.85463 19.7547 3.20913 16.4912V16.4766C1.79482 13.6817 1.7946 10.3141 3.2101 7.51953L3.20913 7.51855C4.85458 4.24582 8.22777 2 12.1369 2Z" fill="currentColor"/></svg>';
6
const svgYoutube = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2043 4.00776C21.1084 4.28763 21.8189 5.10925 22.0609 6.15475C22.4982 8.04786 22.5 12 22.5 12C22.5 12 22.5 15.9522 22.0609 17.8453C21.8189 18.8908 21.1084 19.7124 20.2043 19.9922C18.5673 20.5 12 20.5 12 20.5C12 20.5 5.43274 20.5 3.79568 19.9922C2.89159 19.7124 2.1811 18.8908 1.93908 17.8453C1.5 15.9522 1.5 12 1.5 12C1.5 12 1.5 8.04786 1.93908 6.15475C2.1811 5.10925 2.89159 4.28763 3.79568 4.00776C5.43274 3.5 12 3.5 12 3.5C12 3.5 18.5673 3.5 20.2043 4.00776ZM15.5134 12.0003L9.79785 15.2999V8.70065L15.5134 12.0003Z" fill="currentColor"/></svg>';
7
const svgApple = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M15.0993 3.35783C14.3953 4.21083 13.2038 4.8472 12.256 4.8472C12.1477 4.8472 12.0394 4.83366 11.9717 4.82012C11.9581 4.76596 11.931 4.60348 11.931 4.44101C11.931 3.35783 12.4862 2.27466 13.0819 1.59768C13.8401 0.704062 15.1129 0.040619 16.1689 0C16.196 0.121857 16.2096 0.270793 16.2096 0.419729C16.2096 1.5029 15.7492 2.57253 15.0993 3.35783ZM15.844 5.07737C16.4397 5.07737 18.5925 5.13153 20.0007 7.16248C19.8788 7.25725 17.7395 8.46228 17.7395 11.1567C17.7395 14.2708 20.461 15.381 20.5423 15.4081C20.5287 15.4758 20.109 16.911 19.107 18.3868C18.2134 19.6731 17.2657 20.9729 15.844 20.9729C14.4088 20.9729 14.0432 20.1335 12.4049 20.1335C10.7937 20.1335 10.225 21 8.92523 21C7.61188 21 6.70473 19.795 5.66217 18.3327C4.44361 16.5996 3.46875 13.9188 3.46875 11.3733C3.46875 7.29787 6.12252 5.13153 8.73567 5.13153C10.1167 5.13153 11.2676 6.03868 12.1477 6.03868C12.9736 6.03868 14.2599 5.07737 15.844 5.07737Z" fill="currentColor"/></svg>';
8
const svgSnapchat = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M21.6295 16.8937C21.5458 16.6147 21.1413 16.4194 21.1413 16.4194C21.105 16.3971 21.0687 16.3803 21.0408 16.3663C20.3684 16.0427 19.7741 15.6521 19.2747 15.2085C18.873 14.8514 18.527 14.4608 18.2508 14.0423C17.9132 13.5345 17.7542 13.1076 17.6872 12.8788C17.6482 12.7282 17.6565 12.6696 17.6872 12.5915C17.7151 12.5273 17.7905 12.4631 17.8295 12.4353C18.0555 12.2762 18.421 12.039 18.6442 11.894C18.8367 11.7684 19.0041 11.6596 19.1018 11.5927C19.417 11.3722 19.6319 11.149 19.7602 10.9063C19.9248 10.5938 19.9443 10.2478 19.816 9.91028C19.643 9.45272 19.2161 9.1793 18.6749 9.1793C18.5549 9.1793 18.4294 9.19324 18.3066 9.21835C17.9969 9.28531 17.7012 9.39693 17.4557 9.49176C17.4389 9.50013 17.4194 9.4862 17.4194 9.46665C17.4445 8.85567 17.4752 8.03538 17.4082 7.25418C17.3468 6.54831 17.2017 5.95404 16.9646 5.43509C16.7247 4.91336 16.4178 4.52834 16.1722 4.25213C15.9407 3.98708 15.5362 3.59648 14.9223 3.24493C14.0602 2.7511 13.0781 2.5 12.004 2.5C10.9326 2.5 9.9533 2.7511 9.0884 3.24215C8.44113 3.61322 8.02542 4.03172 7.83571 4.24934C7.59296 4.52834 7.28327 4.91336 7.04332 5.43231C6.80617 5.95124 6.66109 6.54552 6.59971 7.25139C6.53275 8.03262 6.56065 8.78871 6.58855 9.46389C6.58855 9.48339 6.56902 9.49738 6.55228 9.48901C6.30676 9.39412 6.01102 9.2825 5.70133 9.21554C5.57856 9.18767 5.45581 9.1765 5.33304 9.1765C4.79178 9.1765 4.36491 9.44991 4.19193 9.90747C4.06359 10.2478 4.08312 10.591 4.24773 10.9035C4.37607 11.1462 4.5909 11.3695 4.90617 11.5899C5.00382 11.6568 5.17123 11.7656 5.36374 11.8912C5.58415 12.0335 5.93848 12.2622 6.16447 12.4241C6.19237 12.4436 6.28723 12.5162 6.31792 12.5915C6.3514 12.6724 6.35698 12.731 6.31513 12.89C6.24538 13.1216 6.08635 13.5429 5.75434 14.0423C5.47812 14.4608 5.13217 14.8514 4.7304 15.2085C4.2282 15.6521 3.63392 16.0427 2.96432 16.3663C2.93364 16.3803 2.89458 16.3998 2.85272 16.4249C2.81087 16.45 2.45096 16.6286 2.37563 16.8937C2.26403 17.2843 2.55977 17.6498 2.86667 17.8478C3.3633 18.1687 3.96873 18.3417 4.32027 18.4338C4.41792 18.4589 4.5072 18.484 4.58811 18.5091C4.63833 18.5258 4.76388 18.5732 4.81968 18.643C4.88664 18.7295 4.89502 18.8383 4.92012 18.9611C4.95919 19.1675 5.04568 19.4214 5.29957 19.5972C5.57856 19.7897 5.93569 19.8037 6.38488 19.8204C6.8564 19.8372 7.4423 19.8623 8.11188 20.0827C8.42158 20.1859 8.70337 20.3589 9.02981 20.5598C9.71056 20.9782 10.5587 21.5 12.0067 21.5C13.4548 21.5 14.3085 20.9755 14.9949 20.557C15.3185 20.3589 15.5975 20.1859 15.9016 20.0855C16.5712 19.865 17.1571 19.8427 17.6286 19.8232C18.0778 19.8064 18.4349 19.7925 18.714 19.6C18.9874 19.413 19.0655 19.1313 19.1018 18.9192C19.1213 18.816 19.1352 18.7212 19.1938 18.643C19.244 18.5761 19.3612 18.5314 19.417 18.5119C19.5007 18.4868 19.59 18.4617 19.6932 18.4338C20.0448 18.3389 20.4828 18.2301 21.0185 17.926C21.6518 17.5633 21.6965 17.1141 21.6295 16.8937Z" fill="currentColor"/></svg>';
9
const svgPinterest = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.47447 2 2 6.47784 2 12.0075C2 16.2449 4.62763 19.8663 8.35135 21.3238C8.26126 20.5274 8.18619 19.3253 8.38138 18.4538C8.56156 17.6724 9.55255 13.4801 9.55255 13.4801C9.55255 13.4801 9.25225 12.879 9.25225 11.9925C9.25225 10.595 10.0631 9.55823 11.0541 9.55823C11.9099 9.55823 12.3153 10.2044 12.3153 10.9707C12.3153 11.8272 11.7748 13.1195 11.4895 14.3065C11.2492 15.2983 11.985 16.1097 12.976 16.1097C14.7477 16.1097 16.1141 14.2314 16.1141 11.5267C16.1141 9.13749 14.3874 7.45455 11.9399 7.45455C9.1021 7.45455 7.42042 9.58828 7.42042 11.7971C7.42042 12.6536 7.75075 13.5853 8.17117 14.0811C8.24625 14.1863 8.26126 14.2615 8.24625 14.3666C8.17117 14.6822 8.00601 15.3584 7.97598 15.4936C7.93093 15.6739 7.82583 15.719 7.64565 15.6288C6.3994 15.0428 5.61862 13.2246 5.61862 11.7521C5.61862 8.59654 7.91592 5.69647 12.2252 5.69647C15.6937 5.69647 18.3814 8.17581 18.3814 11.4666C18.3814 14.9076 16.2042 17.6875 13.2012 17.6875C12.1952 17.6875 11.2342 17.1615 10.9039 16.5455C10.9039 16.5455 10.4084 18.4538 10.2883 18.9196C10.0631 19.7911 9.44745 20.873 9.04204 21.5492C9.97297 21.8347 10.964 22 12 22C17.5255 22 22 17.5222 22 11.9925C22 6.47784 17.5255 2 12 2Z" fill="currentColor"/></svg>';
10
const svgMedium = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6.76859 18.8203C10.507 18.8203 13.5374 15.7689 13.5374 12.005C13.5374 8.24114 10.5067 5.19 6.76859 5.19C3.03045 5.19 0 8.24022 0 12.005C0 15.7698 3.03022 18.8203 6.76859 18.8203Z" fill="currentColor"/><path d="M17.5785 18.4203C19.4475 18.4203 20.9629 15.5482 20.9629 12.005C20.9629 8.46271 19.4475 5.5897 17.5785 5.5897C15.7094 5.5897 14.1941 8.46271 14.1941 12.005C14.1941 15.5473 15.7094 18.4203 17.5785 18.4203Z" fill="currentColor"/><path d="M22.8097 17.7529C23.467 17.7529 24 15.1796 24 12.005C24 8.83068 23.4675 6.25715 22.8099 6.25715C22.1523 6.25715 21.6193 8.83137 21.6193 12.005C21.6193 15.1787 22.1523 17.7529 22.8097 17.7529Z" fill="currentColor"/></svg>';
11
const svgGithub = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 1.95068C17.525 1.95068 22 6.42568 22 11.9507C21.9995 14.0459 21.3419 16.0883 20.1198 17.7902C18.8977 19.4922 17.1727 20.768 15.1875 21.4382C14.6875 21.5382 14.5 21.2257 14.5 20.9632C14.5 20.6257 14.5125 19.5507 14.5125 18.2132C14.5125 17.2757 14.2 16.6757 13.8375 16.3632C16.0625 16.1132 18.4 15.2632 18.4 11.4257C18.4 10.3257 18.0125 9.43818 17.375 8.73818C17.475 8.48818 17.825 7.46318 17.275 6.08818C17.275 6.08818 16.4375 5.81318 14.525 7.11318C13.725 6.88818 12.875 6.77568 12.025 6.77568C11.175 6.77568 10.325 6.88818 9.525 7.11318C7.6125 5.82568 6.775 6.08818 6.775 6.08818C6.225 7.46318 6.575 8.48818 6.675 8.73818C6.0375 9.43818 5.65 10.3382 5.65 11.4257C5.65 15.2507 7.975 16.1132 10.2 16.3632C9.9125 16.6132 9.65 17.0507 9.5625 17.7007C8.9875 17.9632 7.55 18.3882 6.65 16.8757C6.4625 16.5757 5.9 15.8382 5.1125 15.8507C4.275 15.8632 4.775 16.3257 5.125 16.5132C5.55 16.7507 6.0375 17.6382 6.15 17.9257C6.35 18.4882 7 19.5632 9.5125 19.1007C9.5125 19.9382 9.525 20.7257 9.525 20.9632C9.525 21.2257 9.3375 21.5257 8.8375 21.4382C6.8458 20.7752 5.11342 19.502 3.88611 17.799C2.65881 16.096 1.9989 14.0498 2 11.9507C2 6.42568 6.475 1.95068 12 1.95068Z" fill="currentColor"/></svg>';
12
const svgThreads = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M17.2472 11.2472C17.2221 8.34254 15.6474 6.59222 12.9875 6.59222C11.2121 6.59222 9.71896 7.39522 8.93476 8.67504L10.6537 9.87328C11.0991 9.17065 11.7139 8.5872 12.8432 8.5872C14.1167 8.5872 14.7754 9.29611 14.9636 10.6136C14.3488 10.5195 13.734 10.4693 13.1004 10.4693C9.66248 10.4693 8.04391 12.0251 8.04391 14.0828C8.04391 16.1782 9.66248 17.4078 12.0464 17.4078C14.6625 17.4078 16.2246 15.6449 16.8645 13.4617C17.5295 13.7629 17.9875 14.4655 17.9875 15.5194C17.9875 18.3425 14.7315 19.8796 11.9711 19.8796C7.89963 19.8796 5.23965 17.207 5.23965 12.8595C5.23965 7.53326 8.75909 4.12046 13.4893 4.12046C16.6637 4.12046 18.2321 5.51319 19.2986 7.38269L21.0552 6.15307C19.8946 3.7315 17.3036 2 13.4141 2C7.21581 2 3 6.39774 3 12.7779C3 18.6123 7.12798 22 12.0464 22C16.1117 22 20.2208 19.6286 20.2208 15.5696C20.2208 13.4492 19.0038 12.0439 17.2472 11.2472ZM11.9711 15.2936C11.074 15.2936 10.2836 14.867 10.2836 14.0828C10.2836 12.8469 11.8018 12.4705 13.2886 12.4705C13.8532 12.4705 14.4053 12.5081 14.8946 12.6148C14.5433 14.2208 13.5019 15.2936 11.9711 15.2936Z" fill="currentColor"/></svg>';
13
const svgWhatsapp = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.149 2C14.7047 2.01525 17.1562 3.0175 18.9908 4.79688C20.8253 6.57631 21.9014 8.99572 21.9947 11.5498C22.0432 12.8574 21.8327 14.1621 21.3746 15.3877C20.9165 16.6131 20.2199 17.7355 19.3258 18.6904C18.4314 19.6455 17.3566 20.4146 16.1637 20.9522C14.9707 21.4897 13.6826 21.7859 12.3746 21.8232H12.0914C10.6045 21.8236 9.13595 21.4892 7.7955 20.8457L2.608 22H2.59335C2.58249 21.9999 2.57099 21.9977 2.56112 21.9932C2.55136 21.9886 2.5428 21.9818 2.53573 21.9736C2.52863 21.9655 2.52322 21.9557 2.5201 21.9453C2.51704 21.935 2.51576 21.9237 2.51717 21.9131L3.39413 16.668C2.56877 15.1578 2.15081 13.459 2.18124 11.7383C2.21173 10.0174 2.68946 8.33361 3.56796 6.85352C4.44639 5.37355 5.6951 4.14789 7.191 3.29688C8.68704 2.44588 10.379 1.99876 12.1002 2H12.149ZM8.55428 7.13281C8.46338 7.1437 8.37456 7.16865 8.29061 7.20606C8.17873 7.25595 8.07735 7.32747 7.99374 7.41699C7.75751 7.65925 7.09741 8.24251 7.05917 9.4668C7.02099 10.6905 7.87539 11.9014 7.99569 12.0723C8.11532 12.2421 9.63151 14.8874 12.1285 15.96C13.5961 16.5922 14.2397 16.7002 14.6568 16.7002C14.8286 16.7002 14.9587 16.6829 15.0943 16.6748C15.5519 16.6464 16.5839 16.1177 16.8092 15.543C17.0344 14.968 17.0492 14.4648 16.9898 14.3643C16.9305 14.2637 16.7673 14.1912 16.5221 14.0625C16.2761 13.9334 15.0734 13.2906 14.8473 13.2002C14.7636 13.1613 14.6736 13.1377 14.5816 13.1309C14.5216 13.134 14.4624 13.1518 14.4107 13.1826C14.3592 13.2134 14.316 13.2564 14.2848 13.3076C14.0838 13.5579 13.6222 14.1019 13.4674 14.2588C13.4336 14.2977 13.3919 14.3287 13.3453 14.3506C13.2986 14.3724 13.2475 14.3848 13.1959 14.3857C13.1009 14.3815 13.0077 14.3566 12.9234 14.3125C12.1946 14.003 11.5302 13.5589 10.9644 13.0049C10.4359 12.4839 9.98706 11.8878 9.63339 11.2354C9.49672 10.982 9.63372 10.851 9.75839 10.7324C9.88294 10.6138 10.0166 10.4503 10.1451 10.3086C10.2507 10.1875 10.339 10.0519 10.4068 9.90625C10.4418 9.83876 10.4588 9.76351 10.4576 9.6875C10.4564 9.6113 10.4363 9.5362 10.399 9.46973C10.3392 9.34129 9.89702 8.09811 9.68905 7.59864C9.52025 7.17157 9.31904 7.15662 9.14315 7.14356C8.99846 7.13351 8.83241 7.12905 8.66659 7.12403H8.6451L8.55428 7.13281Z" fill="currentColor"/></svg>';
14
const svgFigma = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.66146 2C6.82146 2 5.32812 3.49333 5.32812 5.33333C5.32812 7.16852 6.81365 8.65884 8.64701 8.66664C6.81366 8.67445 5.32815 10.1648 5.32815 11.9999C5.32815 13.8399 6.82148 15.3333 8.66148 15.3333H11.9948V12.0205C12.0059 13.851 13.4949 15.3333 15.3281 15.3333C17.1681 15.3333 18.6614 13.8399 18.6614 11.9999C18.6614 10.1646 17.1757 8.67424 15.3422 8.66664C17.1757 8.65904 18.6614 7.16864 18.6614 5.33333C18.6614 3.49333 17.1681 2 15.3281 2H8.66146ZM15.3076 8.66667H11.9948V11.9794C12.0058 10.1557 13.4838 8.67769 15.3076 8.66667Z" fill="currentColor"/><path d="M8.66148 22C10.5015 22 11.9948 20.5067 11.9948 18.6667V15.3333H8.66148C6.82148 15.3333 5.32815 16.8267 5.32815 18.6667C5.32815 20.5067 6.82148 22 8.66148 22Z" fill="currentColor"/></svg>';
15
const svgDribbble = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M2 12C2 10.1867 2.44668 8.51334 3.34 6.98C4.23334 5.44666 5.44668 4.23334 6.98 3.34C8.51334 2.44666 10.1867 2 12 2C13.8133 2 15.4867 2.44666 17.02 3.34C18.5533 4.23334 19.7667 5.44666 20.66 6.98C21.5533 8.51334 22 10.1867 22 12C22 13.8133 21.5533 15.4867 20.66 17.02C19.7667 18.5533 18.5533 19.7667 17.02 20.66C15.4867 21.5533 13.8133 22 12 22C10.1867 22 8.51334 21.5533 6.98 20.66C5.44668 19.7667 4.23334 18.5533 3.34 17.02C2.44668 15.4867 2 13.8133 2 12ZM3.66 12C3.66 14.08 4.36 15.9133 5.76 17.5C6.4 16.2467 7.41334 15.0533 8.8 13.92C10.1867 12.7867 11.54 12.0733 12.86 11.78C12.66 11.3133 12.4667 10.8933 12.28 10.52C9.98668 11.2533 7.50668 11.62 4.84 11.62C4.32 11.62 3.93334 11.6133 3.68 11.6C3.68 11.6533 3.67668 11.72 3.67 11.8C3.66334 11.88 3.66 11.9467 3.66 12ZM3.92 9.94C4.21334 9.96666 4.64668 9.98 5.22 9.98C7.44668 9.98 9.56 9.68 11.56 9.08C10.5467 7.28 9.43334 5.78 8.22 4.58C7.16668 5.11334 6.26334 5.85334 5.51 6.8C4.75668 7.74666 4.22668 8.79334 3.92 9.94ZM6.9 18.58C8.40668 19.7533 10.1067 20.34 12 20.34C12.9867 20.34 13.9667 20.1533 14.94 19.78C14.6733 17.5 14.1533 15.2933 13.38 13.16C12.1533 13.4267 10.9167 14.1 9.67 15.18C8.42334 16.26 7.5 17.3933 6.9 18.58ZM9.96 3.94C11.1333 5.15334 12.22 6.66666 13.22 8.48C15.0333 7.72 16.4 6.75334 17.32 5.58C15.7733 4.3 14 3.66 12 3.66C11.32 3.66 10.64 3.75334 9.96 3.94ZM13.94 9.9C14.14 10.3267 14.3667 10.8667 14.62 11.52C15.6067 11.4267 16.68 11.38 17.84 11.38C18.6667 11.38 19.4867 11.4 20.3 11.44C20.1933 9.62666 19.54 8.01334 18.34 6.6C17.4733 7.89334 16.0067 8.99334 13.94 9.9ZM15.12 12.92C15.8 14.8933 16.26 16.92 16.5 19C17.5533 18.32 18.4133 17.4467 19.08 16.38C19.7467 15.3133 20.1467 14.16 20.28 12.92C19.3067 12.8533 18.42 12.82 17.62 12.82C16.8867 12.82 16.0533 12.8533 15.12 12.92Z" fill="currentColor"/></svg>';
16
const svgReddit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.9604 3.48098C19.9604 4.85119 18.8496 5.96196 17.4794 5.96196C16.306 5.96196 15.3228 5.14734 15.0647 4.05278C13.6253 4.25048 12.5132 5.48823 12.5132 6.98103L12.513 6.99038C14.732 7.07274 16.7607 7.69779 18.3679 8.69226C18.9581 8.23899 19.6969 7.96954 20.4986 7.96954C22.4324 7.96954 24 9.53718 24 11.471C24 12.8655 23.1847 14.0697 22.0047 14.6328C21.895 18.7019 17.4625 21.9752 12.0107 21.9752C6.56347 21.9752 2.13389 18.7074 2.01697 14.643C0.825309 14.0844 0 12.8741 0 11.471C0 9.53718 1.56764 7.96954 3.50142 7.96954C4.30745 7.96954 5.04987 8.2419 5.64167 8.69961C7.23364 7.71151 9.2407 7.08636 11.4375 6.9932L11.4372 6.98241C11.4372 4.90089 13.0236 3.1822 15.0507 2.97221C15.2854 1.84604 16.2836 1 17.4794 1C18.8496 1 19.9604 2.11077 19.9604 3.48098ZM7.17128 15.4805C8.15284 15.4805 8.99557 15.0223 9.05388 13.7617V13.7631C9.11219 12.5025 8.36387 11.4501 7.38231 11.4501C6.40075 11.4501 5.55802 12.2748 5.49971 13.5354C5.4414 14.796 6.18972 15.4805 7.17128 15.4805ZM16.8446 15.4805C15.863 15.4805 15.0203 15.0223 14.962 13.7617V13.7631C14.9037 12.5025 15.652 11.4501 16.6335 11.4501C17.6151 11.4501 18.4578 12.2748 18.5161 13.5354C18.5744 14.796 17.8261 15.4805 16.8446 15.4805ZM12.0068 16.4607C10.7906 16.4607 9.6244 16.5204 8.54705 16.6301C8.36239 16.6481 8.24577 16.8397 8.31797 17.0105C8.9219 18.453 10.3463 19.4665 12.0068 19.4665C13.6673 19.4665 15.0931 18.453 15.6957 17.0105C15.7678 16.8397 15.6498 16.6481 15.4666 16.6301C14.3878 16.5204 13.223 16.4607 12.0068 16.4607Z" fill="currentColor"/></svg>';
17
const svgDiscord = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M19.6361 5.02282C18.1907 4.35757 16.6648 3.88563 15.0973 3.61903C14.8828 4.00449 14.6888 4.40107 14.5159 4.80712C12.8463 4.5542 11.1484 4.5542 9.47881 4.80712C9.30587 4.40111 9.1118 4.00453 8.8974 3.61903C7.32897 3.88788 5.80205 4.36095 4.35518 5.0263C1.48276 9.29853 0.70409 13.4647 1.09342 17.5716C2.77558 18.821 4.6584 19.7713 6.66003 20.3809C7.11074 19.7716 7.50956 19.1251 7.85226 18.4483C7.20135 18.204 6.57311 17.9024 5.9748 17.5473C6.13227 17.4325 6.28627 17.3142 6.43508 17.1994C8.17601 18.0224 10.0761 18.4491 12 18.4491C13.9238 18.4491 15.8239 18.0224 17.5648 17.1994C17.7154 17.3229 17.8694 17.4412 18.0251 17.5473C17.4257 17.903 16.7963 18.2051 16.1442 18.4501C16.4865 19.1265 16.8853 19.7724 17.3364 20.3809C19.3398 19.7737 21.224 18.8239 22.9065 17.5734C23.3633 12.8106 22.1261 8.68274 19.6361 5.02282ZM8.34541 15.0459C7.26047 15.0459 6.36414 14.0561 6.36414 12.8384C6.36414 11.6208 7.22932 10.6223 8.34195 10.6223C9.45458 10.6223 10.344 11.6208 10.325 12.8384C10.3059 14.0561 9.45112 15.0459 8.34541 15.0459ZM15.6545 15.0459C14.5678 15.0459 13.675 14.0561 13.675 12.8384C13.675 11.6208 14.5401 10.6223 15.6545 10.6223C16.7689 10.6223 17.6514 11.6208 17.6323 12.8384C17.6133 14.0561 16.7602 15.0459 15.6545 15.0459Z" fill="currentColor"/></svg>';
18
const svgTiktok = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M20.7153 10.2134C18.9357 10.2134 17.288 9.64796 15.9425 8.68698V15.6726C15.9425 19.1671 13.1082 22 9.61201 22C8.30752 22 7.09504 21.6058 6.08784 20.9298C4.39549 19.7941 3.28125 17.863 3.28125 15.6726C3.28125 12.1783 6.11561 9.34543 9.61211 9.3455C9.90268 9.34536 10.1929 9.36509 10.4807 9.40441V10.18L10.4806 12.904C10.2035 12.8161 9.90816 12.7684 9.60172 12.7684C8.00229 12.7684 6.70594 14.0643 6.70594 15.6627C6.70594 16.7928 7.35394 17.7714 8.29887 18.2481C8.69067 18.4456 9.13316 18.5569 9.60174 18.5569C11.1979 18.5569 12.492 17.2663 12.4975 15.6726V2H15.9425V2.44029C15.9546 2.57192 15.9721 2.70305 15.995 2.83332C16.234 4.19637 17.0495 5.36094 18.1813 6.06685C18.9413 6.54103 19.8196 6.79171 20.7154 6.79035L20.7153 10.2134Z" fill="currentColor"/></svg>';
19
const svgTumblr = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M17.6592 22H14.3188C11.3109 22 9.0691 20.4524 9.0691 16.7503V10.8215H6.33594V7.61109C9.34383 6.82988 10.6019 4.24148 10.7467 2H13.8701V7.09052H17.5141V10.8215H13.8701V15.9842C13.8701 17.5315 14.6513 18.0665 15.8946 18.0665H17.6592V22Z" fill="currentColor"/></svg>';
20
const svgTelegram = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M1.58098 10.6794C7.75614 7.99825 11.8729 6.23053 13.9312 5.37652C19.8152 2.93786 21.0363 2.51432 21.8338 2.50014C22.0092 2.49717 22.3997 2.54038 22.6545 2.74588C22.8663 2.91906 22.9259 3.15326 22.9557 3.31753C22.9822 3.4818 23.0186 3.85619 22.9889 4.14845C22.6712 7.48664 21.2912 15.5873 20.5896 19.3263C20.2951 20.9084 19.7093 21.4388 19.1434 21.4906C17.9123 21.6034 16.9791 20.6804 15.7877 19.9022C13.9246 18.6841 12.8723 17.926 11.0621 16.7376C8.97063 15.364 10.3274 14.609 11.5188 13.3753C11.8298 13.0524 17.2504 8.1391 17.353 7.69346C17.3663 7.63771 17.3796 7.4299 17.2538 7.32039C17.1314 7.21054 16.9492 7.24815 16.8169 7.27783C16.6282 7.32006 13.6532 9.28206 7.88175 13.1635C7.03788 13.7421 6.27345 14.0241 5.58511 14.0093C4.83059 13.9931 3.37459 13.5831 2.29245 13.2328C0.968726 12.803 -0.0869939 12.5757 0.00566664 11.8457C0.0519969 11.4657 0.57826 11.0768 1.58098 10.6794Z" fill="currentColor"/></svg>';
21
const svgBluesky = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12.0012 11.4535C11.0788 9.53897 8.5657 5.97133 6.22962 4.21155C4.54403 2.9421 1.8125 1.95953 1.8125 5.08555C1.8125 5.70961 2.1691 10.3302 2.37861 11.0803C3.10583 13.688 5.75648 14.3531 8.11421 13.9507C3.99288 14.6543 2.94472 16.985 5.20884 19.3157C9.50879 23.7423 11.3892 18.2051 11.8707 16.7863C11.9598 16.5243 12.0012 16.4027 12.0012 16.5103C12.0012 16.4027 12.0426 16.5243 12.1317 16.7863C12.6132 18.2051 14.4936 23.7423 18.7936 19.3157C21.0577 16.985 20.0095 14.6543 15.8882 13.9507C18.2459 14.3531 20.8966 13.688 21.6238 11.0803C21.8333 10.3302 22.1899 5.70961 22.1899 5.08555C22.1899 1.95953 19.4587 2.9421 17.7728 4.21155C15.4367 5.97133 12.9236 9.53897 12.0012 11.4535Z" fill="currentColor"/></svg>';
22
const svgVkontakte = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12.9824 19C5.46589 19 1.17864 13.7447 1 5H4.76515C4.88882 11.4184 7.66452 14.1371 9.86314 14.6977V5H13.4086V10.5355C15.5797 10.2973 17.8605 7.77477 18.63 5H22.1754C21.5845 8.41942 19.111 10.9419 17.3521 11.979C19.111 12.8198 21.9282 15.02 23 19H19.0973C18.2591 16.3373 16.1706 14.2773 13.4086 13.997V19H12.9824Z" fill="currentColor"/></svg>';
23
const svgSpotify = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12.0002 2C6.47735 2 2 6.47723 2 12.0001C2 17.5231 6.47735 22 12.0002 22C17.5236 22 22.0005 17.5231 22.0005 12.0001C22.0005 6.47759 17.5236 2.00048 12.0001 2.00048L12.0002 2ZM16.5862 16.423C16.4071 16.7167 16.0226 16.8099 15.7288 16.6295C13.3809 15.1954 10.4251 14.8706 6.94414 15.6659C6.60871 15.7423 6.27434 15.5321 6.19792 15.1966C6.12113 14.861 6.33047 14.5266 6.66674 14.4502C10.4761 13.5796 13.7436 13.9546 16.3796 15.5656C16.6734 15.7459 16.7665 16.1292 16.5862 16.423ZM17.8102 13.6997C17.5845 14.0669 17.1045 14.1827 16.7379 13.957C14.0498 12.3044 9.95233 11.826 6.7729 12.7911C6.36056 12.9156 5.92506 12.6832 5.79991 12.2716C5.67572 11.8593 5.90822 11.4246 6.31984 11.2992C9.95161 10.1973 14.4666 10.731 17.5535 12.6279C17.9201 12.8536 18.0359 13.3336 17.8102 13.6997ZM17.9153 10.8643C14.6923 8.94996 9.37472 8.77394 6.29751 9.70789C5.80337 9.85775 5.28081 9.5788 5.13106 9.08466C4.98132 8.59028 5.26003 8.06808 5.75453 7.91785C9.28695 6.84551 15.1592 7.05269 18.8699 9.25554C19.3153 9.51933 19.461 10.0934 19.1971 10.5372C18.9344 10.9817 18.3588 11.1282 17.9158 10.8643H17.9153Z" fill="currentColor"/></svg>';
24
const svgTwitch = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M13.5421 6.60715H12.0004V11.2143H13.5421V6.60715Z" fill="currentColor"/><path d="M17.3962 11.2143V6.60715H15.8546V11.2143H17.3962Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.60417 2L2.75 5.83929V19.6607H7.375V23.5L11.2292 19.6607H14.3125L21.25 12.75V2H6.60417ZM16.6269 15.0536L19.7103 11.9821V3.53571H7.37693V15.0536H10.4603V18.125L13.5436 15.0536H16.6269Z" fill="currentColor"/></svg>';
25
const svgMessenger = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.001 2.19904C17.634 2.19904 22.0019 6.32932 22.002 11.9022C22.002 17.4751 17.634 21.6029 12.001 21.6029C10.9884 21.6029 10.0183 21.4679 9.1057 21.2179C8.92818 21.1704 8.73815 21.1829 8.57064 21.2579L6.58546 22.1329C6.46556 22.1858 6.33449 22.2084 6.2038 22.1988C6.07312 22.1892 5.94678 22.1476 5.83592 22.0778C5.72507 22.0079 5.63308 21.9119 5.56802 21.7981C5.50297 21.6844 5.46684 21.5564 5.46284 21.4254L5.40783 19.6453C5.40283 19.4252 5.30281 19.2202 5.1403 19.0752C3.19511 17.3351 2 14.8149 2 11.8997C2 6.32683 6.36793 2.19904 12.001 2.19904ZM18.0091 9.66455C18.2891 9.21702 17.7391 8.712 17.319 9.03201L14.1637 11.4272C14.0599 11.506 13.9332 11.5489 13.8029 11.5494C13.6725 11.5498 13.5455 11.5078 13.4412 11.4297L11.1034 9.67705C10.9376 9.55253 10.7478 9.46375 10.5459 9.41629C10.3441 9.36883 10.1346 9.36371 9.93063 9.4013C9.7267 9.43889 9.53277 9.51835 9.36109 9.63467C9.18942 9.75098 9.04374 9.90162 8.93322 10.0771L5.99543 14.7374C5.71291 15.1849 6.26296 15.6875 6.683 15.3675L9.83831 12.9723C9.94213 12.8934 10.0688 12.8506 10.1992 12.8501C10.3296 12.8497 10.4565 12.8917 10.5609 12.9698L12.8986 14.7224C13.0644 14.8469 13.2543 14.9357 13.4561 14.9832C13.658 15.0306 13.8675 15.0357 14.0714 14.9982C14.2753 14.9606 14.4693 14.8811 14.6409 14.7648C14.8126 14.6485 14.9583 14.4979 15.0688 14.3224L18.0091 9.66455Z" fill="currentColor"/></svg>';
26
const svg = (paths) => `<svg viewBox="0 0 48 48" aria-hidden="true">${paths}</svg>`;
27
const G = {
28
  facebook: svgFacebook,
29
  x: svgX,
30
  instagram: svgInstagram,
31
  linkedin: svgLinkedin,
32
  google: svgGoogle,
33
  youtube: svgYoutube,
34
  apple: svgApple,
35
  snapchat: svgSnapchat,
36
  pinterest: svgPinterest,
37
  medium: svgMedium,
38
  github: svgGithub,
39
  threads: svgThreads,
40
  whatsapp: svgWhatsapp,
41
  figma: svgFigma,
42
  dribbble: svgDribbble,
43
  reddit: svgReddit,
44
  discord: svgDiscord,
45
  tiktok: svgTiktok,
46
  tumblr: svgTumblr,
47
  telegram: svgTelegram,
48
  bluesky: svgBluesky,
49
  vk: svgVkontakte,
50
  spotify: svgSpotify,
51
  twitch: svgTwitch,
52
  messenger: svgMessenger,
53
  signal: svg(`<path d="M18.2382 0.700643L18.7769 2.88262C16.6538 3.40733 14.6218 4.24863 12.7492 5.37825L11.5968 3.44857C13.6581 2.20031 15.8976 1.27368 18.2382 0.700643ZM29.7618 0.700643L29.2231 2.88262C31.3462 3.40733 33.3782 4.24863 35.2508 5.37825L36.4168 3.44857C34.3501 2.2014 32.1063 1.27489 29.7618 0.700643ZM3.44854 11.5901C2.20144 13.6543 1.27491 15.8959 0.700615 18.2383L2.88259 18.7769C3.4073 16.6539 4.2486 14.6219 5.37822 12.7492L3.44854 11.5901ZM2.24845 24C2.24829 22.909 2.33034 21.8194 2.49392 20.7407L0.271038 20.3998C-0.0903461 22.7841 -0.0903461 25.2092 0.271038 27.5935L2.49392 27.2593C2.3306 26.1806 2.24854 25.0911 2.24845 24ZM36.4032 44.5447L35.2508 42.6218C33.3811 43.7525 31.3512 44.5939 29.2299 45.1174L29.7686 47.2994C32.1063 46.7209 34.3432 45.7921 36.4032 44.5447ZM45.7515 24C45.7515 25.0911 45.6694 26.1806 45.5061 27.2593L47.729 27.5935C48.0903 25.2092 48.0903 22.7841 47.729 20.3998L45.5061 20.7407C45.6697 21.8194 45.7517 22.909 45.7515 24ZM47.2994 29.755L45.1174 29.2163C44.5939 31.3419 43.7526 33.3764 42.6218 35.2508L44.5515 36.41C45.7998 34.3439 46.7263 32.0999 47.2994 29.755ZM27.2593 45.5061C25.0988 45.8334 22.9012 45.8334 20.7407 45.5061L20.4066 47.729C22.7886 48.0904 25.2114 48.0904 27.5934 47.729L27.2593 45.5061ZM41.5103 36.9009C40.2143 38.6584 38.6603 40.2101 36.9009 41.5035L38.2374 43.3173C40.1753 41.8907 41.8897 40.1832 43.3241 38.251L41.5103 36.9009ZM36.9009 6.48969C38.6605 7.78559 40.2144 9.33955 41.5103 11.0991L43.3241 9.74901C41.8948 7.81512 40.1849 6.10527 38.251 4.67593L36.9009 6.48969ZM6.48966 11.0991C7.78556 9.33955 9.33952 7.78559 11.0991 6.48969L9.74899 4.67593C7.81509 6.10527 6.10524 7.81512 4.6759 9.74901L6.48966 11.0991ZM44.5515 11.5901L42.6218 12.7492C43.7524 14.6189 44.5938 16.6488 45.1174 18.7701L47.2994 18.2314C46.725 15.8913 45.7985 13.6519 44.5515 11.5901ZM20.7407 2.49395C22.9012 2.16662 25.0988 2.16662 27.2593 2.49395L27.5934 0.271067C25.2114 -0.0903557 22.7886 -0.0903557 20.4066 0.271067L20.7407 2.49395ZM7.64202 43.9174L2.99851 44.9947L4.08267 40.3512L1.89388 39.8398L0.809713 44.4833C0.741878 44.7712 0.731468 45.0696 0.779078 45.3616C0.826688 45.6535 0.931384 45.9332 1.08718 46.1846C1.24297 46.436 1.4468 46.6542 1.68702 46.8268C1.92723 46.9994 2.19911 47.1229 2.48711 47.1903C2.82391 47.2653 3.1731 47.2653 3.50991 47.1903L8.15342 46.1198L7.64202 43.9174ZM2.35755 37.8351L4.55316 38.3397L5.30321 35.1213C4.20789 33.2839 3.39208 31.2938 2.88259 29.2163L0.700615 29.755C1.19141 31.7436 1.93381 33.6615 2.90986 35.4622L2.35755 37.8351ZM12.8583 42.7036L9.63989 43.4537L10.1513 45.6493L12.5174 45.097C14.3168 46.076 16.235 46.8185 18.2246 47.3062L18.7633 45.1243C16.6922 44.6081 14.7092 43.7878 12.8788 42.69L12.8583 42.7036ZM24 4.49864C13.2265 4.50546 4.50543 13.2402 4.50543 24.0068C4.51136 27.674 5.54866 31.2656 7.49883 34.3712L5.62369 42.3763L13.622 40.5012C22.7385 46.2357 34.7803 43.5014 40.5148 34.3917C46.2493 25.2819 43.5218 13.2402 34.4121 7.49885C31.2934 5.53767 27.6841 4.49764 24 4.49864Z"/>`)
54
};
55
const ITEMS = [
56
  { name: "Facebook", href: "https://facebook.com", svg: G.facebook },
57
  { name: "X/Twitter", href: "https://x.com", svg: G.x },
58
  { name: "Instagram", href: "https://instagram.com", svg: G.instagram },
59
  { name: "LinkedIn", href: "https://linkedin.com", svg: G.linkedin },
60
  { name: "Google", href: "https://google.com", svg: G.google },
61
  { name: "YouTube", href: "https://youtube.com", svg: G.youtube },
62
  { name: "Apple", href: "https://apple.com", svg: G.apple },
63
  { name: "Snapchat", href: "https://snapchat.com", svg: G.snapchat },
64
  { name: "Pinterest", href: "https://pinterest.com", svg: G.pinterest },
65
  { name: "Medium", href: "https://medium.com", svg: G.medium },
66
  { name: "GitHub", href: "https://github.com", svg: G.github },
67
  { name: "Threads", href: "https://threads.net", svg: G.threads },
68
  { name: "WhatsApp", href: "https://whatsapp.com", svg: G.whatsapp },
69
  { name: "Figma", href: "https://figma.com", svg: G.figma },
70
  { name: "Dribbble", href: "https://dribbble.com", svg: G.dribbble },
71
  { name: "Reddit", href: "https://reddit.com", svg: G.reddit },
72
  { name: "Discord", href: "https://discord.com", svg: G.discord },
73
  { name: "TikTok", href: "https://tiktok.com", svg: G.tiktok },
74
  { name: "Tumblr", href: "https://tumblr.com", svg: G.tumblr },
75
  { name: "Telegram", href: "https://telegram.org", svg: G.telegram },
76
  { name: "Bluesky", href: "https://bsky.app", svg: G.bluesky },
77
  { name: "Signal", href: "https://signal.org", svg: G.signal },
78
  { name: "VK", href: "https://vk.com", svg: G.vk },
79
  { name: "Spotify", href: "https://open.spotify.com", svg: G.spotify },
80
  { name: "Twitch", href: "https://twitch.tv", svg: G.twitch },
81
  { name: "Messenger", href: "https://messenger.com", svg: G.messenger }
82
];
83
const DEG = Math.PI / 180;
84
const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
85
const mod = (i, n) => (i % n + n) % n;
86
const damp = (cur, target, lambda, dt) => cur + (target - cur) * (1 - Math.exp(-lambda * dt));
87
const N = ITEMS.length;
88
const SLICE = 360 / N;
89
const KNOB_R_FRAC = 0.55;
90
const TICK_R_FRAC = 0.72;
91
const EASES = {
92
  soft: { ease: "power3.out", dur: 0.5 },
93

94
  snappy: { ease: "back.out(1.7)", dur: 0.55 },
95

96
  elastic: { ease: "elastic.out(2, 0.6)", dur: 0.8 }
97

98
};
99
const CAP_SCALE = 0.5;
100
const GRIP_MAX = 14;
101
const SND_VOL = 0.05;
102
const SND_MIN_RATE = 0.8;
103
const SND_MAX_RATE = 1.6;
104
const SND_VEL_DIV = 600;
105
const SND_VEL_CLAMP = 1.5;
106
const SND_POOL = 8;
107
const DEFAULTS = {
108
  dampDrag: 15,
109

110
  dampIdle: 25,
111

112
  stepPx: 62,
113

114
  detent: "elastic"
115
};
116
const STYLE_ID = "exp-dial-style";
117
const CSS = `
118
.dial {
119
  position: absolute;
120
  inset: 0;
121
  overflow: hidden;
122
  font-family: var(--font-sans);
123
  --dial-accent: var(--ink);
124
  --dial-accent-ink: var(--paper);
125
  touch-action: none;
126
  -webkit-user-select: none;
127
  user-select: none;
128
  outline: none;
129
}
130

131
.dial__stage {
132
  position: absolute;
133
  inset: 0;
134
}
135

136
.dial__ticks {
137
  position: absolute;
138
  inset: 0;
139
  pointer-events: none;
140
}
141

142
.dial__ticks-rotor {
143
  position: absolute;
144
  left: 0;
145
  top: 0;
146
  width: 0;
147
  height: 0;
148
}
149

150
.dial__tick {
151
  position: absolute;
152
  left: 0;
153
  top: 0;
154
  height: 1px;
155
  border-radius: 1px;
156
  background: var(--ink);
157
  transform-origin: 0 50%;
158
  opacity: .2;
159
}
160

161
.dial__tick--major {
162
  height: 1.5px;
163
  opacity: .42;
164
}
165

166
.dial__item {
167
  position: absolute;
168
  left: 0;
169
  top: 0;
170
  display: flex;
171
  align-items: center;
172
  gap: .7rem;
173
  transform-origin: 0 50%;
174
  white-space: nowrap;
175
  text-decoration: none;
176
  color: var(--ink-muted);
177
  will-change: transform;
178
  transition: color .3s var(--ease-out-quad);
179
}
180

181
.dial__ic {
182
  flex: none;
183
  display: grid;
184
  place-items: center;
185
  width: 1.9rem;
186
  height: 1.9rem;
187
  transition: transform .35s var(--ease-out-expo);
188
}
189

190
.dial__ic svg {
191
  width: 100%;
192
  height: 100%;
193
  fill: currentColor;
194
}
195

196
.dial__label {
197
  font-size: 1.05rem;
198
  letter-spacing: var(--track);
199
  line-height: 1;
200
  transition: font-weight .2s,letter-spacing .3s var(--ease-out-quad);
201
}
202

203
.dial__item.is-active {
204
  color: var(--ink);
205
}
206

207
.dial__item.is-active .dial__label {
208
  font-weight: 600;
209
}
210

211
.dial__item.is-active .dial__ic {
212
  transform: scale(1.08);
213
}
214

215
.dial__cover {
216
  position: absolute;
217
  inset: 0;
218
  pointer-events: none;
219
  --dial-clear: rgb(from var(--surface) r g b / 0);
220
  background: conic-gradient(from 0deg at var(--dial-cx,40%) var(--dial-cy,50%), var(--surface) 0deg 12deg, var(--dial-clear) 38deg 142deg, var(--surface) 168deg 360deg);
221
}
222

223
.dial__index {
224
  position: absolute;
225
  top: 50%;
226
  height: 1.5px;
227
  background: var(--ink);
228
  opacity: .85;
229
  transform: translateY(-.75px);
230
  pointer-events: none;
231
}
232

233
.dial__knob {
234
  position: absolute;
235
  top: 50%;
236
  display: grid;
237
  place-items: center;
238
  border-radius: 50%;
239
  background: var(--dial-accent);
240
  color: var(--dial-accent-ink);
241
  cursor: grab;
242
  border: 0;
243
  padding: 0;
244
  box-shadow: 0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35);
245
  transform: translate(-50%,-50%);
246
  transition: box-shadow .3s var(--ease-out-quad);
247
}
248

249
.dial.is-dragging .dial__knob {
250
  cursor: grabbing;
251
  box-shadow: 0 2px 4px rgba(0,0,0,.16),0 14px 34px -12px rgba(0,0,0,.42);
252
}
253

254
.dial__grip {
255
  width: 46%;
256
  height: 2px;
257
  border-radius: 2px;
258
  background: currentColor;
259
  opacity: .92;
260
  transform-origin: 50% 50%;
261
}
262

263
.dial__item:focus-visible {
264
  outline: 2px solid var(--ink);
265
  outline-offset: 4px;
266
  border-radius: .4rem;
267
}
268

269
@media (prefers-reduced-motion: reduce) {
270
  .dial__item,.dial__ic,.dial__label {
271
    transition: none;
272
  }
273
}
274
`;
275
function injectStyle() {
276
  if (document.getElementById(STYLE_ID)) return;
277
  const el = document.createElement("style");
278
  el.id = STYLE_ID;
279
  el.textContent = CSS;
280
  document.head.appendChild(el);
281
}
282
const experiment = {
283
  mount(root) {
284
    injectStyle();
285
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
286
    const P = { ...DEFAULTS };
287
    const dial = document.createElement("div");
288
    dial.className = "dial";
289
    dial.tabIndex = 0;
290
    dial.setAttribute("role", "listbox");
291
    dial.setAttribute("aria-label", "Social channels dial");
292
    const stage = document.createElement("div");
293
    stage.className = "dial__stage";
294
    const index = document.createElement("div");
295
    index.className = "dial__index";
296
    const ticksLayer = document.createElement("div");
297
    ticksLayer.className = "dial__ticks";
298
    const ticksRotor = document.createElement("div");
299
    ticksRotor.className = "dial__ticks-rotor";
300
    ticksLayer.appendChild(ticksRotor);
301
    const cover = document.createElement("div");
302
    cover.className = "dial__cover";
303
    const knob = document.createElement("button");
304
    knob.type = "button";
305
    knob.className = "dial__knob";
306
    knob.setAttribute("aria-hidden", "true");
307
    knob.tabIndex = -1;
308
    const grip = document.createElement("span");
309
    grip.className = "dial__grip";
310
    knob.appendChild(grip);
311
    const els = ITEMS.map((item, i) => {
312
      const a = document.createElement("a");
313
      a.className = "dial__item";
314
      a.href = item.href;
315
      a.target = "_blank";
316
      a.rel = "noreferrer";
317
      a.dataset.i = String(i);
318
      a.setAttribute("role", "option");
319
      a.innerHTML = `<span class="dial__ic">${item.svg}</span><span class="dial__label">${item.name}</span>`;
320
      stage.appendChild(a);
321
      return a;
322
    });
323
    stage.append(ticksLayer, cover, index, knob);
324
    dial.appendChild(stage);
325
    root.appendChild(dial);
326
    const pool = reduced ? [] : Array.from({ length: SND_POOL }, () => {
327
      const a = new Audio("https://carterogunsola.com/lab/dial-tick.mp3");
328
      a.preload = "auto";
329
      a.volume = SND_VOL;
330
      return a;
331
    });
332
    const playClick = (velDeg) => {
333
      if (!pool.length) return;
334
      const norm = Math.min(velDeg / SND_VEL_DIV, SND_VEL_CLAMP);
335
      const rate = clamp(SND_MIN_RATE + norm * (SND_MAX_RATE - SND_MIN_RATE), SND_MIN_RATE, SND_MAX_RATE);
336
      const a = pool.find((s) => s.paused || s.ended) ?? pool[0];
337
      a.playbackRate = rate;
338
      try {
339
        a.currentTime = 0;
340
        a.play().catch(() => {
341
        });
342
      } catch {
343
      }
344
    };
345
    let cx = 0;
346
    let cy = 0;
347
    let R = 320;
348
    let knobR = 115;
349
    let knobPx = 54;
350
    const measure = () => {
351
      const w = stage.clientWidth;
352
      const h = stage.clientHeight;
353
      cy = h / 2;
354
      R = clamp(Math.min(h * 0.38, 340), 230, 340);
355
      const vertexX = clamp(w * 0.57, R + 40, w - 40);
356
      cx = vertexX - R;
357
      knobR = R * KNOB_R_FRAC;
358
      knobPx = clamp(R * 0.15, 44, 60);
359
      const knobCx = cx + knobR;
360
      knob.style.left = `${knobCx}px`;
361
      knob.style.width = knob.style.height = `${knobPx}px`;
362
      index.style.left = `${cx + R * TICK_R_FRAC - 6}px`;
363
      index.style.width = `28px`;
364
      ticksRotor.style.left = `${cx}px`;
365
      ticksRotor.style.top = `${cy}px`;
366
      dial.style.setProperty("--dial-cx", `${cx}px`);
367
      dial.style.setProperty("--dial-cy", `${cy}px`);
368
      buildTicks();
369
    };
370
    const buildTicks = () => {
371
      const tickR = R * TICK_R_FRAC;
372
      const per = 5;
373
      const count = N * per;
374
      const frag = document.createDocumentFragment();
375
      for (let k = 0; k < count; k++) {
376
        const major = k % per === 0;
377
        const t = document.createElement("span");
378
        t.className = `dial__tick${major ? " dial__tick--major" : ""}`;
379
        t.style.width = `${major ? 18 : 8}px`;
380
        t.style.transform = `rotate(${k * (360 / count)}deg) translateX(${tickR}px)`;
381
        frag.appendChild(t);
382
      }
383
      ticksRotor.replaceChildren(frag);
384
    };
385
    let target = 0;
386
    let cur = 0;
387
    let prevCur = 0;
388
    let gripDeg = 0;
389
    let gripTarget = 0;
390
    let activeIdx = -1;
391
    let dirty = true;
392
    const render = () => {
393
      for (let i = 0; i < N; i++) {
394
        let rel = mod(i - cur, N);
395
        if (rel > N / 2) rel -= N;
396
        const a = rel * SLICE;
397
        const rad = a * DEG;
398
        const x = cx + R * Math.cos(rad);
399
        const y = cy + R * Math.sin(rad);
400
        els[i].style.transform = `translate(${x}px, ${y}px) translateY(-50%) rotate(${a}deg)`;
401
      }
402
      ticksRotor.style.transform = `rotate(${-cur * SLICE}deg)`;
403
      grip.style.transform = `rotate(${gripDeg}deg)`;
404
      const idx = mod(Math.round(cur), N);
405
      if (idx !== activeIdx) {
406
        const prev = activeIdx;
407
        els[activeIdx]?.classList.remove("is-active");
408
        els[activeIdx]?.setAttribute("aria-selected", "false");
409
        activeIdx = idx;
410
        els[idx].classList.add("is-active");
411
        els[idx].setAttribute("aria-selected", "true");
412
        if (prev !== -1) playClick(Math.abs(cur - prevCur) * SLICE * 60);
413
      }
414
    };
415
    let dragging = false;
416
    const tick = (_t, dtMs) => {
417
      const dt = Math.min(dtMs, 64) / 1e3 || 0.016;
418
      prevCur = cur;
419
      if (reduced) {
420
        if (cur !== target) {
421
          cur = target;
422
          dirty = true;
423
        }
424
      } else {
425
        const next = damp(cur, target, dragging ? P.dampDrag : P.dampIdle, dt);
426
        if (Math.abs(next - cur) > 5e-5) {
427
          cur = next;
428
          dirty = true;
429
        } else if (cur !== target) {
430
          cur = target;
431
          dirty = true;
432
        }
433
      }
434
      const g = reduced ? gripTarget : damp(gripDeg, gripTarget, 12, dt);
435
      if (Math.abs(g - gripDeg) > 0.01) {
436
        gripDeg = g;
437
        dirty = true;
438
      }
439
      if (!dirty) return;
440
      dirty = false;
441
      render();
442
    };
443
    const ac = new AbortController();
444
    const { signal } = ac;
445
    let moved = false;
446
    let pressY = 0;
447
    let pressTarget = 0;
448
    let snap = null;
449
    let wheelIdle = null;
450
    const settleTo = (to) => {
451
      snap?.kill();
452
      to = Math.round(to);
453
      gripTarget = 0;
454
      if (reduced) {
455
        target = to;
456
        dirty = true;
457
        return;
458
      }
459
      const from = target;
460
      const { ease, dur } = EASES[P.detent];
461
      snap = gsap.to(
462
        { p: 0 },
463
        {
464
          p: 1,
465
          duration: dur,
466
          ease,
467
          onUpdate() {
468
            const p = this.targets()[0].p;
469
            target = from + (to - from) * p;
470
            dirty = true;
471
          },
472
          onComplete: () => snap = null
473
        }
474
      );
475
    };
476
    const startDrag = (e) => {
477
      if (e.button != null && e.button !== 0) return;
478
      snap?.kill();
479
      snap = null;
480
      dragging = true;
481
      moved = false;
482
      pressY = e.clientY;
483
      pressTarget = target;
484
      dial.classList.add("is-dragging");
485
      e.currentTarget.setPointerCapture?.(e.pointerId);
486
    };
487
    knob.addEventListener("pointerdown", startDrag, { signal });
488
    stage.addEventListener("pointerdown", startDrag, { signal });
489
    window.addEventListener(
490
      "pointermove",
491
      (e) => {
492
        if (!dragging) return;
493
        const dy = e.clientY - pressY;
494
        if (!moved && Math.abs(dy) > 4) moved = true;
495
        target = pressTarget - dy / P.stepPx;
496
        gripTarget = clamp((target - pressTarget) * SLICE * CAP_SCALE, -GRIP_MAX, GRIP_MAX);
497
        dirty = true;
498
      },
499
      { signal }
500
    );
501
    const endDrag = () => {
502
      if (!dragging) return;
503
      dragging = false;
504
      dial.classList.remove("is-dragging");
505
      settleTo(target);
506
    };
507
    window.addEventListener("pointerup", endDrag, { signal });
508
    window.addEventListener("pointercancel", endDrag, { signal });
509
    stage.addEventListener(
510
      "wheel",
511
      (e) => {
512
        e.preventDefault();
513
        snap?.kill();
514
        snap = null;
515
        target += e.deltaY / (P.stepPx * 3);
516
        gripTarget = clamp(e.deltaY * 0.2, -GRIP_MAX, GRIP_MAX);
517
        dirty = true;
518
        if (wheelIdle) clearTimeout(wheelIdle);
519
        wheelIdle = setTimeout(() => settleTo(target), 150);
520
      },
521
      { passive: false, signal }
522
    );
523
    dial.addEventListener(
524
      "keydown",
525
      (e) => {
526
        if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
527
          e.preventDefault();
528
          settleTo(Math.round(cur) - 1);
529
        } else if (e.key === "ArrowDown" || e.key === "ArrowRight") {
530
          e.preventDefault();
531
          settleTo(Math.round(cur) + 1);
532
        }
533
      },
534
      { signal }
535
    );
536
    els.forEach((el, i) => {
537
      el.addEventListener(
538
        "click",
539
        (e) => {
540
          if (moved) {
541
            e.preventDefault();
542
            return;
543
          }
544
          if (i !== activeIdx) {
545
            e.preventDefault();
546
            let d = mod(i - Math.round(target), N);
547
            if (d > N / 2) d -= N;
548
            settleTo(Math.round(target) + d);
549
          }
550
        },
551
        { signal }
552
      );
553
      el.addEventListener("dragstart", (e) => e.preventDefault(), { signal });
554
    });
555
    measure();
556
    render();
557
    const ro = new ResizeObserver(() => {
558
      measure();
559
      dirty = true;
560
    });
561
    ro.observe(stage);
562
    gsap.ticker.add(tick);
563
    if (!reduced) {
564
      gsap.fromTo(dial, { opacity: 0 }, { opacity: 1, duration: 0.6, ease: "power2.out" });
565
      gsap.from(knob, { scale: 0.4, rotate: -160, duration: 1, ease: "expo.out", delay: 0.05 });
566
      const wind = { p: 1 };
567
      gsap.to(wind, {
568
        p: 0,
569
        duration: 1.4,
570
        ease: "expo.out",
571
        delay: 0.1,
572
        onUpdate: () => {
573
          cur = wind.p * -2.5;
574
          dirty = true;
575
        }
576
      });
577
    }
578
    const set = (key, value) => {
579
      if (key === "accent") {
580
        dial.style.setProperty("--dial-accent", String(value));
581
      } else if (key === "detent") {
582
        P.detent = String(value);
583
      } else if (key in P) {
584
        P[key] = Number(value);
585
      }
586
    };
587
    const destroy = () => {
588
      ac.abort();
589
      ro.disconnect();
590
      gsap.ticker.remove(tick);
591
      snap?.kill();
592
      gsap.killTweensOf([knob, dial]);
593
      if (wheelIdle) clearTimeout(wheelIdle);
594
      pool.forEach((a) => {
595
        a.pause();
596
        a.src = "";
597
      });
598
      dial.remove();
599
    };
600
    return { destroy, set };
601
  }
602
};
603
experiment.mount(document.querySelector(".stage"));

Dial

InteractionNew

Experiment coming soonLoading experiment

Dial — Lab experiment