@coyalabs/bts-style 1.0.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,159 @@
1
+ <script>
2
+ import { onMount } from 'svelte';
3
+
4
+ /**
5
+ * The text content to animate
6
+ * @type {string}
7
+ */
8
+ export let text = '';
9
+
10
+ /**
11
+ * Delay between each word appearing (ms)
12
+ * @type {number}
13
+ */
14
+ export let wordDelay = 50;
15
+
16
+ /**
17
+ * Initial delay before animation starts (ms)
18
+ * @type {number}
19
+ */
20
+ export let startDelay = 0;
21
+
22
+ /**
23
+ * Animation duration for each word (ms)
24
+ * @type {number}
25
+ */
26
+ export let animationDuration = 300;
27
+
28
+ /**
29
+ * Text variant styling
30
+ * @type {'title' | 'content' | 'button'}
31
+ */
32
+ export let variant = 'content';
33
+
34
+ /**
35
+ * Font size modifier
36
+ * @type {string}
37
+ */
38
+ export let textModifier = '0px';
39
+
40
+ /**
41
+ * Whether to start animation automatically on mount
42
+ * @type {boolean}
43
+ */
44
+ export let autoPlay = true;
45
+
46
+ /**
47
+ * @type {string[]}
48
+ */
49
+ let words = [];
50
+
51
+ /**
52
+ * @type {number}
53
+ */
54
+ let visibleCount = 0;
55
+
56
+ /**
57
+ * @type {boolean}
58
+ */
59
+ let animationComplete = false;
60
+
61
+ $: words = text.split(/(\s+)/).filter(w => w.length > 0);
62
+
63
+ /**
64
+ * Start the word-by-word animation
65
+ */
66
+ export function play() {
67
+ visibleCount = 0;
68
+ animationComplete = false;
69
+ animateWords();
70
+ }
71
+
72
+ /**
73
+ * Reset animation to beginning
74
+ */
75
+ export function reset() {
76
+ visibleCount = 0;
77
+ animationComplete = false;
78
+ }
79
+
80
+ /**
81
+ * Show all words immediately
82
+ */
83
+ export function showAll() {
84
+ visibleCount = words.length;
85
+ animationComplete = true;
86
+ }
87
+
88
+ function animateWords() {
89
+ if (visibleCount < words.length) {
90
+ visibleCount++;
91
+ setTimeout(animateWords, wordDelay);
92
+ } else {
93
+ animationComplete = true;
94
+ }
95
+ }
96
+
97
+ onMount(() => {
98
+ if (autoPlay) {
99
+ setTimeout(play, startDelay);
100
+ }
101
+ });
102
+ </script>
103
+
104
+ <span class="special-paragraph" data-variant={variant} style="--text-modifier: {textModifier}; --animation-duration: {animationDuration}ms;">
105
+ {#each words as word, i}
106
+ <span
107
+ class="word"
108
+ class:visible={i < visibleCount}
109
+ class:space={/^\s+$/.test(word)}
110
+ >{word}</span>
111
+ {/each}
112
+ </span>
113
+
114
+ <style>
115
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
116
+ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
117
+ .special-paragraph {
118
+ display: inline;
119
+ }
120
+ .word {
121
+ display: inline-block;
122
+ opacity: 0;
123
+ transform: translateY(8px);
124
+ filter: blur(4px);
125
+ transition:
126
+ opacity var(--animation-duration) ease,
127
+ transform var(--animation-duration) ease,
128
+ filter var(--animation-duration) ease;
129
+ }
130
+ .word.visible {
131
+ opacity: 1;
132
+ transform: translateY(0);
133
+ filter: blur(0);
134
+ }
135
+ .word.space {
136
+ white-space: pre;
137
+ }
138
+ /* Title variant */
139
+ .special-paragraph[data-variant='title'] {
140
+ font-family: 'Noto Serif KR', serif;
141
+ font-weight: 900;
142
+ font-size: calc(30px + var(--text-modifier));
143
+ color: #E3D8D8;
144
+ }
145
+ /* Content variant */
146
+ .special-paragraph[data-variant='content'] {
147
+ font-family: 'Satoshi', sans-serif;
148
+ font-weight: 700;
149
+ font-size: calc(18px + var(--text-modifier));
150
+ color: #777073;
151
+ }
152
+ /* Button variant */
153
+ .special-paragraph[data-variant='button'] {
154
+ font-family: 'Noto Serif KR', serif;
155
+ font-weight: 900;
156
+ font-size: calc(17px + var(--text-modifier));
157
+ color: #E3D8D8;
158
+ }
159
+ </style>
@@ -0,0 +1,52 @@
1
+ export default SpecialParagraph;
2
+ type SpecialParagraph = SvelteComponent<{
3
+ text?: string | undefined;
4
+ variant?: "button" | "title" | "content" | undefined;
5
+ textModifier?: string | undefined;
6
+ play?: (() => void) | undefined;
7
+ reset?: (() => void) | undefined;
8
+ wordDelay?: number | undefined;
9
+ startDelay?: number | undefined;
10
+ animationDuration?: number | undefined;
11
+ autoPlay?: boolean | undefined;
12
+ showAll?: (() => void) | undefined;
13
+ }, {
14
+ [evt: string]: CustomEvent<any>;
15
+ }, {}> & {
16
+ $$bindings?: string | undefined;
17
+ } & {
18
+ play: () => void;
19
+ reset: () => void;
20
+ showAll: () => void;
21
+ };
22
+ declare const SpecialParagraph: $$__sveltets_2_IsomorphicComponent<{
23
+ text?: string | undefined;
24
+ variant?: "button" | "title" | "content" | undefined;
25
+ textModifier?: string | undefined;
26
+ play?: (() => void) | undefined;
27
+ reset?: (() => void) | undefined;
28
+ wordDelay?: number | undefined;
29
+ startDelay?: number | undefined;
30
+ animationDuration?: number | undefined;
31
+ autoPlay?: boolean | undefined;
32
+ showAll?: (() => void) | undefined;
33
+ }, {
34
+ [evt: string]: CustomEvent<any>;
35
+ }, {}, {
36
+ play: () => void;
37
+ reset: () => void;
38
+ showAll: () => void;
39
+ }, string>;
40
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
41
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
42
+ $$bindings?: Bindings;
43
+ } & Exports;
44
+ (internal: unknown, props: Props & {
45
+ $$events?: Events;
46
+ $$slots?: Slots;
47
+ }): Exports & {
48
+ $set?: any;
49
+ $on?: any;
50
+ };
51
+ z_$$bindings?: Bindings;
52
+ }
@@ -94,7 +94,7 @@
94
94
  min-width: 150px;
95
95
  max-width: 500px;
96
96
  white-space: normal;
97
- z-index: 1000;
97
+ z-index: 10000;
98
98
  pointer-events: none;
99
99
  animation: fadeIn 0.2s ease;
100
100
  }
