Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
225 lines (216 loc) · 11.7 KB
/
Copy pathindex.html
File metadata and controls
225 lines (216 loc) · 11.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script id="rb-boot-script">
(() => {
const root = document.documentElement;
let theme = 'dark';
try {
if (localStorage.getItem('react-bits-theme') === 'light') theme = 'light';
} catch {}
root.setAttribute('data-theme', theme);
root.setAttribute('data-rb-boot', '');
const finish = () => {
clearTimeout(deadline);
root.removeAttribute('data-rb-boot');
document.getElementById('rb-boot-loader')?.remove();
window.removeEventListener('pageshow', onPageShow);
delete window.__RB_FINISH_BOOT__;
};
const onPageShow = event => {
if (event.persisted) finish();
};
const deadline = setTimeout(finish, 10000);
window.__RB_FINISH_BOOT__ = finish;
window.addEventListener('pageshow', onPageShow);
})();
</script>
<style id="rb-boot-style">
:root {
--rb-boot-bg: #120f17;
--rb-boot-ink: #fff;
background: var(--rb-boot-bg);
}
:root[data-theme='light'] {
--rb-boot-bg: #fff;
--rb-boot-ink: #27272a;
}
#rb-boot-loader {
display: none;
}
html[data-rb-boot],
html[data-rb-boot] body {
overflow: hidden;
}
html[data-rb-boot] #root {
visibility: hidden;
}
html[data-rb-boot] #rb-boot-loader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--rb-boot-bg);
}
#rb-boot-loader svg {
width: 40px;
height: 40px;
opacity: 0.6;
animation: ln-loader-pulse 1.8s ease-in-out infinite;
}
#rb-boot-loader path {
fill: var(--rb-boot-ink);
}
@keyframes ln-loader-pulse {
0%,
100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
#rb-boot-loader svg {
animation: none;
}
}
</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1GF5NXTV27"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-1GF5NXTV27', {
// Keeps the session intact when users cross over to the Pro app.
linker: { domains: ['reactbits.dev', 'pro.reactbits.dev'] }
});
</script>
<!-- Basic Meta Tags -->
<meta name="theme-color" content="#120F17" />
<meta name="author" content="David Haz" />
<meta
name="description"
content="Free, open source React components for animated text, backgrounds, interactive cards and micro interactions. Explore live demos and copy the source."
/>
<!-- Font -->
<link
rel="preload"
href="/node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/node_modules/geist/dist/fonts/geist-mono/GeistMono-Variable.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Gochi+Hand&family=Press+Start+2P&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap"
media="print"
onload="this.media='all'"
/>
<noscript>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Gochi+Hand&family=Press+Start+2P&family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap"
/>
</noscript>
<!-- Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="React Bits" />
<link rel="manifest" href="/site.webmanifest" />
<link
rel="alternate"
type="application/rss+xml"
title="React Bits changelog"
href="https://reactbits.dev/rss.xml"
/>
<!-- Open Graph (OG) - Facebook, LinkedIn, etc. -->
<meta property="og:type" content="website" />
<meta property="og:title" content="React Bits — Free Animated React Components" />
<meta
property="og:description"
content="Free, open source React components for animated text, backgrounds, interactive cards and micro interactions. Explore live demos and copy the source."
/>
<meta property="og:image" content="https://reactbits.dev/og.jpg" />
<meta property="og:image:alt" content="React Bits: free animated React components for creative websites." />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://reactbits.dev" />
<meta property="og:site_name" content="React Bits" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card - Twitter Sharing -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@davidhaz" />
<meta name="twitter:creator" content="@davidhaz" />
<meta name="twitter:title" content="React Bits — Free Animated React Components" />
<meta
name="twitter:description"
content="Free, open source React components for animated text, backgrounds, interactive cards and micro interactions. Explore live demos and copy the source."
/>
<meta name="twitter:image" content="https://reactbits.dev/og.jpg" />
<meta name="twitter:image:alt" content="React Bits: free animated React components for creative websites." />
<!-- Robots Meta Tag (canonical is set per-route by usePageSEO) -->
<meta name="robots" content="index, follow" />
<!-- Structured Data (JSON-LD for SEO) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "React Bits",
"url": "https://reactbits.dev",
"description": "Free, open source React components for animated text, backgrounds, interactive cards and micro interactions. Explore live demos and copy the source.",
"image": "https://reactbits.dev/og.jpg",
"sameAs": ["https://github.com/DavidHDev/react-bits", "https://x.com/davidhaz"],
"author": {
"@type": "Person",
"name": "David Haz",
"url": "https://davidhaz.com"
},
"publisher": {
"@type": "Person",
"name": "David Haz",
"url": "https://davidhaz.com",
"logo": {
"@type": "ImageObject",
"url": "https://reactbits.dev/apple-touch-icon.png"
}
}
}
</script>
<title>React Bits — Free Animated React Components</title>
</head>
<body>
<div id="rb-boot-loader" role="status" aria-label="Loading React Bits">
<svg width="40" height="40" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M15.6317 0.571987C16.3759 0.228574 17.2363 0.0550841 18.033 0.38644L18.1922 0.459682L18.1942 0.460659L18.41 0.587612C18.8912 0.905222 19.2097 1.37902 19.407 1.8923C19.602 2.39947 19.6967 2.98342 19.7195 3.60226L19.7244 3.86886L19.7293 4.82101L17.825 4.83078L17.8201 3.87863L17.8045 3.47042C17.7767 3.09113 17.7136 2.79437 17.6297 2.57589C17.5217 2.29489 17.4024 2.19635 17.3289 2.15792L17.284 2.13937C17.1618 2.09871 16.9051 2.08256 16.4305 2.30148C15.8996 2.5465 15.2436 3.02482 14.5086 3.74874C13.7215 4.524 12.8888 5.53694 12.0692 6.73507C12.2359 6.73273 12.4038 6.73019 12.5721 6.73019C15.8011 6.73022 18.765 7.16566 20.9539 7.89523C22.0431 8.25833 22.9938 8.71183 23.6912 9.26144C24.3778 9.80264 24.9519 10.5493 24.952 11.4919C24.9519 12.3043 24.5214 12.9748 23.9715 13.4831C23.4218 13.9912 22.6749 14.416 21.824 14.7673L20.9432 15.1306L20.2166 13.3698L21.0975 13.0066C21.833 12.7029 22.3554 12.3832 22.6785 12.0847C23.0011 11.7865 23.0476 11.5861 23.0477 11.4919C23.0476 11.3827 22.9814 11.1272 22.5125 10.7575C22.0535 10.3958 21.3298 10.028 20.3514 9.70187C18.4042 9.05287 15.6534 8.6355 12.5721 8.63546C11.9839 8.63546 11.4073 8.65026 10.8465 8.67941C10.5662 9.16529 10.292 9.6716 10.0252 10.195C9.8036 10.6298 9.59539 11.0625 9.40021 11.49C9.59576 11.9183 9.80411 12.3521 10.0262 12.7878H10.0272L10.2918 13.2976C11.6276 15.814 13.1379 17.8859 14.5086 19.236C15.2432 19.9595 15.8989 20.4376 16.4295 20.6823C16.9715 20.9322 17.23 20.8755 17.3279 20.8259L17.4061 20.7712C17.4946 20.6921 17.6094 20.5285 17.699 20.1902C17.8183 19.7396 17.8576 19.0916 17.7781 18.2556C17.6198 16.5909 17.0111 14.39 15.9705 12.0017L16.8436 11.6218L17.7166 11.2409C18.809 13.7484 19.4914 16.1499 19.6746 18.0749C19.7658 19.0336 19.7391 19.9287 19.5408 20.6775C19.343 21.4244 18.9388 22.1417 18.1932 22.5222L18.1922 22.5232C17.3525 22.9505 16.4266 22.7778 15.6326 22.4118C14.8262 22.04 13.9897 21.3992 13.1717 20.5935C11.5669 19.0128 9.8785 16.6456 8.43536 13.8562C7.94269 15.2332 7.60957 16.5119 7.44415 17.611C7.29073 18.6308 7.29006 19.4422 7.40411 20.0153C7.52086 20.6015 7.71887 20.7763 7.81622 20.8259H7.8172L7.88947 20.8523C8.09827 20.9026 8.58562 20.8602 9.46173 20.239L10.2381 19.6882L11.3397 21.2419L10.5633 21.7927L10.3582 21.9323C9.31984 22.6214 8.06557 23.0899 6.95197 22.5222V22.5232C6.11192 22.0955 5.70676 21.2449 5.53595 20.3874C5.36259 19.5163 5.38948 18.4625 5.56036 17.3269C5.81724 15.6203 6.41817 13.6025 7.31818 11.49C6.99301 10.7266 6.7076 9.97508 6.46271 9.24679C5.85761 9.38078 5.298 9.53349 4.79279 9.70187C3.81426 10.028 3.09071 10.3958 2.63165 10.7575C2.16243 11.1274 2.09658 11.3827 2.0965 11.4919C2.09671 11.6513 2.25906 12.068 3.17462 12.5876L3.36798 12.6921L4.21271 13.1335L3.3299 14.822L2.48615 14.3806L2.2674 14.2614C1.17979 13.6487 0.192367 12.742 0.1922 11.4919C0.192288 10.5492 0.766185 9.80266 1.45294 9.26144C2.15046 8.7118 3.10094 8.25834 4.19025 7.89523C4.72343 7.71753 5.30301 7.55645 5.92072 7.41574C5.76557 6.80139 5.64509 6.21178 5.56134 5.65597C5.39035 4.52081 5.36283 3.46829 5.53595 2.59738C5.70654 1.7396 6.11162 0.888515 6.95197 0.460659V0.461635C7.83252 0.0128116 8.80234 0.2186 9.65021 0.63937L10.0057 0.831752L10.8279 1.31222L9.86603 2.95675L9.04376 2.47628L8.78009 2.33371C8.20699 2.05202 7.91997 2.1051 7.81622 2.15792V2.1589C7.71887 2.20847 7.52073 2.38226 7.40411 2.96847C7.29019 3.54153 7.29149 4.35303 7.44513 5.37277C7.52452 5.89955 7.64219 6.46785 7.79767 7.06808C8.41596 6.97652 9.06014 6.90151 9.72443 6.8464C10.8365 5.04912 12.0257 3.5201 13.1717 2.39132C13.9899 1.58545 14.8252 0.944189 15.6317 0.571987ZM17.7166 11.2409L15.9705 12.0017L15.5906 11.1286L17.3367 10.3679L17.7166 11.2409ZM8.4422 7.94406C7.87898 7.94428 7.42287 8.40036 7.42267 8.96359C7.42267 9.52698 7.87886 9.98388 8.4422 9.9841C9.00573 9.9841 9.46271 9.52712 9.46271 8.96359C9.46251 8.40023 9.00561 7.94406 8.4422 7.94406Z"
/>
</svg>
</div>
<!--rb-app-start-->
<div id="root"></div>
<!--rb-app-end-->
<script type="module" src="/src/main.jsx"></script>
</body>
</html>