1<!DOCTYPE html><!--te0FpRPNOfzGctX4uzMDR--><html lang="en"><head><meta charSet="utf-8"/><link rel="preconnect" href="/" crossorigin=""/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="https://fancycomponents.b-cdn.net/thumbnails/image-trail.jpg"/><link rel="preload" as="image" href="https://fancycomponents.b-cdn.net/thumbnails/text-highlighter.jpg"/><link rel="preload" as="image" href="https://fancycomponents.b-cdn.net/thumbnails/gravity.jpg"/><link rel="preload" as="image" href="https://fancycomponents.b-cdn.net/thumbnails/css-box.jpg"/><link rel="preload" as="image" href="https://fancycomponents.b-cdn.net/thumbnails/marquee-along-svg-path.jpg"/><link rel="stylesheet" href="/_next/static/chunks/229594cc5c6039b6.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/4faa7d2e5bb46393.js"/>
1<script src="/_next/static/chunks/248cba0fcb3874ed.js" async=""></script>
1<script src="/_next/static/chunks/cd57a3f83c4bc1bc.js" async=""></script>
1<script src="/_next/static/chunks/c645af7d6b65f73e.js" async=""></script>
1<script src="/_next/static/chunks/98057b1c5ebc8bd2.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-1de74f8c41ab0c6c.js" async=""></script>
1<script src="/_next/static/chunks/54da8384fbc93525.js" async=""></script>
1<script src="/_next/static/chunks/ff1a16fafef87110.js" async=""></script>
1<script src="/_next/static/chunks/247eb132b7f7b574.js" async=""></script>
1<script src="/_next/static/chunks/66f77dae080ffac7.js" async=""></script>
1<script src="/_next/static/chunks/746fbbd383fd5ed8.js" async=""></script>
1<script src="/_next/static/chunks/69a2ce2b290d86fb.js" async=""></script>
1<script src="/_next/static/chunks/6c0b278e0b43d24b.js" async=""></script>
1<script src="/_next/static/chunks/0a0c30249a382691.js" async=""></script>
1<script src="/_next/static/chunks/2fb8604b2aa79887.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>Fancy Components</title><meta name="description" content="Ready to use, fancy React components to make the web fun again. Free & Open Source."/><link rel="author" href="https://danielpetho.com"/><meta name="author" content="Daniel Petho"/><link rel="manifest" href="/site.webmanifest"/><meta name="keywords" content="React,Typescript,Tailwind CSS,Microinteractions,Motion,Creative developers"/><meta name="creator" content="danielpetho"/><meta property="og:title" content="Fancy Components"/><meta property="og:description" content="Ready to use, fancy React components to make the web fun again. Free & Open Source."/><meta property="og:url" content="https://fancycomponents.dev"/><meta property="og:site_name" content="Fancy Components"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://fancycomponents.dev/og.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Fancy Components"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@nonzeroexitcode"/><meta name="twitter:title" content="Fancy Components"/><meta name="twitter:description" content="Ready to use, fancy React components to make the web fun again. Free & Open Source."/><meta name="twitter:image" content="https://fancycomponents.dev/og.jpg"/><link rel="shortcut icon" href="/favicon-16x16.png"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
1<script defer="" src="https://cloud.umami.is/script.js" data-website-id="dbbf9969-1099-440a-8dcd-84616691e48a"></script>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="font-overused-grotesk bg-background antialiased flex items-center justify-center w-full text-foreground [font-synthesis-weight:none]"><div hidden=""><!--$--><!--/$--></div>
1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
1<main class="h-full w-full max-w-(--breakpoint-2xl) flex flex-col items-center justify-center"><section class="w-full h-screen overflow-hidden md:overflow-clip overscroll-none flex flex-col items-center justify-center relative"><div class="absolute top-0 left-0 w-full h-full"><div class="absolute will-change-transform top-[15%] left-[2%] md:top-[25%] md:left-[5%]"><a class="-rotate-[3deg] inline-block rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue" href="/docs/components/blocks/image-trail"><div class="relative overflow-hidden w-16 h-12 sm:w-24 sm:h-16 md:w-28 md:h-20 lg:w-32 lg:h-24 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl" style="opacity:0"><img src="https://fancycomponents.b-cdn.net/thumbnails/image-trail.jpg" alt="Thumbnail" class="absolute inset-0 w-full h-full object-cover"/><video src="https://fancycomponents.b-cdn.net/demos/image-trail.mp4" class="absolute inset-0 w-full h-full object-cover" autoPlay="" muted="" loop="" poster="https://fancycomponents.b-cdn.net/thumbnails/image-trail.jpg" playsInline=""></video></div></a></div><div class="absolute will-change-transform top-[0%] left-[8%] md:top-[6%] md:left-[11%]"><a class="inline-block rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue" href="/docs/components/text/text-highlighter"><div class="relative overflow-hidden w-40 h-28 sm:w-48 sm:h-36 md:w-56 md:h-44 lg:w-60 lg:h-48 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl" style="opacity:0"><img src="https://fancycomponents.b-cdn.net/thumbnails/text-highlighter.jpg" alt="Thumbnail" class="absolute inset-0 w-full h-full object-cover"/><video src="https://fancycomponents.b-cdn.net/demos/text-highlighter.mp4" class="absolute inset-0 w-full h-full object-cover" autoPlay="" muted="" loop="" poster="https://fancycomponents.b-cdn.net/thumbnails/text-highlighter.jpg" playsInline=""></video></div></a></div><div class="absolute will-change-transform top-[90%] left-[6%] md:top-[80%] md:left-[8%]"><a class="-rotate-[4deg] inline-block rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue" href="/docs/components/text/gravity"><div class="relative overflow-hidden w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 lg:w-64 lg:h-64 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl" style="opacity:0"><img src="https://fancycomponents.b-cdn.net/thumbnails/gravity.jpg" alt="Thumbnail" class="absolute inset-0 w-full h-full object-cover"/><video src="https://fancycomponents.b-cdn.net/demos/gravity.mp4" class="absolute inset-0 w-full h-full object-cover" autoPlay="" muted="" loop="" poster="https://fancycomponents.b-cdn.net/thumbnails/gravity.jpg" playsInline=""></video></div></a></div><div class="absolute will-change-transform top-[0%] left-[87%] md:top-[2%] md:left-[83%]"><a class="rotate-[6deg] inline-block rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue" href="/docs/components/blocks/css-box"><div class="relative overflow-hidden w-40 h-36 sm:w-48 sm:h-44 md:w-60 md:h-52 lg:w-64 lg:h-56 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl" style="opacity:0"><img src="https://fancycomponents.b-cdn.net/thumbnails/css-box.jpg" alt="Thumbnail" class="absolute inset-0 w-full h-full object-cover"/><video src="https://fancycomponents.b-cdn.net/demos/css-box.mp4" class="absolute inset-0 w-full h-full object-cover" autoPlay="" muted="" loop="" poster="https://fancycomponents.b-cdn.net/thumbnails/css-box.jpg" playsInline=""></video></div></a></div><div class="absolute will-change-transform top-[78%] left-[83%] md:top-[68%] md:left-[83%]"><a class="rotate-[19deg] inline-block rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue" href="/docs/components/blocks/marquee-along-svg-path"><div class="relative overflow-hidden w-44 h-44 sm:w-64 sm:h-64 md:w-72 md:h-72 lg:w-80 lg:h-80 object-cover hover:scale-105 duration-200 cursor-pointer transition-transform shadow-2xl rounded-xl" style="opacity:0"><img src="https://fancycomponents.b-cdn.net/thumbnails/marquee-along-svg-path.jpg" alt="Thumbn
1ail" class="absolute inset-0 w-full h-full object-cover"/><video src="https://fancycomponents.b-cdn.net/demos/marquee-along-svg-path.mp4" class="absolute inset-0 w-full h-full object-cover" autoPlay="" muted="" loop="" poster="https://fancycomponents.b-cdn.net/thumbnails/marquee-along-svg-path.jpg" playsInline=""></video></div></a></div></div><div class=" flex flex-col justify-center items-center w-[250px] sm:w-[300px] md:w-[500px] lg:w-[700px] z-50 pointer-events-auto"><h1 class="text-3xl sm:text-5xl md:text-7xl lg:text-8xl text-center w-full justify-center items-center flex-col flex whitespace-pre leading-tight font-calendas tracking-tight space-y-1 md:space-y-4" style="opacity:0;transform:translateY(20px)"><span>Make your </span><span class="flex whitespace-pre"><span class="flex whitespace-pre">website<!-- --> </span><p class="flex flex-wrap whitespace-pre-wrap overflow-hidden pr-3 text-blue dark:text-blue-500 py-0 pb-2 md:pb-4 rounded-xl"><span class="sr-only">fancy</span><span class="flex flex-wrap" aria-hidden="true"><span class="inline-flex"><span class=""><span class="inline-block" style="opacity:1;transform:none">f</span></span><span class=""><span class="inline-block" style="opacity:1;transform:none">a</span></span><span class=""><span class="inline-block" style="opacity:1;transform:none">n</span></span><span class=""><span class="inline-block" style="opacity:1;transform:none">c</span></span><span class=""><span class="inline-block" style="opacity:1;transform:none">y</span></span></span></span></p></span></h1><p class="text-sm sm:text-lg md:text-xl lg:text-2xl text-center font-overused-grotesk pt-4 sm:pt-8 md:pt-10 lg:pt-12" style="opacity:0;transform:translateY(20px)">with a growing library of ready-to-use react components & microinteractions. free & open source.</p><div class="flex flex-row justify-center space-x-4 items-center mt-10 sm:mt-16 md:mt-20 lg:mt-20 text-xs"><a class="w-28 sm:w-32 md:w-36 lg:w-40 sm:text-base md:text-lg lg:text-xl font-medium tracking-tight text-background bg-foreground px-3 py-1.5 sm:px-4 sm:py-2 md:px-4 md:py-2 lg:px-5 lg:py-2.5 rounded-lg md:rounded-xl z-20 shadow-2xl whitespace-nowrap cursor-pointer inline-block text-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-foreground" tabindex="0" style="opacity:0;transform:translateY(20px)" href="/docs/introduction">Check docs <span class="font-serif ml-1">â</span></a><a class="w-28 sm:w-32 md:w-36 lg:w-40 sm:text-base md:text-lg lg:text-xl font-medium tracking-tight text-white bg-blue dark:bg-blue-500 px-3 py-1.5 sm:px-4 sm:py-2 md:px-4 md:py-2 lg:px-5 lg:py-2.5 rounded-lg md:rounded-xl z-20 shadow-2xl whitespace-nowrap cursor-pointer inline-block text-center focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue" tabindex="0" style="opacity:0;transform:translateY(20px)" href="https://github.com/danielpetho/fancy">â
on GitHub</a></div></div></section><!--$--><!--/$--></main><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$-->
1<script src="/_next/static/chunks/4faa7d2e5bb46393.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[27423,[\"/_next/static/chunks/54da8384fbc93525.js\"],\"ThemeProvider\"]\n3:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n5:I[29306,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/66f77dae080ffac7.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\"],\"default\"]\n6:I[57215,[\"/_next/static/chunks/54da8384fbc93525.js\"],\"SpeedInsights\"]\n7:I[51236,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/0a0c30249a382691.js\",\"/_next/static/chunks/2fb8604b2aa79887.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\"],\"LandingHero\"]\ne:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n:HL[\"/_next/static/chunks/229594cc5c6039b6.css\",\"style\"]\n:HC[\"/\",\"\"]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"te0FpRPNOfzGctX4uzMDR\",\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/229594cc5c6039b6.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/54da8384fbc93525.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"defer\":true,\"src\":\"https://cloud.umami.is/script.js\",\"data-website-id\":\"dbbf9969-1099-440a-8dcd-84616691e48a\"}]}],[\"$\",\"body\",null,{\"className\":\"font-overused-grotesk bg-background antialiased flex items-center justify-center w-full text-foreground [font-synthesis-weight:none]\",\"children\":[[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"disableTransitionOnChange\":true,\"children\":[\"$\",\"main\",null,{\"className\":\"h-full w-full max-w-(--breakpoint-2xl) flex flex-col items-center justify-center\",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L5\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"$L6\",null,{}]]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L7\",null,{\"allComps\":[{\"name\":\"animated-gradient-svg\",\"category\":\"background\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/animated-gradient-svg.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/animated-gradient-svg.mp4\"}},{\"name\":\"pixel-trail\",\"category\":\"background\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/pixel-trail.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/pixel-trail.mp4\"}},{\"name\":\"circling-elements\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/circling-elements.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/circling-elements.mp4\"}},{\"name\":\"css-box\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/css-box.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/css-box.mp4\"}},{\"name\":\"drag-elements\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/drag-elements.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/drag-elements.mp4\"}},{\"name\":\"float\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/float.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/float.mp4\"}},{\"name\":\"marquee-along-svg-path\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/marquee-along-svg-path.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/marquee-along-svg-path.mp4\"}},{\"name\":\"media-between-text\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/media-between-text.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/media-between-text.mp4\"}},{\"name\":\"screensaver\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/screensaver.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/screensaver.mp4\"}},{\"name\":\"simple-marquee\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/simple-marquee.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/simple-marquee.mp4\"}},{\"name\":\"stacking-cards\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/stacking-cards.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/stacking-cards.mp4\"}},{\"name\":\"sticky-footer\",\"category\":\"blocks\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/sticky-footer.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/sticky-footer.mp4\"}},{\"name\":\"box-carousel\",\"category\":\"carousel\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/box-carousel.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/box-carousel.mp4\"}},{\"name\":\"gooey-svg-filter\",\"category\":\"filter\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/gooey-svg-filter.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/gooey-svg-filter.mp4\"}},{\"name\":\"pixelate-svg-filter\",\"category\":\"filter\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/pixelate-svg-filter.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/pixelate-svg-filter.mp4\"}},{\"name\":\"image-trail\",\"category\":\"image\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/image-trail.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/image-trail.mp4\"}},{\"name\":\"parallax-floating\",\"category\":\"image\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/parallax-floating.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/parallax-floating.mp4\"}},{\"name\":\"cursor-attractor-and-gravity\",\"category\":\"physics\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/cursor-attractor-and-gravity.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/cursor-attractor-and-gravity.mp4\"}},{\"name\":\"elastic-line\",\"category\":\"physics\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/elastic-line.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/elastic-line.mp4\"}},{\"name\":\"gravity\",\"category\":\"physics\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/gravity.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/gravity.mp4\"}},{\"name\":\"basic-number-ticker\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/basic-number-ticker.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/basic-number-ticker.mp4\"}},{\"name\":\"breathing-text\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/breathing-text.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/breathing-text.mp4\"}},{\"name\":\"letter-3d-swap\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/letter-3d-swap.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/letter-3d-swap.mp4\"}},{\"name\":\"letter-swap\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/letter-swap.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/letter-swap.mp4\"}},{\"name\":\"random-letter-swap\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/random-letter-swap.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/random-letter-swap.mp4\"}},{\"name\":\"scramble-hover\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/scramble-hover.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/scramble-hover.mp4\"}},{\"name\":\"scramble-in\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/scramble-in.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/scramble-in.mp4\"}},{\"name\":\"scroll-and-swap\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/scroll-and-swap.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/scroll-and-swap.mp4\"}},{\"name\":\"text-along-path\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/text-along-path.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/text-along-path.mp4\"}},{\"name\":\"text-cursor-proximity\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/text-cursor-proximity.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/text-cursor-proximity.mp4\"}},{\"name\":\"text-highlighter\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/text-highlighter.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/text-highlighter.mp4\"}},{\"name\":\"text-rotate\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/text-rotate.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/text-rotate.mp4\"}},{\"name\":\"typewriter\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/typewriter.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/typewriter.mp4\"}},{\"name\":\"underline-animation\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/underline-animation.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/underline-animation.mp4\"}},{\"name\":\"underline-to-background\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/underline-to-background.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/underline-to-background.mp4\"}},{\"name\":\"variable-font-and-cursor\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/variable-font-and-cursor.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/variable-font-and-cursor.mp4\"}},{\"name\":\"variable-font-cursor-proximity\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/variable-font-cursor-proximity.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/variable-font-cursor-proximity.mp4\"}},{\"name\":\"variable-font-hover-by-letter\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/variable-font-hover-by-letter.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/variable-font-hover-by-letter.mp4\"}},{\"name\":\"variable-font-hover-by-random-letter\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/variable-font-hover-by-random-letter.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/variable-font-hover-by-random-letter.mp4\"}},{\"name\":\"vertical-cut-reveal\",\"category\":\"text\",\"thumbnail\":{\"url\":\"https://fancycomponents.b-cdn.net/thumbnails/vertical-cut-reveal.jpg\"},\"demo\":{\"url\":\"https://fancycomponents.b-cdn.net/demos/vertical-cut-reveal.mp4\"}}]}],[\"$L8\",\"$L9\",\"$La\",\"$Lb\"],\"$Lc\"]}],{}
1,null,false,false]},null,false,false],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"S\":true}\n"])</script>
1<script>self.__next_f.push([1,"f:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"MetadataBoundary\"]\n8:[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"async\":true,\"nonce\":\"$undefined\"}]\n9:[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0a0c30249a382691.js\",\"async\":true,\"nonce\":\"$undefined\"}]\na:[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2fb8604b2aa79887.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nb:[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"async\":true,\"nonce\":\"$undefined\"}]\nc:[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$@13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$@15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script>
1<script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
1<script>self.__next_f.push([1,"16:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"IconMark\"]\n"])</script>
1<script>self.__next_f.push([1,"15:[[\"$\",\"title\",\"0\",{\"children\":\"Fancy Components\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Ready to use, fancy React components to make the web fun again. Free \u0026 Open Source.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://danielpetho.com\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Daniel Petho\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"React,Typescript,Tailwind CSS,Microinteractions,Motion,Creative developers\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"danielpetho\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Fancy Components\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Ready to use, fancy React components to make the web fun again. Free \u0026 Open Source.\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:url\",\"content\":\"https://fancycomponents.dev\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:site_name\",\"content\":\"Fancy Components\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image\",\"content\":\"https://fancycomponents.dev/og.jpg\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:alt\",\"content\":\"Fancy Components\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:creator\",\"content\":\"@nonzeroexitcode\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:title\",\"content\":\"Fancy Components\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:description\",\"content\":\"Ready to use, fancy React components to make the web fun again. Free \u0026 Open Source.\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image\",\"content\":\"https://fancycomponents.dev/og.jpg\"}],[\"$\",\"link\",\"22\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon-16x16.png\"}],[\"$\",\"link\",\"23\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"24\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L16\",\"25\",{}]]\n"])</script>
1<script>self.__next_f.push([1,"11:null\n"])</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.