@@ -0,0 +1,2 @@
1
+ export const gearSVGDark: "<svg width=\"220\" height=\"215\" viewBox=\"0 0 220 215\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_2265_239)\"><path d=\"M118.931 35.6283C119.659 34.1799 121.114 33.4554 122.901 33.7185C124.554 33.982 125.745 35.233 125.943 36.9449L127.135 44.9114C130.376 45.8332 133.617 46.9532 136.793 48.3358L142.748 43.1339C144.004 41.8171 145.592 41.6854 147.246 42.5414C148.701 43.3316 149.297 44.9115 148.966 46.689L147.312 54.5248C150.024 56.4339 152.737 58.6722 155.184 60.9768L162.594 58.0142C164.248 57.2897 165.77 57.6851 167.027 59.1993C168.152 60.3845 168.282 62.0966 167.357 63.4792L163.057 70.3264C165.042 73.0918 166.63 76.0544 168.152 79.2149L176.222 78.8859C177.942 78.8201 179.397 79.742 179.993 81.3878C180.521 83.0336 179.993 84.5478 178.603 85.5356L172.319 90.6053C173.179 93.8318 173.841 97.1234 174.105 100.679L181.779 103.116C183.433 103.708 184.491 104.959 184.491 106.671C184.491 108.448 183.433 109.7 181.779 110.292L174.105 112.662C173.841 116.218 173.179 119.641 172.319 122.802L178.603 127.806C179.993 128.859 180.521 130.439 179.993 132.086C179.397 133.732 177.942 134.653 176.222 134.587L168.152 134.192C166.63 137.352 165.042 140.315 163.057 143.081L167.357 149.928C168.282 151.376 168.152 153.088 167.027 154.274C165.77 155.788 164.248 156.117 162.594 155.459L155.184 152.365C152.737 154.801 150.024 156.973 147.312 158.882L148.966 166.783C149.297 168.495 148.701 170.076 147.246 170.865C145.592 171.787 144.004 171.524 142.748 170.339L136.793 165.005C133.617 166.388 130.376 167.64 127.135 168.496L125.943 176.462C125.745 178.24 124.554 179.425 122.901 179.755C121.114 180.017 119.659 179.227 118.931 177.779L115.094 170.536C113.308 170.668 111.72 170.865 110 170.865C108.214 170.865 106.56 170.668 104.773 170.536L101.003 177.779C100.275 179.227 98.8202 180.018 96.9675 179.755C95.3133 179.425 94.1894 178.24 93.9246 176.462L92.7999 168.496C89.4922 167.64 86.2508 166.388 83.0751 165.005L77.187 170.339C75.9298 171.524 74.3418 171.787 72.6881 170.865C71.2328 170.076 70.6378 168.495 70.9685 166.783L72.6217 158.882C69.8435 156.973 67.131 154.801 64.683 152.365L57.3399 155.459C55.686 156.117 54.0986 155.788 52.8418 154.274C51.7172 153.088 51.5848 151.376 52.5772 149.928L56.8107 143.081C54.8923 140.315 53.3048 137.352 51.7834 134.192L43.6457 134.587C41.9261 134.653 40.4707 133.732 39.9414 132.086C39.4121 130.439 39.8752 128.859 41.2644 127.806L47.6154 122.802C46.7554 119.641 46.028 116.218 45.8296 112.728L38.1547 110.292C36.4347 109.7 35.5088 108.448 35.5088 106.671C35.5088 104.892 36.4349 103.642 38.1547 103.116L45.8296 100.679C46.028 97.1234 46.7553 93.8318 47.6154 90.6053L41.2644 85.5356C39.8752 84.5478 39.4122 83.0336 39.9414 81.3878C40.4706 79.742 41.926 78.8201 43.6457 78.8859L51.7834 79.2149C53.3048 76.0544 54.8925 73.0918 56.877 70.3264L52.5109 63.4127C51.6509 62.096 51.7836 60.3844 52.8418 59.1993C54.0986 57.6852 55.686 57.2898 57.3399 58.0142L64.683 60.9768C67.131 58.6723 69.8435 56.4339 72.6217 54.5248L70.9685 46.689C70.6378 44.9116 71.233 43.3316 72.6881 42.5414C74.2757 41.6854 75.8637 41.817 77.187 43.1339L83.1407 48.3358C86.2501 46.9532 89.4922 45.8332 92.7999 44.8457L93.9246 36.9449C94.1894 35.2331 95.3133 33.982 96.9675 33.7185C98.8202 33.4554 100.275 34.1799 101.003 35.6283L104.773 42.8708C106.626 42.7392 108.214 42.6071 110 42.6071C111.72 42.6071 113.308 42.7392 115.094 42.8708L118.931 35.6283ZM110.386 64.2705C86.9378 64.2705 67.9298 83.1109 67.9298 106.352C67.9299 129.594 86.9378 148.434 110.386 148.434C133.834 148.434 152.842 129.594 152.842 106.352C152.842 83.1109 133.834 64.2705 110.386 64.2705Z\" fill=\"#130F15\"/><path d=\"M110 201.849C112.54 201.849 114.885 201.559 117.522 201.365L123.188 212.021C124.263 214.151 126.412 215.314 129.05 214.927C131.492 214.441 133.251 212.699 133.544 210.083L135.302 198.362C140.089 197.103 144.876 195.263 149.565 193.228L158.358 201.074C160.213 202.818 162.558 203.206 165 201.849C167.15 200.687 168.028 198.362 167.54 195.844L165.098 184.22C169.103 181.41 173.108 178.214 176.723 174.631L187.665 179.183C190.107 180.152 192.354 179.667 194.211 177.439C195.872 175.696 196.066 173.177 194.699 171.046L188.349 160.972C191.28 156.904 193.625 152.544 195.872 147.896L207.79 148.476C210.328 148.573 212.478 147.218 213.358 144.796C214.138 142.374 213.358 140.049 211.305 138.499L202.026 131.138C203.296 126.488 204.273 121.451 204.663 116.22L215.994 112.733C218.438 111.861 220 110.021 220 107.406C220 104.887 218.438 103.046 215.994 102.175L204.663 98.5901C204.273 93.3597 203.296 88.5165 202.026 83.7704L211.305 76.3119C213.358 74.8588 214.138 72.6307 213.358 70.2092C212.478 67.7874 210.328 66.4313 207.79 66.528L195.872 67.0128C193.625 62.3629 191.28 58.0042 188.349 53.9359L194.699 43.8618C196.066 41.8276 195.872 39.309 194.211 37.5652C192.354 35.3377 190.107 34.7561 187.665 35.822L176.723 40.181C173.108 36.7903 169.103 33.4969 165.098 30.6881L167.54 19.1609C168.028 16.5456 167.15 14.2208 165 13.0582C162.558 11.7989 160.213 11.9928 158.358 13.9303L149.565 21.5828C144.876 19.5486 140.089 17.9016 135.302 16.5456L133.544 4.82504C133.251 2.30643 131.492 0.466035 129.05 0.0783659C126.412 -0.30889 124.263 0.756579 123.188 2.88752L117.522 13.543C114.885 13.3492 112.54 13.1554 110 13.1554C107.362 13.1554 105.018 13.3492 102.283 13.543L96.7143 2.88752C95.6398 0.756579 93.4907 -0.30889 90.755 0.0783659C88.3126 0.466035 86.6522 2.30643 86.2608 4.82504L84.6004 16.4489C79.7156 17.9016 74.9292 19.5486 70.3376 21.5828L61.5457 13.9303C59.5917 11.9928 57.2471 11.7989 54.9024 13.0582C52.7534 14.2208 51.8739 16.5456 52.3624 19.1609L54.8045 30.6881C50.7018 33.4969 46.6967 36.7903 43.0816 40.181L32.2382 35.822C29.7956 34.7561 27.4511 35.3377 25.595 37.5652C24.0323 39.309 23.8368 41.8276 25.1069 43.7647L31.5542 53.9359C28.6235 58.0042 26.279 62.3629 24.0323 67.0128L12.0159 66.528C9.47629 66.4313 7.32678 67.7874 6.54525 70.2092C5.76372 72.6307 6.44771 74.8588 8.49926 76.3119L17.8776 83.7704C16.6076 88.5165 15.533 93.3597 15.24 98.5901L3.90764 102.175C1.36757 102.95 0 104.79 0 107.406C0 110.021 1.36757 111.861 3.90764 112.733L15.24 116.317C15.533 121.451 16.6076 126.488 17.8776 131.138L8.49926 138.499C6.44771 140.049 5.76372 142.374 6.54525 144.796C7.32678 147.218 9.47629 148.573 12.0159 148.476L24.0323 147.896C26.279 152.544 28.6235 156.904 31.4566 160.972L25.2044 171.046C23.7388 173.177 23.9344 175.696 25.595 177.439C27.4511 179.667 29.7956 180.152 32.2382 179.183L43.0816 174.631C46.6967 178.214 50.7018 181.41 54.8045 184.22L52.3624 195.844C51.8739 198.362 52.7534 200.687 54.9024 201.849C57.3446 203.206 59.6892 202.818 61.5457 201.074L70.2401 193.228C74.9292 195.263 79.7156 197.103 84.6004 198.362L86.2608 210.083C86.6522 212.699 88.3126 214.441 90.755 214.927C93.4907 215.314 95.6398 214.151 96.7143 212.021L102.283 201.365C104.92 201.559 107.362 201.849 110 201.849ZM134.521 101.303C129.929 89.098 120.942 82.4139 109.707 82.4139C108.046 82.4139 106.092 82.6082 102.967 83.2861L74.9292 35.822C85.3824 30.6881 97.3002 27.8789 110 27.8789C152.594 27.8789 186.003 59.9414 189.032 101.303H134.521ZM30.6751 107.502C30.6751 80.5737 43.4725 56.8416 63.6948 42.5058L91.9276 90.2602C86.6522 95.685 84.2098 101.593 84.2098 107.889C84.2098 113.992 86.5549 119.61 91.9276 125.229L63.0108 172.112C43.2771 157.678 30.6751 134.237 30.6751 107.502ZM97.9841 107.793C97.9841 101.206 103.65 96.0721 109.903 96.0721C116.546 96.0721 122.017 101.206 122.017 107.793C122.017 114.283 116.546 119.61 109.903 119.61C103.65 119.61 97.9841 114.283 97.9841 107.793ZM110 187.126C97.0076 187.126 84.8937 184.123 74.2452 178.892L102.967 132.3C105.994 133.075 108.046 133.269 109.707 133.269C121.039 133.269 130.027 126.391 134.521 113.896H189.032C185.906 155.063 152.496 187.126 110 187.126Z\" fill=\"#0F0B11\"/></g><defs><clipPath id=\"clip0_2265_239\"><rect width=\"220\" height=\"215\" fill=\"white\"/></clipPath></defs></svg>";
2
+ export const gearSVGLight: "<svg width=\"220\" height=\"215\" viewBox=\"0 0 220 215\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_2265_255)\"><path d=\"M118.931 35.6283C119.659 34.1799 121.114 33.4554 122.901 33.7185C124.554 33.982 125.745 35.233 125.943 36.9449L127.135 44.9114C130.376 45.8332 133.617 46.9532 136.793 48.3358L142.748 43.1339C144.004 41.8171 145.592 41.6854 147.246 42.5414C148.701 43.3316 149.297 44.9115 148.966 46.689L147.312 54.5248C150.024 56.4339 152.737 58.6722 155.184 60.9768L162.594 58.0142C164.248 57.2897 165.77 57.6851 167.027 59.1993C168.152 60.3845 168.282 62.0966 167.357 63.4792L163.057 70.3264C165.042 73.0918 166.63 76.0544 168.152 79.2149L176.222 78.8859C177.942 78.8201 179.397 79.742 179.993 81.3878C180.521 83.0336 179.993 84.5478 178.603 85.5356L172.319 90.6053C173.179 93.8318 173.841 97.1234 174.105 100.679L181.779 103.116C183.433 103.708 184.491 104.959 184.491 106.671C184.491 108.448 183.433 109.7 181.779 110.292L174.105 112.662C173.841 116.218 173.179 119.641 172.319 122.802L178.603 127.806C179.993 128.859 180.521 130.439 179.993 132.086C179.397 133.732 177.942 134.653 176.222 134.587L168.152 134.192C166.63 137.352 165.042 140.315 163.057 143.081L167.357 149.928C168.282 151.376 168.152 153.088 167.027 154.274C165.77 155.788 164.248 156.117 162.594 155.459L155.184 152.365C152.737 154.801 150.024 156.973 147.312 158.882L148.966 166.783C149.297 168.495 148.701 170.076 147.246 170.865C145.592 171.787 144.004 171.524 142.748 170.339L136.793 165.005C133.617 166.388 130.376 167.64 127.135 168.496L125.943 176.462C125.745 178.24 124.554 179.425 122.901 179.755C121.114 180.017 119.659 179.227 118.931 177.779L115.094 170.536C113.308 170.668 111.72 170.865 110 170.865C108.214 170.865 106.56 170.668 104.773 170.536L101.003 177.779C100.275 179.227 98.8202 180.018 96.9675 179.755C95.3133 179.425 94.1894 178.24 93.9246 176.462L92.7999 168.496C89.4922 167.64 86.2508 166.388 83.0751 165.005L77.187 170.339C75.9298 171.524 74.3418 171.787 72.6881 170.865C71.2328 170.076 70.6378 168.495 70.9685 166.783L72.6217 158.882C69.8435 156.973 67.131 154.801 64.683 152.365L57.3399 155.459C55.686 156.117 54.0986 155.788 52.8418 154.274C51.7172 153.088 51.5848 151.376 52.5772 149.928L56.8107 143.081C54.8923 140.315 53.3048 137.352 51.7834 134.192L43.6457 134.587C41.9261 134.653 40.4707 133.732 39.9414 132.086C39.4121 130.439 39.8752 128.859 41.2644 127.806L47.6154 122.802C46.7554 119.641 46.028 116.218 45.8296 112.728L38.1547 110.292C36.4347 109.7 35.5088 108.448 35.5088 106.671C35.5088 104.892 36.4349 103.642 38.1547 103.116L45.8296 100.679C46.028 97.1234 46.7553 93.8318 47.6154 90.6053L41.2644 85.5356C39.8752 84.5478 39.4122 83.0336 39.9414 81.3878C40.4706 79.742 41.926 78.8201 43.6457 78.8859L51.7834 79.2149C53.3048 76.0544 54.8925 73.0918 56.877 70.3264L52.5109 63.4127C51.6509 62.096 51.7836 60.3844 52.8418 59.1993C54.0986 57.6852 55.686 57.2898 57.3399 58.0142L64.683 60.9768C67.131 58.6723 69.8435 56.4339 72.6217 54.5248L70.9685 46.689C70.6378 44.9116 71.233 43.3316 72.6881 42.5414C74.2757 41.6854 75.8637 41.817 77.187 43.1339L83.1407 48.3358C86.2501 46.9532 89.4922 45.8332 92.7999 44.8457L93.9246 36.9449C94.1894 35.2331 95.3133 33.982 96.9675 33.7185C98.8202 33.4554 100.275 34.1799 101.003 35.6283L104.773 42.8708C106.626 42.7392 108.214 42.6071 110 42.6071C111.72 42.6071 113.308 42.7392 115.094 42.8708L118.931 35.6283ZM110.386 64.2705C86.9378 64.2705 67.9298 83.1109 67.9298 106.352C67.9299 129.594 86.9378 148.434 110.386 148.434C133.834 148.434 152.842 129.594 152.842 106.352C152.842 83.1109 133.834 64.2705 110.386 64.2705Z\" fill=\"#0F0B11\"/><path d=\"M110 201.849C112.54 201.849 114.885 201.559 117.522 201.365L123.188 212.021C124.263 214.151 126.412 215.314 129.05 214.927C131.492 214.441 133.251 212.699 133.544 210.083L135.302 198.362C140.089 197.103 144.876 195.263 149.565 193.228L158.358 201.074C160.213 202.818 162.558 203.206 165 201.849C167.15 200.687 168.028 198.362 167.54 195.844L165.098 184.22C169.103 181.41 173.108 178.214 176.723 174.631L187.665 179.183C190.107 180.152 192.354 179.667 194.211 177.439C195.872 175.696 196.066 173.177 194.699 171.046L188.349 160.972C191.28 156.904 193.625 152.544 195.872 147.896L207.79 148.476C210.328 148.573 212.478 147.218 213.358 144.796C214.138 142.374 213.358 140.049 211.305 138.499L202.026 131.138C203.296 126.488 204.273 121.451 204.663 116.22L215.994 112.733C218.438 111.861 220 110.021 220 107.406C220 104.887 218.438 103.046 215.994 102.175L204.663 98.5901C204.273 93.3597 203.296 88.5165 202.026 83.7704L211.305 76.3119C213.358 74.8588 214.138 72.6307 213.358 70.2092C212.478 67.7874 210.328 66.4313 207.79 66.528L195.872 67.0128C193.625 62.3629 191.28 58.0042 188.349 53.9359L194.699 43.8618C196.066 41.8276 195.872 39.309 194.211 37.5652C192.354 35.3377 190.107 34.7561 187.665 35.822L176.723 40.181C173.108 36.7903 169.103 33.4969 165.098 30.6881L167.54 19.1609C168.028 16.5456 167.15 14.2208 165 13.0582C162.558 11.7989 160.213 11.9928 158.358 13.9303L149.565 21.5828C144.876 19.5486 140.089 17.9016 135.302 16.5456L133.544 4.82504C133.251 2.30643 131.492 0.466035 129.05 0.0783659C126.412 -0.30889 124.263 0.756579 123.188 2.88752L117.522 13.543C114.885 13.3492 112.54 13.1554 110 13.1554C107.362 13.1554 105.018 13.3492 102.283 13.543L96.7143 2.88752C95.6398 0.756579 93.4907 -0.30889 90.755 0.0783659C88.3126 0.466035 86.6522 2.30643 86.2608 4.82504L84.6004 16.4489C79.7156 17.9016 74.9292 19.5486 70.3376 21.5828L61.5457 13.9303C59.5917 11.9928 57.2471 11.7989 54.9024 13.0582C52.7534 14.2208 51.8739 16.5456 52.3624 19.1609L54.8045 30.6881C50.7018 33.4969 46.6967 36.7903 43.0816 40.181L32.2382 35.822C29.7956 34.7561 27.4511 35.3377 25.595 37.5652C24.0323 39.309 23.8368 41.8276 25.1069 43.7647L31.5542 53.9359C28.6235 58.0042 26.279 62.3629 24.0323 67.0128L12.0159 66.528C9.47629 66.4313 7.32678 67.7874 6.54525 70.2092C5.76372 72.6307 6.44771 74.8588 8.49926 76.3119L17.8776 83.7704C16.6076 88.5165 15.533 93.3597 15.24 98.5901L3.90764 102.175C1.36757 102.95 0 104.79 0 107.406C0 110.021 1.36757 111.861 3.90764 112.733L15.24 116.317C15.533 121.451 16.6076 126.488 17.8776 131.138L8.49926 138.499C6.44771 140.049 5.76372 142.374 6.54525 144.796C7.32678 147.218 9.47629 148.573 12.0159 148.476L24.0323 147.896C26.279 152.544 28.6235 156.904 31.4566 160.972L25.2044 171.046C23.7388 173.177 23.9344 175.696 25.595 177.439C27.4511 179.667 29.7956 180.152 32.2382 179.183L43.0816 174.631C46.6967 178.214 50.7018 181.41 54.8045 184.22L52.3624 195.844C51.8739 198.362 52.7534 200.687 54.9024 201.849C57.3446 203.206 59.6892 202.818 61.5457 201.074L70.2401 193.228C74.9292 195.263 79.7156 197.103 84.6004 198.362L86.2608 210.083C86.6522 212.699 88.3126 214.441 90.755 214.927C93.4907 215.314 95.6398 214.151 96.7143 212.021L102.283 201.365C104.92 201.559 107.362 201.849 110 201.849ZM134.521 101.303C129.929 89.098 120.942 82.4139 109.707 82.4139C108.046 82.4139 106.092 82.6082 102.967 83.2861L74.9292 35.822C85.3824 30.6881 97.3002 27.8789 110 27.8789C152.594 27.8789 186.003 59.9414 189.032 101.303H134.521ZM30.6751 107.502C30.6751 80.5737 43.4725 56.8416 63.6948 42.5058L91.9276 90.2602C86.6522 95.685 84.2098 101.593 84.2098 107.889C84.2098 113.992 86.5549 119.61 91.9276 125.229L63.0108 172.112C43.2771 157.678 30.6751 134.237 30.6751 107.502ZM97.9841 107.793C97.9841 101.206 103.65 96.0721 109.903 96.0721C116.546 96.0721 122.017 101.206 122.017 107.793C122.017 114.283 116.546 119.61 109.903 119.61C103.65 119.61 97.9841 114.283 97.9841 107.793ZM110 187.126C97.0076 187.126 84.8937 184.123 74.2452 178.892L102.967 132.3C105.994 133.075 108.046 133.269 109.707 133.269C121.039 133.269 130.027 126.391 134.521 113.896H189.032C185.906 155.063 152.496 187.126 110 187.126Z\" fill=\"#130F15\"/></g><defs><clipPath id=\"clip0_2265_255\"><rect width=\"220\" height=\"215\" fill=\"white\"/></clipPath></defs></svg>";
@@ -0,0 +1,2 @@
1
+ export const gearSVGDark = '<svg width="220" height="215" viewBox="0 0 220 215" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2265_239)"><path d="M118.931 35.6283C119.659 34.1799 121.114 33.4554 122.901 33.7185C124.554 33.982 125.745 35.233 125.943 36.9449L127.135 44.9114C130.376 45.8332 133.617 46.9532 136.793 48.3358L142.748 43.1339C144.004 41.8171 145.592 41.6854 147.246 42.5414C148.701 43.3316 149.297 44.9115 148.966 46.689L147.312 54.5248C150.024 56.4339 152.737 58.6722 155.184 60.9768L162.594 58.0142C164.248 57.2897 165.77 57.6851 167.027 59.1993C168.152 60.3845 168.282 62.0966 167.357 63.4792L163.057 70.3264C165.042 73.0918 166.63 76.0544 168.152 79.2149L176.222 78.8859C177.942 78.8201 179.397 79.742 179.993 81.3878C180.521 83.0336 179.993 84.5478 178.603 85.5356L172.319 90.6053C173.179 93.8318 173.841 97.1234 174.105 100.679L181.779 103.116C183.433 103.708 184.491 104.959 184.491 106.671C184.491 108.448 183.433 109.7 181.779 110.292L174.105 112.662C173.841 116.218 173.179 119.641 172.319 122.802L178.603 127.806C179.993 128.859 180.521 130.439 179.993 132.086C179.397 133.732 177.942 134.653 176.222 134.587L168.152 134.192C166.63 137.352 165.042 140.315 163.057 143.081L167.357 149.928C168.282 151.376 168.152 153.088 167.027 154.274C165.77 155.788 164.248 156.117 162.594 155.459L155.184 152.365C152.737 154.801 150.024 156.973 147.312 158.882L148.966 166.783C149.297 168.495 148.701 170.076 147.246 170.865C145.592 171.787 144.004 171.524 142.748 170.339L136.793 165.005C133.617 166.388 130.376 167.64 127.135 168.496L125.943 176.462C125.745 178.24 124.554 179.425 122.901 179.755C121.114 180.017 119.659 179.227 118.931 177.779L115.094 170.536C113.308 170.668 111.72 170.865 110 170.865C108.214 170.865 106.56 170.668 104.773 170.536L101.003 177.779C100.275 179.227 98.8202 180.018 96.9675 179.755C95.3133 179.425 94.1894 178.24 93.9246 176.462L92.7999 168.496C89.4922 167.64 86.2508 166.388 83.0751 165.005L77.187 170.339C75.9298 171.524 74.3418 171.787 72.6881 170.865C71.2328 170.076 70.6378 168.495 70.9685 166.783L72.6217 158.882C69.8435 156.973 67.131 154.801 64.683 152.365L57.3399 155.459C55.686 156.117 54.0986 155.788 52.8418 154.274C51.7172 153.088 51.5848 151.376 52.5772 149.928L56.8107 143.081C54.8923 140.315 53.3048 137.352 51.7834 134.192L43.6457 134.587C41.9261 134.653 40.4707 133.732 39.9414 132.086C39.4121 130.439 39.8752 128.859 41.2644 127.806L47.6154 122.802C46.7554 119.641 46.028 116.218 45.8296 112.728L38.1547 110.292C36.4347 109.7 35.5088 108.448 35.5088 106.671C35.5088 104.892 36.4349 103.642 38.1547 103.116L45.8296 100.679C46.028 97.1234 46.7553 93.8318 47.6154 90.6053L41.2644 85.5356C39.8752 84.5478 39.4122 83.0336 39.9414 81.3878C40.4706 79.742 41.926 78.8201 43.6457 78.8859L51.7834 79.2149C53.3048 76.0544 54.8925 73.0918 56.877 70.3264L52.5109 63.4127C51.6509 62.096 51.7836 60.3844 52.8418 59.1993C54.0986 57.6852 55.686 57.2898 57.3399 58.0142L64.683 60.9768C67.131 58.6723 69.8435 56.4339 72.6217 54.5248L70.9685 46.689C70.6378 44.9116 71.233 43.3316 72.6881 42.5414C74.2757 41.6854 75.8637 41.817 77.187 43.1339L83.1407 48.3358C86.2501 46.9532 89.4922 45.8332 92.7999 44.8457L93.9246 36.9449C94.1894 35.2331 95.3133 33.982 96.9675 33.7185C98.8202 33.4554 100.275 34.1799 101.003 35.6283L104.773 42.8708C106.626 42.7392 108.214 42.6071 110 42.6071C111.72 42.6071 113.308 42.7392 115.094 42.8708L118.931 35.6283ZM110.386 64.2705C86.9378 64.2705 67.9298 83.1109 67.9298 106.352C67.9299 129.594 86.9378 148.434 110.386 148.434C133.834 148.434 152.842 129.594 152.842 106.352C152.842 83.1109 133.834 64.2705 110.386 64.2705Z" fill="#130F15"/><path d="M110 201.849C112.54 201.849 114.885 201.559 117.522 201.365L123.188 212.021C124.263 214.151 126.412 215.314 129.05 214.927C131.492 214.441 133.251 212.699 133.544 210.083L135.302 198.362C140.089 197.103 144.876 195.263 149.565 193.228L158.358 201.074C160.213 202.818 162.558 203.206 165 201.849C167.15 200.687 168.028 198.362 167.54 195.844L165.098 184.22C169.103 181.41 173.108 178.214 176.723 174.631L187.665 179.183C190.107 180.152 192.354 179.667 194.211 177.439C195.872 175.696 196.066 173.177 194.699 171.046L188.349 160.972C191.28 156.904 193.625 152.544 195.872 147.896L207.79 148.476C210.328 148.573 212.478 147.218 213.358 144.796C214.138 142.374 213.358 140.049 211.305 138.499L202.026 131.138C203.296 126.488 204.273 121.451 204.663 116.22L215.994 112.733C218.438 111.861 220 110.021 220 107.406C220 104.887 218.438 103.046 215.994 102.175L204.663 98.5901C204.273 93.3597 203.296 88.5165 202.026 83.7704L211.305 76.3119C213.358 74.8588 214.138 72.6307 213.358 70.2092C212.478 67.7874 210.328 66.4313 207.79 66.528L195.872 67.0128C193.625 62.3629 191.28 58.0042 188.349 53.9359L194.699 43.8618C196.066 41.8276 195.872 39.309 194.211 37.5652C192.354 35.3377 190.107 34.7561 187.665 35.822L176.723 40.181C173.108 36.7903 169.103 33.4969 165.098 30.6881L167.54 19.1609C168.028 16.5456 167.15 14.2208 165 13.0582C162.558 11.7989 160.213 11.9928 158.358 13.9303L149.565 21.5828C144.876 19.5486 140.089 17.9016 135.302 16.5456L133.544 4.82504C133.251 2.30643 131.492 0.466035 129.05 0.0783659C126.412 -0.30889 124.263 0.756579 123.188 2.88752L117.522 13.543C114.885 13.3492 112.54 13.1554 110 13.1554C107.362 13.1554 105.018 13.3492 102.283 13.543L96.7143 2.88752C95.6398 0.756579 93.4907 -0.30889 90.755 0.0783659C88.3126 0.466035 86.6522 2.30643 86.2608 4.82504L84.6004 16.4489C79.7156 17.9016 74.9292 19.5486 70.3376 21.5828L61.5457 13.9303C59.5917 11.9928 57.2471 11.7989 54.9024 13.0582C52.7534 14.2208 51.8739 16.5456 52.3624 19.1609L54.8045 30.6881C50.7018 33.4969 46.6967 36.7903 43.0816 40.181L32.2382 35.822C29.7956 34.7561 27.4511 35.3377 25.595 37.5652C24.0323 39.309 23.8368 41.8276 25.1069 43.7647L31.5542 53.9359C28.6235 58.0042 26.279 62.3629 24.0323 67.0128L12.0159 66.528C9.47629 66.4313 7.32678 67.7874 6.54525 70.2092C5.76372 72.6307 6.44771 74.8588 8.49926 76.3119L17.8776 83.7704C16.6076 88.5165 15.533 93.3597 15.24 98.5901L3.90764 102.175C1.36757 102.95 0 104.79 0 107.406C0 110.021 1.36757 111.861 3.90764 112.733L15.24 116.317C15.533 121.451 16.6076 126.488 17.8776 131.138L8.49926 138.499C6.44771 140.049 5.76372 142.374 6.54525 144.796C7.32678 147.218 9.47629 148.573 12.0159 148.476L24.0323 147.896C26.279 152.544 28.6235 156.904 31.4566 160.972L25.2044 171.046C23.7388 173.177 23.9344 175.696 25.595 177.439C27.4511 179.667 29.7956 180.152 32.2382 179.183L43.0816 174.631C46.6967 178.214 50.7018 181.41 54.8045 184.22L52.3624 195.844C51.8739 198.362 52.7534 200.687 54.9024 201.849C57.3446 203.206 59.6892 202.818 61.5457 201.074L70.2401 193.228C74.9292 195.263 79.7156 197.103 84.6004 198.362L86.2608 210.083C86.6522 212.699 88.3126 214.441 90.755 214.927C93.4907 215.314 95.6398 214.151 96.7143 212.021L102.283 201.365C104.92 201.559 107.362 201.849 110 201.849ZM134.521 101.303C129.929 89.098 120.942 82.4139 109.707 82.4139C108.046 82.4139 106.092 82.6082 102.967 83.2861L74.9292 35.822C85.3824 30.6881 97.3002 27.8789 110 27.8789C152.594 27.8789 186.003 59.9414 189.032 101.303H134.521ZM30.6751 107.502C30.6751 80.5737 43.4725 56.8416 63.6948 42.5058L91.9276 90.2602C86.6522 95.685 84.2098 101.593 84.2098 107.889C84.2098 113.992 86.5549 119.61 91.9276 125.229L63.0108 172.112C43.2771 157.678 30.6751 134.237 30.6751 107.502ZM97.9841 107.793C97.9841 101.206 103.65 96.0721 109.903 96.0721C116.546 96.0721 122.017 101.206 122.017 107.793C122.017 114.283 116.546 119.61 109.903 119.61C103.65 119.61 97.9841 114.283 97.9841 107.793ZM110 187.126C97.0076 187.126 84.8937 184.123 74.2452 178.892L102.967 132.3C105.994 133.075 108.046 133.269 109.707 133.269C121.039 133.269 130.027 126.391 134.521 113.896H189.032C185.906 155.063 152.496 187.126 110 187.126Z" fill="#0F0B11"/></g><defs><clipPath id="clip0_2265_239"><rect width="220" height="215" fill="white"/></clipPath></defs></svg>';
2
+ export const gearSVGLight = '<svg width="220" height="215" viewBox="0 0 220 215" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2265_255)"><path d="M118.931 35.6283C119.659 34.1799 121.114 33.4554 122.901 33.7185C124.554 33.982 125.745 35.233 125.943 36.9449L127.135 44.9114C130.376 45.8332 133.617 46.9532 136.793 48.3358L142.748 43.1339C144.004 41.8171 145.592 41.6854 147.246 42.5414C148.701 43.3316 149.297 44.9115 148.966 46.689L147.312 54.5248C150.024 56.4339 152.737 58.6722 155.184 60.9768L162.594 58.0142C164.248 57.2897 165.77 57.6851 167.027 59.1993C168.152 60.3845 168.282 62.0966 167.357 63.4792L163.057 70.3264C165.042 73.0918 166.63 76.0544 168.152 79.2149L176.222 78.8859C177.942 78.8201 179.397 79.742 179.993 81.3878C180.521 83.0336 179.993 84.5478 178.603 85.5356L172.319 90.6053C173.179 93.8318 173.841 97.1234 174.105 100.679L181.779 103.116C183.433 103.708 184.491 104.959 184.491 106.671C184.491 108.448 183.433 109.7 181.779 110.292L174.105 112.662C173.841 116.218 173.179 119.641 172.319 122.802L178.603 127.806C179.993 128.859 180.521 130.439 179.993 132.086C179.397 133.732 177.942 134.653 176.222 134.587L168.152 134.192C166.63 137.352 165.042 140.315 163.057 143.081L167.357 149.928C168.282 151.376 168.152 153.088 167.027 154.274C165.77 155.788 164.248 156.117 162.594 155.459L155.184 152.365C152.737 154.801 150.024 156.973 147.312 158.882L148.966 166.783C149.297 168.495 148.701 170.076 147.246 170.865C145.592 171.787 144.004 171.524 142.748 170.339L136.793 165.005C133.617 166.388 130.376 167.64 127.135 168.496L125.943 176.462C125.745 178.24 124.554 179.425 122.901 179.755C121.114 180.017 119.659 179.227 118.931 177.779L115.094 170.536C113.308 170.668 111.72 170.865 110 170.865C108.214 170.865 106.56 170.668 104.773 170.536L101.003 177.779C100.275 179.227 98.8202 180.018 96.9675 179.755C95.3133 179.425 94.1894 178.24 93.9246 176.462L92.7999 168.496C89.4922 167.64 86.2508 166.388 83.0751 165.005L77.187 170.339C75.9298 171.524 74.3418 171.787 72.6881 170.865C71.2328 170.076 70.6378 168.495 70.9685 166.783L72.6217 158.882C69.8435 156.973 67.131 154.801 64.683 152.365L57.3399 155.459C55.686 156.117 54.0986 155.788 52.8418 154.274C51.7172 153.088 51.5848 151.376 52.5772 149.928L56.8107 143.081C54.8923 140.315 53.3048 137.352 51.7834 134.192L43.6457 134.587C41.9261 134.653 40.4707 133.732 39.9414 132.086C39.4121 130.439 39.8752 128.859 41.2644 127.806L47.6154 122.802C46.7554 119.641 46.028 116.218 45.8296 112.728L38.1547 110.292C36.4347 109.7 35.5088 108.448 35.5088 106.671C35.5088 104.892 36.4349 103.642 38.1547 103.116L45.8296 100.679C46.028 97.1234 46.7553 93.8318 47.6154 90.6053L41.2644 85.5356C39.8752 84.5478 39.4122 83.0336 39.9414 81.3878C40.4706 79.742 41.926 78.8201 43.6457 78.8859L51.7834 79.2149C53.3048 76.0544 54.8925 73.0918 56.877 70.3264L52.5109 63.4127C51.6509 62.096 51.7836 60.3844 52.8418 59.1993C54.0986 57.6852 55.686 57.2898 57.3399 58.0142L64.683 60.9768C67.131 58.6723 69.8435 56.4339 72.6217 54.5248L70.9685 46.689C70.6378 44.9116 71.233 43.3316 72.6881 42.5414C74.2757 41.6854 75.8637 41.817 77.187 43.1339L83.1407 48.3358C86.2501 46.9532 89.4922 45.8332 92.7999 44.8457L93.9246 36.9449C94.1894 35.2331 95.3133 33.982 96.9675 33.7185C98.8202 33.4554 100.275 34.1799 101.003 35.6283L104.773 42.8708C106.626 42.7392 108.214 42.6071 110 42.6071C111.72 42.6071 113.308 42.7392 115.094 42.8708L118.931 35.6283ZM110.386 64.2705C86.9378 64.2705 67.9298 83.1109 67.9298 106.352C67.9299 129.594 86.9378 148.434 110.386 148.434C133.834 148.434 152.842 129.594 152.842 106.352C152.842 83.1109 133.834 64.2705 110.386 64.2705Z" fill="#0F0B11"/><path d="M110 201.849C112.54 201.849 114.885 201.559 117.522 201.365L123.188 212.021C124.263 214.151 126.412 215.314 129.05 214.927C131.492 214.441 133.251 212.699 133.544 210.083L135.302 198.362C140.089 197.103 144.876 195.263 149.565 193.228L158.358 201.074C160.213 202.818 162.558 203.206 165 201.849C167.15 200.687 168.028 198.362 167.54 195.844L165.098 184.22C169.103 181.41 173.108 178.214 176.723 174.631L187.665 179.183C190.107 180.152 192.354 179.667 194.211 177.439C195.872 175.696 196.066 173.177 194.699 171.046L188.349 160.972C191.28 156.904 193.625 152.544 195.872 147.896L207.79 148.476C210.328 148.573 212.478 147.218 213.358 144.796C214.138 142.374 213.358 140.049 211.305 138.499L202.026 131.138C203.296 126.488 204.273 121.451 204.663 116.22L215.994 112.733C218.438 111.861 220 110.021 220 107.406C220 104.887 218.438 103.046 215.994 102.175L204.663 98.5901C204.273 93.3597 203.296 88.5165 202.026 83.7704L211.305 76.3119C213.358 74.8588 214.138 72.6307 213.358 70.2092C212.478 67.7874 210.328 66.4313 207.79 66.528L195.872 67.0128C193.625 62.3629 191.28 58.0042 188.349 53.9359L194.699 43.8618C196.066 41.8276 195.872 39.309 194.211 37.5652C192.354 35.3377 190.107 34.7561 187.665 35.822L176.723 40.181C173.108 36.7903 169.103 33.4969 165.098 30.6881L167.54 19.1609C168.028 16.5456 167.15 14.2208 165 13.0582C162.558 11.7989 160.213 11.9928 158.358 13.9303L149.565 21.5828C144.876 19.5486 140.089 17.9016 135.302 16.5456L133.544 4.82504C133.251 2.30643 131.492 0.466035 129.05 0.0783659C126.412 -0.30889 124.263 0.756579 123.188 2.88752L117.522 13.543C114.885 13.3492 112.54 13.1554 110 13.1554C107.362 13.1554 105.018 13.3492 102.283 13.543L96.7143 2.88752C95.6398 0.756579 93.4907 -0.30889 90.755 0.0783659C88.3126 0.466035 86.6522 2.30643 86.2608 4.82504L84.6004 16.4489C79.7156 17.9016 74.9292 19.5486 70.3376 21.5828L61.5457 13.9303C59.5917 11.9928 57.2471 11.7989 54.9024 13.0582C52.7534 14.2208 51.8739 16.5456 52.3624 19.1609L54.8045 30.6881C50.7018 33.4969 46.6967 36.7903 43.0816 40.181L32.2382 35.822C29.7956 34.7561 27.4511 35.3377 25.595 37.5652C24.0323 39.309 23.8368 41.8276 25.1069 43.7647L31.5542 53.9359C28.6235 58.0042 26.279 62.3629 24.0323 67.0128L12.0159 66.528C9.47629 66.4313 7.32678 67.7874 6.54525 70.2092C5.76372 72.6307 6.44771 74.8588 8.49926 76.3119L17.8776 83.7704C16.6076 88.5165 15.533 93.3597 15.24 98.5901L3.90764 102.175C1.36757 102.95 0 104.79 0 107.406C0 110.021 1.36757 111.861 3.90764 112.733L15.24 116.317C15.533 121.451 16.6076 126.488 17.8776 131.138L8.49926 138.499C6.44771 140.049 5.76372 142.374 6.54525 144.796C7.32678 147.218 9.47629 148.573 12.0159 148.476L24.0323 147.896C26.279 152.544 28.6235 156.904 31.4566 160.972L25.2044 171.046C23.7388 173.177 23.9344 175.696 25.595 177.439C27.4511 179.667 29.7956 180.152 32.2382 179.183L43.0816 174.631C46.6967 178.214 50.7018 181.41 54.8045 184.22L52.3624 195.844C51.8739 198.362 52.7534 200.687 54.9024 201.849C57.3446 203.206 59.6892 202.818 61.5457 201.074L70.2401 193.228C74.9292 195.263 79.7156 197.103 84.6004 198.362L86.2608 210.083C86.6522 212.699 88.3126 214.441 90.755 214.927C93.4907 215.314 95.6398 214.151 96.7143 212.021L102.283 201.365C104.92 201.559 107.362 201.849 110 201.849ZM134.521 101.303C129.929 89.098 120.942 82.4139 109.707 82.4139C108.046 82.4139 106.092 82.6082 102.967 83.2861L74.9292 35.822C85.3824 30.6881 97.3002 27.8789 110 27.8789C152.594 27.8789 186.003 59.9414 189.032 101.303H134.521ZM30.6751 107.502C30.6751 80.5737 43.4725 56.8416 63.6948 42.5058L91.9276 90.2602C86.6522 95.685 84.2098 101.593 84.2098 107.889C84.2098 113.992 86.5549 119.61 91.9276 125.229L63.0108 172.112C43.2771 157.678 30.6751 134.237 30.6751 107.502ZM97.9841 107.793C97.9841 101.206 103.65 96.0721 109.903 96.0721C116.546 96.0721 122.017 101.206 122.017 107.793C122.017 114.283 116.546 119.61 109.903 119.61C103.65 119.61 97.9841 114.283 97.9841 107.793ZM110 187.126C97.0076 187.126 84.8937 184.123 74.2452 178.892L102.967 132.3C105.994 133.075 108.046 133.269 109.707 133.269C121.039 133.269 130.027 126.391 134.521 113.896H189.032C185.906 155.063 152.496 187.126 110 187.126Z" fill="#130F15"/></g><defs><clipPath id="clip0_2265_255"><rect width="220" height="215" fill="white"/></clipPath></defs></svg>';
@@ -0,0 +1,188 @@
1
+ <script>
2
+ import { onMount, onDestroy } from 'svelte';
3
+
4
+ /**
5
+ * @type {string}
6
+ */
7
+ export let chainColor = "#130F15";
8
+
9
+ /**
10
+ * @type {number}
11
+ */
12
+ export let linkCount = 8;
13
+
14
+ /**
15
+ * @type {number}
16
+ */
17
+ export let offset = 30;
18
+
19
+ /**
20
+ * @type {number}
21
+ */
22
+ export let windStrength = 0.04;
23
+
24
+ /**
25
+ * @type {number}
26
+ */
27
+ export let damping = 50;
28
+
29
+ /**
30
+ * @type {number}
31
+ */
32
+ export let stiffness = 100;
33
+
34
+ /** @type {Array<{x: number, y: number, rotation: number}>} */
35
+ let links = [];
36
+
37
+ /** @type {Array<{vx: number, vy: number}>} */
38
+ let velocities = [];
39
+
40
+ /** @type {number | null} */
41
+ let animationFrameId = null;
42
+
43
+ /** @type {number} */
44
+ let startTime = 0;
45
+
46
+ function initializeLinks() {
47
+ links = Array.from({ length: linkCount }, (_, i) => ({
48
+ x: 0,
49
+ y: i * offset,
50
+ rotation: 0,
51
+ }));
52
+ velocities = Array.from({ length: linkCount }, () => ({
53
+ vx: 0,
54
+ vy: 0,
55
+ }));
56
+ }
57
+
58
+ function animate() {
59
+ const elapsed = (Date.now() - startTime) / 1000;
60
+
61
+ const nextLinks = links.map((link, i) => {
62
+ if (i === 0) {
63
+ velocities[i] = { vx: 0, vy: 0 };
64
+ return { ...link, x: 0, y: 0, rotation: 0 };
65
+ }
66
+
67
+ // Wind simulation
68
+ const time = elapsed;
69
+ const wave =
70
+ Math.sin(time * 2 + i * 0.3) +
71
+ Math.sin(time * 1.5 + i * 0.1) * 0.5;
72
+
73
+ // Force decreases down the chain (strongest at bottom, weakest at top)
74
+ const windForce =
75
+ wave *
76
+ windStrength *
77
+ ((linkCount - i) / linkCount) *
78
+ 40;
79
+
80
+ // Get previous link position
81
+ const prevLink = links[i - 1];
82
+
83
+ // Calculate target position based on constraint
84
+ const targetY = prevLink.y + offset;
85
+ const targetX = prevLink.x + windForce;
86
+
87
+ // Apply forces
88
+ const dampingFactor = damping / 100;
89
+ velocities[i].vx += (targetX - link.x) * (stiffness / 1000);
90
+ velocities[i].vy += (targetY - link.y) * (stiffness / 1000);
91
+
92
+ // Apply damping
93
+ velocities[i].vx *= 1 - dampingFactor;
94
+ velocities[i].vy *= 1 - dampingFactor;
95
+
96
+ // Update position
97
+ const newX = link.x + velocities[i].vx;
98
+ const newY = link.y + velocities[i].vy;
99
+
100
+ return {
101
+ x: newX,
102
+ y: newY,
103
+ rotation: 0,
104
+ };
105
+ });
106
+
107
+ // Calculate rotations
108
+ for (let i = 1; i < nextLinks.length; i++) {
109
+ const prev = nextLinks[i - 1];
110
+ const curr = nextLinks[i];
111
+ const dx = curr.x - prev.x;
112
+ const dy = curr.y - prev.y;
113
+ const angle = -Math.atan2(dx, dy) * (180 / Math.PI);
114
+ // Constrain rotation to max 3 degrees
115
+ curr.rotation = Math.max(-3, Math.min(3, angle));
116
+ }
117
+
118
+ links = nextLinks;
119
+ animationFrameId = requestAnimationFrame(animate);
120
+ }
121
+
122
+ onMount(() => {
123
+ initializeLinks();
124
+ startTime = Date.now();
125
+ animationFrameId = requestAnimationFrame(animate);
126
+ });
127
+
128
+ onDestroy(() => {
129
+ if (animationFrameId !== null) {
130
+ cancelAnimationFrame(animationFrameId);
131
+ }
132
+ });
133
+
134
+ // Reinitialize when props change
135
+ $: if (linkCount || offset) {
136
+ initializeLinks();
137
+ }
138
+
139
+ $: viewBoxHeight = linkCount * offset;
140
+ </script>
141
+
142
+ <div class="chain-container">
143
+ <svg
144
+ width="100%"
145
+ height="100%"
146
+ viewBox="0 0 60 {viewBoxHeight}"
147
+ style="overflow: visible;"
148
+ >
149
+ {#each links as link, i}
150
+ <g
151
+ transform="translate({30 + link.x}, {link.y}) rotate({link.rotation})"
152
+ style="transform-origin: 30px 0;"
153
+ >
154
+ <g transform="translate(-10, 0)">
155
+ {#if i === linkCount - 1}
156
+ <!-- End link (decorative bottom piece) -->
157
+ <path
158
+ fill-rule="evenodd"
159
+ clip-rule="evenodd"
160
+ d="M10.0646 37.4537C5.79507 37.4632 2.10983 34.8721 0.626751 30.8898C-0.137261 28.8554 -0.227146 15.5559 0.491925 13.4749C0.806518 12.651 1.48065 11.3932 2.06489 10.6121C3.08802 9.32346 3.14248 7.91558 3.14348 2.36149L8.49965 3.01461C8.49965 6.09044 9.61514 6.56641 10.6488 6.56411C11.0982 6.56311 12.233 4.76726 12.233 2.34125L17.8844 2.32867C17.8844 8.74026 17.9294 10.4035 18.9181 12.3941C19.9068 14.428 19.9967 15.0776 19.9967 22.1391C19.9967 29.2871 19.9518 29.8504 18.9181 31.6722C16.8058 35.5759 13.9745 37.445 10.0646 37.4537ZM12.6712 18.1265C10.8735 18.607 8.62641 18.3954 7.36804 17.6184L6.28943 16.971L6.28943 23.0793V29.1877L7.59275 30.4411C9.07583 31.8674 10.1095 31.9951 11.6375 30.9953C13.3903 29.7784 13.9296 27.8277 13.9296 22.5858V17.8204L12.6712 18.1265Z"
161
+ fill={chainColor}
162
+ />
163
+ {:else}
164
+ <!-- Regular chain link -->
165
+ <path
166
+ fill-rule="evenodd"
167
+ clip-rule="evenodd"
168
+ d="M-9.31873e-07 21.3396C-6.35866e-07 14.5677 0.0898832 13.8569 1.03366 11.932C1.96876 10.0247 2.0656 9.26831 2.11102 3.31844L7.76383 3.30585C7.76759 5.99271 8.86971 6.2713 9.66251 6.26954C10.4715 6.26774 11.5613 5.9727 11.5613 3.4228L11.5612 3.2974L16.8532 3.28562C16.8532 7.08956 17.033 9.22103 17.3476 9.42934C17.6172 9.55414 18.3363 10.6812 18.9205 11.8503C19.9093 13.8546 19.9992 14.4814 19.9992 21.2951C19.9992 28.1087 19.9093 28.7359 18.9205 30.7446C18.3363 31.9164 17.6172 33.0466 17.3476 33.1726C17.033 33.3823 16.8532 35.7654 16.8532 39.4021L11.5612 39.4139C11.5613 39.3727 11.5613 39.3309 11.5613 39.2885C11.5613 36.655 10.4715 36.3648 9.66251 36.3666C8.85356 36.3684 7.76372 36.6635 7.76371 39.297C7.76371 39.3394 7.76374 39.3812 7.76379 39.4224L2.11227 39.435C2.11227 33.3319 2.02239 32.6633 1.0786 30.7425C0.0898826 28.7801 -1.22971e-06 28.1532 -9.31873e-07 21.3396ZM6.87611 25.2536C8.3592 24.5815 11.7748 24.8247 12.7635 25.6585L13.7073 26.4507L13.7073 21.7689L13.7073 17.0871L12.359 17.759C10.8759 18.4729 8.17943 18.6043 6.92106 17.9801C6.1121 17.5639 6.06716 17.6894 6.06716 21.5769C6.06716 25.2554 6.1121 25.5479 6.87611 25.2536Z"
169
+ fill={chainColor}
170
+ />
171
+ {/if}
172
+ </g>
173
+ </g>
174
+ {/each}
175
+ </svg>
176
+ </div>
177
+
178
+ <style>
179
+ .chain-container {
180
+ position: relative;
181
+ width: 100%;
182
+ height: 100%;
183
+ display: flex;
184
+ justify-content: center;
185
+ align-items: flex-start;
186
+ overflow: visible;
187
+ }
188
+ </style>
@@ -0,0 +1,36 @@
1
+ export default BGChain;
2
+ type BGChain = SvelteComponent<{
3
+ chainColor?: string | undefined;
4
+ linkCount?: number | undefined;
5
+ offset?: number | undefined;
6
+ windStrength?: number | undefined;
7
+ damping?: number | undefined;
8
+ stiffness?: number | undefined;
9
+ }, {
10
+ [evt: string]: CustomEvent<any>;
11
+ }, {}> & {
12
+ $$bindings?: string | undefined;
13
+ };
14
+ declare const BGChain: $$__sveltets_2_IsomorphicComponent<{
15
+ chainColor?: string | undefined;
16
+ linkCount?: number | undefined;
17
+ offset?: number | undefined;
18
+ windStrength?: number | undefined;
19
+ damping?: number | undefined;
20
+ stiffness?: number | undefined;
21
+ }, {
22
+ [evt: string]: CustomEvent<any>;
23
+ }, {}, {}, string>;
24
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
25
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
26
+ $$bindings?: Bindings;
27
+ } & Exports;
28
+ (internal: unknown, props: Props & {
29
+ $$events?: Events;
30
+ $$slots?: Slots;
31
+ }): Exports & {
32
+ $set?: any;
33
+ $on?: any;
34
+ };
35
+ z_$$bindings?: Bindings;
36
+ }
@@ -0,0 +1,130 @@
1
+ <script>
2
+ import BGChain from './BGChain.svelte';
3
+ import BGGears from './BGGears.svelte';
4
+ import { gearSVGDark } from './AssetGear.js';
5
+
6
+ /**
7
+ * @type {string}
8
+ */
9
+ export let chainColor = "#130F15";
10
+
11
+ /**
12
+ * @type {number}
13
+ */
14
+ export let linkCount = 8;
15
+
16
+ /**
17
+ * @type {number}
18
+ */
19
+ export let offset = 36;
20
+
21
+ /**
22
+ * @type {number}
23
+ */
24
+ export let windStrength = 0.04;
25
+
26
+ /**
27
+ * Show gears
28
+ * @type {boolean}
29
+ */
30
+ export let showGears = true;
31
+
32
+ /**
33
+ * Show chain
34
+ * @type {boolean}
35
+ */
36
+ export let showChain = true;
37
+ </script>
38
+
39
+ <div class="bg-details">
40
+ {#if showChain}
41
+ <div class="chain-wrapper top-left">
42
+ <BGChain
43
+ {chainColor}
44
+ {linkCount}
45
+ {offset}
46
+ {windStrength}
47
+ />
48
+ </div>
49
+ {/if}
50
+
51
+ {#if showGears}
52
+ <div class="gears-wrapper top-right">
53
+ <BGGears
54
+ primarySize={255}
55
+ secondaryRatio={0.7}
56
+ speed={-3}
57
+ meshOffsetX={50}
58
+ meshOffsetY={-100}
59
+ opacity={1}
60
+ secondaryRotationOffset={45}
61
+ />
62
+ </div>
63
+ <div class="single-gear-wrapper bottom-left">
64
+ <div class="single-gear">
65
+ {@html gearSVGDark}
66
+ </div>
67
+ </div> {/if}
68
+ </div>
69
+
70
+ <style>
71
+ .bg-details {
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ width: 100%;
76
+ height: 100%;
77
+ pointer-events: none;
78
+ z-index: 0;
79
+ overflow: hidden;
80
+ }
81
+
82
+ .chain-wrapper {
83
+ position: absolute;
84
+ width: 80px;
85
+ height: fit-content;
86
+ }
87
+
88
+ .chain-wrapper.top-left {
89
+ top: -50px;
90
+ left: 30px;
91
+ }
92
+
93
+ .gears-wrapper {
94
+ position: absolute;
95
+ }
96
+
97
+ .gears-wrapper.top-right {
98
+ top: 15px;
99
+ right: -150px;
100
+ }
101
+ .single-gear-wrapper {
102
+ position: absolute;
103
+ width: 220px;
104
+ height: 215px;
105
+ }
106
+
107
+ .single-gear-wrapper.bottom-left {
108
+ bottom: -100px;
109
+ left: -120px;
110
+ }
111
+
112
+ .single-gear {
113
+ width: 100%;
114
+ height: 100%;
115
+ animation: rotateSingleGear 100s linear infinite;
116
+ }
117
+
118
+ .single-gear :global(svg) {
119
+ width: 100%;
120
+ height: 100%;
121
+ }
122
+
123
+ @keyframes rotateSingleGear {
124
+ from {
125
+ transform: rotate(0deg);
126
+ }
127
+ to {
128
+ transform: rotate(360deg);
129
+ }
130
+ }</style>
@@ -0,0 +1,36 @@
1
+ export default BGDetails;
2
+ type BGDetails = SvelteComponent<{
3
+ chainColor?: string | undefined;
4
+ linkCount?: number | undefined;
5
+ offset?: number | undefined;
6
+ windStrength?: number | undefined;
7
+ showGears?: boolean | undefined;
8
+ showChain?: boolean | undefined;
9
+ }, {
10
+ [evt: string]: CustomEvent<any>;
11
+ }, {}> & {
12
+ $$bindings?: string | undefined;
13
+ };
14
+ declare const BGDetails: $$__sveltets_2_IsomorphicComponent<{
15
+ chainColor?: string | undefined;
16
+ linkCount?: number | undefined;
17
+ offset?: number | undefined;
18
+ windStrength?: number | undefined;
19
+ showGears?: boolean | undefined;
20
+ showChain?: boolean | undefined;
21
+ }, {
22
+ [evt: string]: CustomEvent<any>;
23
+ }, {}, {}, string>;
24
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
25
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
26
+ $$bindings?: Bindings;
27
+ } & Exports;
28
+ (internal: unknown, props: Props & {
29
+ $$events?: Events;
30
+ $$slots?: Slots;
31
+ }): Exports & {
32
+ $set?: any;
33
+ $on?: any;
34
+ };
35
+ z_$$bindings?: Bindings;
36
+ }