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="stylesheet" href="/_next/static/chunks/229594cc5c6039b6.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/18631dbe8988b265.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/chunks/630806dca73bf993.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/4a816b10b9e85655.js" async=""></script>
1<script src="/_next/static/chunks/b3896c44f5cef471.js" async=""></script>
1<script src="/_next/static/chunks/b8bf702601f7dd5c.js" async=""></script>
1<script src="/_next/static/chunks/de28e51c2137b496.js" async=""></script>
1<script src="/_next/static/chunks/68eaf83e7cd80399.js" async=""></script>
1<script src="/_next/static/chunks/fa10315e83fd08d1.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>Introduction - 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="Introduction"/><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/introduction"/><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="article"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@nonzeroexitcode"/><meta name="twitter:title" content="Introduction"/><meta name="twitter:description" content="null"/><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"><div class="relative w-full"><header class=" w-full flex justify-center items-center"><div class="h-20 px-4 z-50 flex mx-4 mt-4 bg-background flex-row w-full space-x-2 items-center rounded-2xl border-border border "><button class="inline-flex items-center justify-center whitespace-nowrap font-medium focus-ring disabled:pointer-events-none disabled:opacity-50 hover:cursor-pointer transition-[colors,background-color] duration-300 ease-out hover:text-accent-foreground h-10 rounded-lg py-2 mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 lg:hidden group" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_R_b5udb_" data-state="closed"><svg stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"><path d="M3 5H11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:[stroke-width:3] transition-all duration-300 ease-out"></path><path d="M3 12H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:[stroke-width:3] transition-all duration-300 delay-100 ease-out"></path><path d="M3 19H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:[stroke-width:3] transition-all duration-300 delay-200 ease-out"></path></svg><span class="sr-only">Toggle Menu</span></button><nav class="flex items-center justify-between w-full gap-x-4"><div class="flex flex-row items-center gap-x-12"><a class="flex items-center gap-x-2 focus-primary" href="/"><p class=" text-2xl px-2 pb-1.5 tracking-tight font-calendas scale-y-[120%] align-text-top ">fancy components*</p></a><div class="flex-row gap-x-8 text-lg font-regular items-end hidden md:flex"><a class="focus-primary" href="/docs/introduction"><span class="inline-flex font-normal border-box after:content-[attr(data-text)] after:font-black after:pointer-none after:overflow-hidden after:select-none after:invisible after:h-0 duration-300 transition-all hover:font-semibold flex-col ease-out text-center" data-text="Docs">Docs</span></a><a class="focus-primary" href="/components"><span class="inline-flex font-normal border-box after:content-[attr(data-text)] after:font-black after:pointer-none after:overflow-hidden after:select-none after:invisible after:h-0 duration-300 transition-all hover:font-semibold flex-col ease-out text-center" data-text="Components">Components</span></a></div></div><div class="flex-row gap-x-4 sm:gap-x-8 text-xl font-regular flex items-center"><div class="hidden sm:block"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search documentation (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search docs...</span></span><span class="DocSearch-Button-Keys"></span></button></div><a href="https://github.com/danielpetho/fancy" class="block lg:hidden focus-primary text-center"><svg viewBox="0 0 438.549 438.549" class="w-[18px] h-[18px]"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19
16.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg></a><a href="https://github.com/danielpetho/fancy" class="hidden lg:block focus-primary"><span class="inline-flex font-normal border-box after:content-[attr(data-text)] after:font-black after:pointer-none after:overflow-hidden after:select-none after:invisible after:h-0 duration-300 transition-all hover:font-semibold flex-col ease-out text-center" data-text="Github">Github</span></a><button class="whitespace-nowrap text-sm font-medium focus-ring disabled:pointer-events-none disabled:opacity-50 hover:cursor-pointer transition-[colors,background-color] duration-300 ease-out hover:text-accent-foreground px-4 rounded-lg py-2 flex items-center justify-center w-8 h-8 hover:bg-transparent text-foreground relative group"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun absolute h-[19px] w-[19px] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:[stroke-width:3px] duration-300 ease-out" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon absolute h-[19px] w-[19px] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:[stroke-width:3px] duration-300 ease-out" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg><span class="sr-only">Toggle theme</span></button></div></nav></div></header><div><div class="items-start lg:grid lg:grid-cols-[340px_minmax(0,1fr)] "><aside class="sticky top-0 pb-4 z-30 hidden h-[calc(100vh-6rem)] w-full shrink-0 lg:block pt-4 pl-4 "><div class="rounded-2xl bg-background h-full border-border border"><div dir="ltr" class="relative h-full" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="h-full w-full rounded-[inherit]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"><div class="w-full h-full py-6"><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Getting Started<!-- --> <span class="align-super text-sm"></span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/introduction"><span class="inline-block no-underline duration-300 transition-colors ease-out text-foreground" style="font-variation-settings:'wght' 500;color:var(--foreground)">Introduction</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/installation"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Installation</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/components"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Components</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/changelog"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Changelog</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/llms.txt"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">llms.txt</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Text<!-- --> <span class="align-super text-sm">(20)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/letter-swap"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Letter Swap Hover</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/letter-3d-swap"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Letter 3D Swap</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/random-letter-swap"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Random Letter Swap Hover</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/vertical-cut-reveal"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Vertical Cut Reveal</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/text-rotate"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Text Rotate</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/variable-font-hover-by-letter"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Variable Font Hover By Letter</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/variable-font-hover-by-random-letter"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Variable Font Hover By Random Letter</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/scroll-and-swap"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Scroll And Swap</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/text-cursor-proximity"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Text Cursor Proximity</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/variable-font-and-cursor"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Variable Font & Cursor</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/variable-font-cursor-proximity"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Variable Font Cursor Proximity</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/breathing-text"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Breathing Text</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/u
1nderline-animation"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Underline Animation</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/underline-to-background"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Underline To Background</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/basic-number-ticker"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Basic Number Ticker</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/typewriter"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Typewriter</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/scramble-hover"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Scramble Hover</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/text-highlighter"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Text Highlighter</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/scramble-in"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Scramble In</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/text/text-along-path"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Text Along Path</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Carousel<!-- --> <span class="align-super text-sm">(1)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/carousel/box-carousel"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Box Carousel</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Background<!-- --> <span class="align-super text-sm">(2)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/background/animated-gradient-svg"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Animated Gradient With SVG</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/background/pixel-trail"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Pixel Trail</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Physics<!-- --> <span class="align-super text-sm">(3)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/physics/elastic-line"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Elastic Line</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/physics/gravity"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Gravity</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/physics/cursor-attractor-and-gravity"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Cursor Attractor & Gravity</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Image<!-- --> <span class="align-super text-sm">(2)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/image/image-trail"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Image Trail</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/image/parallax-floating"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Parallax Floating</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Filter<!-- --> <span class="align-super text-sm">(2)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/filter/gooey-svg-filter"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Gooey SVG Filter</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/filter/pixelate-svg-filter"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Pixelate SVG Filter</span></a></p></div></div><div class="mb-4 pb-3 border-black px-6"><h4 class="text-2xl font-medium mb-2">Blocks<!-- --> <span class="align-super text-sm">(10)</span></h4><div class="flex flex-col space-y-2"><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/drag-elements"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Drag Elements</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/circling-elements"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Circling Elements</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/media-between-text"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Media Between Text</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/css-box"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">CSS Box</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/screensaver"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Screensaver</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/sticky-footer"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Sticky Footer</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/float"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Float</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/stacking-cards"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Stacking Cards</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/simple-marquee"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Simple Marquee</span></a></p><p><a class="inline-block focus-primary" target="" rel="" href="/docs/components/blocks/marquee-along-svg-path"><span class="inline-block no-underline duration-300 transition-colors ease-out text-muted-foreground" style="font-variation-settings:'wght' 400;color:hsl(var(--muted-foreground))">Marquee Along SVG Path</span></a></p></div></div></div></div></div></div></div></aside><div class="p-4"><main class="xl:grid xl:grid-cols-[minmax(0,1fr)_340px] justify-center w-full"><div class="rounded-2xl bg-background py-6 lg:gap-10 lg:py-6 border-border border"><div data-algolia-crawl="true" class="px-4 md:px-8 flex flex-col"><div class="flex items-start justify-between gap-4"><div class="pb-6 flex items-center space-x-1 text-[13px] md:text-base text-muted-foreground"><div class="font-medium whitespace-nowrap">Docs</div><span class="font-serif">â</span><div data-algolia-level-0="true" class="font-medium text-muted-foreground">Getting Started</div><span class="font-serif">â</span><div class="font-medium text-foreground">Introduction</div></div><div class="flex-shrink-0"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm cursor-pointer font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-blue disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 w-8" type="button" id="radix-_R_hanpfl5udb_" aria-haspopup="menu" aria-expanded="false" data-state="closed"><div class="relative w-4 h-4"><div class="absolute inset-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-4 h-4" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></div><div class="absolute inset-0 flex items-center justify-center"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
1ox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12 9 17L20 6"></path></svg></div></div></button></div></div><div class=""><h1 class="scroll-m-20 text-3xl text-pretty md:text-5xl font-calendas tracking-tight">Introduction</h1></div><div class=""></div><div class="mb-12 pt-8 space-y-6"><p class="text-base md:text-lg text-pretty">Fancy Components is a collection of fun and weird, ready-to-use components and microinteractions built (mainly) with:</p> 2<ul class="list-disc ml-3 list-outside space-y-3"> 3<li class="marker:text-sm [&>ul]:marker:text-[10px] [&>ol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4">React</li> 4<li class="marker:text-sm [&>ul]:marker:text-[10px] [&>ol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4">TypeScript</li> 5<li class="marker:text-sm [&>ul]:marker:text-[10px] [&>ol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4">Tailwind CSS</li> 6<li class="marker:text-sm [&>ul]:marker:text-[10px] [&>ol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4">Motion (Formerly Framer Motion)</li> 7</ul> 8<h2 id="why" class="text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight">Why</h2><hr class="mt-2.5"/> 9<p class="text-base md:text-lg text-pretty">The web UI landscape has become increasingly standardized. While this standardization has brought many benefits â improved accessibility, better user experiences, and easier development â it has also led to a certain homogeneity. The web, in many ways, has become a bit... boring.</p> 10<p class="text-base md:text-lg text-pretty">The aim of this project is to somewhat inject some playfulness to the web, by collecting the weird, fun, and sometimes useless ui magic that you can see in the wild.</p> 11<p class="text-base md:text-lg text-pretty">Now you might ask, then why create a copy-and-paste-able collection of components? The goal here is to re-create the most popular components from the award-winning sites, so you can either use them in your project by adding your spin on top of them, or just to provide the code as an inspiration for creating your own components.</p> 12<h2 id="getting-started" class="text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight">Getting Started</h2><hr class="mt-2.5"/> 13<p class="text-base md:text-lg text-pretty">To start using the components in your project, check out the <a class="font-medium text-base md:text-lg text-blue hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300 duration-300 ease-out transition-[color,background-color,opacity] items-center leading-0 rounded-sm focus-primary" href="/docs/installation">Installation</a> guide.</p> 14<h2 id="open-source-&-free" class="text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight">Open Source & Free</h2><hr class="mt-2.5"/> 15<p class="text-base md:text-lg text-pretty">Fancy Components is open source and free to use. You can use it for personal or commercial projects.</p> 16<p class="text-base md:text-lg text-pretty">Contributions are welcome! If you have any ideas or suggestions, please feel free to open an issue or submit a pull request. A detailed contribution guide will be available soon.</p></div><div data-algolia-ignore="true" class=""><div class="flex flex-row items-center justify-end text"><a class="flex flex-row hover:bg-muted/60 duration-300 ease-out transition-[colors,background-color] items-center justify-center rounded-xl pr-2 pl-6 py-2 bg-muted focus-ring" tabindex="0" href="/docs/installation"><span class="truncate hidden sm:block">Installation</span><span class="font-serif h-7 w-7 sm:ml-2">â</span></a></div></div></div></div><div class="hidden text-base xl:block sticky top-4 pt-0 pb-4 h-[calc(100vh-8rem)] pl-4"><div class="bg-background rounded-2xl border"><div dir="ltr" class="relative" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style>[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}</style><div data-radix-scroll-area-viewport="" class="h-full w-full rounded-[inherit]" style="overflow-x:hidden;overflow-y:hidden"><div style="min-width:100%;display:table"></div></div></div></div></div></main><!--$--><!--/$--></div></div></div><footer class="flex items-center justify-center w-full h-20 mb-4"><div class="flex w-full mx-4 rounded-2xl bg-background items-center justify-center h-full border border-border"><div class="flex items-center justify-center mx-4 "><p>built with ð by<!-- -->
16 <a href="https://twitter.com/nonzeroexitcode" class="cursor-pointer no-underline text-blue hover:text-blue-400 dark:hover:text-blue-300 dark:text-blue-400 duration-300 transition-[colors,text-color] ease-out inline-flex items-center font-medium focus-ring rounded-lg">nonzeroexitcode<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link ml-1 mt-0.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></p></div></div></footer></div></main><!--$--><!--/$-->
16<script src="/_next/static/chunks/4faa7d2e5bb46393.js" id="_R_" async=""></script>
16<script>(self.__next_f=self.__next_f||[]).push([0])</script>
16<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[93963,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\"],\"Header\"]\n8:I[59684,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"/_next/static/chunks/de28e51c2137b496.js\",\"/_next/static/chunks/68eaf83e7cd80399.js\",\"/_next/static/chunks/fa10315e83fd08d1.js\"],\"ScrollArea\"]\n9:I[21155,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\"],\"DocsSidebarNav\"]\nf:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"default\"]\n:HL[\"/_next/static/chunks/229594cc5c6039b6.css\",\"style\"]\n:HL[\"/_next/static/chunks/18631dbe8988b265.css\",\"style\"]\n:HC[\"/\",\"\"]\n:HL[\"/_next/static/chunks/630806dca73bf993.css\",\"style\"]\n"])</script>
16<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"te0FpRPNOfzGctX4uzMDR\",\"c\":[\"\",\"docs\",\"introduction\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"introduction\",\"oc\"],{\"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\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/18631dbe8988b265.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/4a816b10b9e85655.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/b3896c44f5cef471.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"relative w-full\",\"children\":[[\"$\",\"$L7\",null,{}],[\"$\",\"div\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"items-start lg:grid lg:grid-cols-[340px_minmax(0,1fr)] \",\"children\":[[\"$\",\"aside\",null,{\"className\":\"sticky top-0 pb-4 z-30 hidden h-[calc(100vh-6rem)] w-full shrink-0 lg:block pt-4 pl-4 \",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-2xl bg-background h-full border-border border\",\"children\":[\"$\",\"$L8\",null,{\"className\":\"h-full\",\"children\":[\"$\",\"$L9\",null,{\"items\":[{\"title\":\"Getting Started\",\"items\":[{\"title\":\"Introduction\",\"href\":\"/docs/introduction\",\"items\":[]},{\"title\":\"Installation\",\"href\":\"/docs/installation\",\"items\":[]},{\"title\":\"Components\",\"href\":\"/components\",\"items\":[]},{\"title\":\"Changelog\",\"href\":\"/docs/changelog\",\"items\":[]},{\"title\":\"llms.txt\",\"href\":\"/llms.txt\",\"items\":[]}]},{\"title\":\"Text\",\"href\":\"/docs/components/text\",\"items\":[{\"title\":\"Letter Swap Hover\",\"href\":\"/docs/components/text/letter-swap\",\"items\":[]},{\"title\":\"Letter 3D Swap\",\"href\":\"/docs/components/text/letter-3d-swap\",\"items\":[]},{\"title\":\"Random Letter Swap Hover\",\"href\":\"/docs/components/text/random-letter-swap\",\"items\":[]},{\"title\":\"Vertical Cut Reveal\",\"href\":\"/docs/components/text/vertical-cut-reveal\",\"items\":[]},{\"title\":\"Text Rotate\",\"href\":\"/docs/components/text/text-rotate\",\"items\":[]},{\"title\":\"Variable Font Hover By Letter\",\"href\":\"/docs/components/text/variable-font-hover-by-letter\",\"items\":[]},{\"title\":\"Variable Font Hover By Random Letter\",\"href\":\"/docs/components/text/variable-font-hover-by-random-letter\",\"items\":[]},{\"title\":\"Scroll And Swap\",\"href\":\"/docs/components/text/scroll-and-swap\",\"items\":[]},{\"title\":\"Text Cursor Proximity\",\"href\":\"/docs/components/text/text-cursor-proximity\",\"items\":[]},{\"title\":\"Variable Font \u0026 Cursor\",\"href\":\"/docs/components/text/variable-font-and-cursor\",\"
16items\":[]},{\"title\":\"Variable Font Cursor Proximity\",\"href\":\"/docs/components/text/variable-font-cursor-proximity\",\"items\":[]},{\"title\":\"Breathing Text\",\"href\":\"/docs/components/text/breathing-text\",\"items\":[]},{\"title\":\"Underline Animation\",\"href\":\"/docs/components/text/underline-animation\",\"items\":[]},{\"title\":\"Underline To Background\",\"href\":\"/docs/components/text/underline-to-background\",\"items\":[]},{\"title\":\"Basic Number Ticker\",\"href\":\"/docs/components/text/basic-number-ticker\",\"items\":[]},{\"title\":\"Typewriter\",\"href\":\"/docs/components/text/typewriter\",\"items\":[]},{\"title\":\"Scramble Hover\",\"href\":\"/docs/components/text/scramble-hover\",\"items\":[]},{\"title\":\"Text Highlighter\",\"href\":\"/docs/components/text/text-highlighter\",\"items\":[]},{\"title\":\"Scramble In\",\"href\":\"/docs/components/text/scramble-in\",\"items\":[]},{\"title\":\"Text Along Path\",\"href\":\"/docs/components/text/text-along-path\",\"items\":[]}]},{\"title\":\"Carousel\",\"href\":\"/docs/components/carousel\",\"items\":[{\"title\":\"Box Carousel\",\"href\":\"/docs/components/carousel/box-carousel\",\"items\":[]}]},{\"title\":\"Background\",\"href\":\"/docs/components/background\",\"items\":[{\"title\":\"Animated Gradient With SVG\",\"href\":\"/docs/components/background/animated-gradient-svg\",\"items\":[]},{\"title\":\"Pixel Trail\",\"href\":\"/docs/components/background/pixel-trail\",\"items\":[]}]},{\"title\":\"Physics\",\"href\":\"/docs/components/physics\",\"items\":[{\"title\":\"Elastic Line\",\"href\":\"/docs/components/physics/elastic-line\",\"items\":[]},{\"title\":\"Gravity\",\"href\":\"/docs/components/physics/gravity\",\"items\":[]},{\"title\":\"Cursor Attractor \u0026 Gravity\",\"href\":\"/docs/components/physics/cursor-attractor-and-gravity\",\"items\":[]}]},{\"title\":\"Image\",\"href\":\"/docs/components/image\",\"items\":[{\"title\":\"Image Trail\",\"href\":\"/docs/components/image/image-trail\",\"items\":[]},{\"title\":\"Parallax Floating\",\"href\":\"/docs/components/image/parallax-floating\",\"items\":[]}]},{\"title\":\"Filter\",\"href\":\"/docs/components/filter\",\"items\":[{\"title\":\"Gooey SVG Filter\",\"href\":\"/docs/components/filter/gooey-svg-filter\",\"items\":[]},{\"title\":\"Pixelate SVG Filter\",\"href\":\"/docs/components/filter/pixelate-svg-filter\",\"items\":[]}]},{\"title\":\"Blocks\",\"href\":\"/docs/components/blocks\",\"items\":[{\"title\":\"Drag Elements\",\"href\":\"/docs/components/blocks/drag-elements\",\"items\":[]},{\"title\":\"Circling Elements\",\"href\":\"/docs/components/blocks/circling-elements\",\"items\":[]},{\"title\":\"Media Between Text\",\"href\":\"/docs/components/blocks/media-between-text\",\"items\":[]},{\"title\":\"CSS Box\",\"href\":\"/docs/components/blocks/css-box\",\"items\":[]},{\"title\":\"Screensaver\",\"href\":\"/docs/components/blocks/screensaver\",\"items\":[]},{\"title\":\"Sticky Footer\",\"href\":\"/docs/components/blocks/sticky-footer\",\"items\":[]},{\"title\":\"Float\",\"href\":\"/docs/components/blocks/float\",\"items\":[]},{\"title\":\"Stacking Cards\",\"href\":\"/docs/components/blocks/stacking-cards\",\"items\":[]},{\"title\":\"Simple Marquee\",\"href\":\"/docs/components/blocks/simple-marquee\",\"items\":[]},{\"title\":\"Marquee Along SVG Path\",\"href\":\"/docs/components/blocks/marquee-along-svg-path\",\"items\":[]}]}]}]}]}]}],\"$La\"]}]}],\"$Lb\"]}]]}],{\"children\":[\"$Lc\",{\"children\":[\"$Ld\",{},null,false,false]},null,false,false]},null,false,false]},null,false,false],\"$Le\",false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"S\":true}\n"])</script>
16<script>self.__next_f.push([1,"11:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"OutletBoundary\"]\n12:\"$Sreact.suspense\"\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"ViewportBoundary\"]\n16:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"MetadataBoundary\"]\na:[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\nb:[\"$\",\"footer\",null,{\"className\":\"flex items-center justify-center w-full h-20 mb-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex w-full mx-4 rounded-2xl bg-background items-center justify-center h-full border border-border\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-center mx-4 \",\"children\":[\"$\",\"p\",null,{\"children\":[\"built with ð by\",\" \",[\"$\",\"a\",null,{\"href\":\"https://twitter.com/nonzeroexitcode\",\"className\":\"cursor-pointer no-underline text-blue hover:text-blue-400 dark:hover:text-blue-300 dark:text-blue-400 duration-300 transition-[colors,text-color] ease-out inline-flex items-center font-medium focus-ring rounded-lg\",\"children\":[\"nonzeroexitcode\",[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":14,\"height\":14,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2.5,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link ml-1 mt-0.5\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}]]}]]}]}]}]}]\nc:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nd:[\"$\",\"$1\",\"c\",{\"children\":[\"$L10\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/630806dca73bf993.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/de28e51c2137b496.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/68eaf83e7cd80399.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/fa10315e83fd08d1.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L11\",null,{\"children\":[\"$\",\"$12\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@13\"}]}]]}]\ne:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L14\",null,{\"children\":\"$@15\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$12\",null,{\"name\":\"Next.Metadata\",\"children\":\"$@17\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script>
16<script>self.__next_f.push([1,"18:I[58319,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"/_next/static/chunks/de28e51c2137b496.js\",\"/_next/static/chunks/68eaf83e7cd80399.js\",\"/_next/static/chunks/fa10315e83fd08d1.js\"],\"CopyPageMenu\"]\n19:I[22016,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"/_next/static/chunks/de28e51c2137b496.js\",\"/_next/static/chunks/68eaf83e7cd80399.js\",\"/_next/static/chunks/fa10315e83fd08d1.js\"],\"\"]\n"])</script>
16<script>self.__next_f.push([1,"10:[\"$\",\"main\",null,{\"className\":\"xl:grid xl:grid-cols-[minmax(0,1fr)_340px] justify-center w-full\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded-2xl bg-background py-6 lg:gap-10 lg:py-6 border-border border\",\"children\":[\"$\",\"div\",null,{\"data-algolia-crawl\":true,\"className\":\"px-4 md:px-8 flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start justify-between gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"pb-6 flex items-center space-x-1 text-[13px] md:text-base text-muted-foreground\",\"children\":[[\"$\",\"div\",null,{\"className\":\"font-medium whitespace-nowrap\",\"children\":\"Docs\"}],[\"$\",\"span\",null,{\"className\":\"font-serif\",\"children\":\"â\"}],[\"$\",\"div\",null,{\"data-algolia-level-0\":true,\"className\":\"font-medium text-muted-foreground\",\"children\":\"Getting Started\"}],[\"$\",\"span\",null,{\"className\":\"font-serif\",\"children\":\"â\"}],[\"$\",\"div\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"Introduction\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex-shrink-0\",\"children\":[\"$\",\"$L18\",null,{\"title\":\"Introduction\",\"content\":\"null\",\"currentUrl\":\"https://fancycomponents.dev/docs/introduction\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"\",\"children\":[\"$\",\"h1\",null,{\"className\":\"scroll-m-2
160 text-3xl text-pretty md:text-5xl font-calendas tracking-tight\",\"children\":\"Introduction\"}]}],[\"$\",\"div\",null,{\"className\":\"\",\"children\":[false,null]}],[\"$\",\"div\",null,{\"className\":\"mb-12 pt-8 space-y-6\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":\"Fancy Components is a collection of fun and weird, ready-to-use components and microinteractions built (mainly) with:\"}],\"\\n\",[\"$\",\"ul\",null,{\"className\":\"list-disc ml-3 list-outside space-y-3\",\"children\":[\"\\n\",[\"$\",\"li\",null,{\"className\":\"marker:text-sm [\u0026\u003eul]:marker:text-[10px] [\u0026\u003eol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4\",\"children\":\"React\"}],\"\\n\",[\"$\",\"li\",null,{\"className\":\"marker:text-sm [\u0026\u003eul]:marker:text-[10px] [\u0026\u003eol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4\",\"children\":\"TypeScript\"}],\"\\n\",[\"$\",\"li\",null,{\"className\":\"marker:text-sm [\u0026\u003eul]:marker:text-[10px] [\u0026\u003eol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4\",\"children\":\"Tailwind CSS\"}],\"\\n\",[\"$\",\"li\",null,{\"className\":\"marker:text-sm [\u0026\u003eul]:marker:text-[10px] [\u0026\u003eol]:marker:text-base text-base md:text-lg first:mt-2 last:pb-4\",\"children\":\"Motion (Formerly Framer Motion)\"}],\"\\n\"]}],\"\\n\",[[\"$\",\"h2\",null,{\"id\":\"why\",\"className\":\"text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight\",\"children\":\"Why\"}],[\"$\",\"hr\",null,{\"className\":\"mt-2.5\"}]],\"\\n\",[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":\"The web UI landscape has become increasingly standardized. While this standardization has brought many benefits â improved accessibility, better user experiences, and easier development â it has also led to a certain homogeneity. The web, in many ways, has become a bit... boring.\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":\"The aim of this project is to somewhat inject some playfulness to the web, by collecting the weird, fun, and sometimes useless ui magic that you can see in the wild.\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":\"Now you might ask, then why create a copy-and-paste-able collection of components? The goal here is to re-create the most popular components from the award-winning sites, so you can either use them in your project by adding your spin on top of them, or just to provide the code as an inspiration for creating your own components.\"}],\"\\n\",[[\"$\",\"h2\",null,{\"id\":\"getting-started\",\"className\":\"text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight\",\"children\":\"Getting Started\"}],[\"$\",\"hr\",null,{\"className\":\"mt-2.5\"}]],\"\\n\",[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":[\"To start using the components in your project, check out the \",[\"$\",\"$L19\",null,{\"href\":\"/docs/installation\",\"className\":\"font-medium text-base md:text-lg text-blue hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300 duration-300 ease-out transition-[color,background-color,opacity] items-center leading-0 rounded-sm focus-primary\",\"children\":\"Installation\"}],\" guide.\"]}],\"\\n\",\"$L1a\",\"\\n\",\"$L1b\",\"\\n\",\"$L1c\"]}],\"$L1d\"]}]}],\"$L1e\"]}]\n"])</script>
16<script>self.__next_f.push([1,"1f:I[40080,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"/_next/static/chunks/de28e51c2137b496.js\",\"/_next/static/chunks/68eaf83e7cd80399.js\",\"/_next/static/chunks/fa10315e83fd08d1.js\"],\"DocsPager\"]\n20:I[89749,[\"/_next/static/chunks/54da8384fbc93525.js\",\"/_next/static/chunks/746fbbd383fd5ed8.js\",\"/_next/static/chunks/4a816b10b9e85655.js\",\"/_next/static/chunks/b3896c44f5cef471.js\",\"/_next/static/chunks/b8bf702601f7dd5c.js\",\"/_next/static/chunks/6c0b278e0b43d24b.js\",\"/_next/static/chunks/69a2ce2b290d86fb.js\",\"/_next/static/chunks/de28e51c2137b496.js\",\"/_next/static/chunks/68eaf83e7cd80399.js\",\"/_next/static/chunks/fa10315e83fd08d1.js\"],\"DashboardTableOfContents\"]\n1a:[[\"$\",\"h2\",null,{\"id\":\"open-source-\u0026-free\",\"className\":\"text-3xl md:text-4xl font-medium mb-0 py-0 mt-14 tracking-tight\",\"children\":\"Open Source \u0026 Free\"}],[\"$\",\"hr\",null,{\"className\":\"mt-2.5\"}]]\n1b:[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":\"Fancy Components is open source and free to use. You can use it for personal or commercial projects.\"}]\n1c:[\"$\",\"p\",null,{\"className\":\"text-base md:text-lg text-pretty\",\"children\":\"Contributions are welcome! If you have any ideas or suggestions, please feel free to open an issue or submit a pull request. A detailed contribution guide will be available soon.\"}]\n1d:[\"$\",\"div\",null,{\"data-algolia-ignore\":true,\"className\":\"\",\"children\":[\"$\",\"$L1f\",null,{\"doc\":{\"slug\":\"introduction\",\"slugAsParams\":\"introduction\",\"_id\":\"introduction\",\"type\":\"Doc\",\"title\":\"Introduction\",\"description\":\"null\",\"published\":false,\"featured\":false,\"component\":false,\"author\":\"undefined\",\"toc\":{\"items\":[{\"url\":\"#why\",\"title\":\"Why\"},{\"url\":\"#getting-started\",\"title\":\"Getting Started\"},{\"url\":\"#open-source--free\",\"title\":\"Open Source \u0026 Free\"}]},\"body\":\"$10:props:children:0:props:children:props:children:3:props:children\"}}]}]\n1e:[\"$\",\"div\",null,{\"className\":\"hidden text-base xl:block sticky top-4 pt-0 pb-4 h-[calc(100vh-8rem)] pl-4\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-background rounded-2xl border\",\"children\":[\"$\",\"$L8\",null,{\"className\":\"\",\"children\":[\"$\",\"$L20\",null,{\"toc\":\"$1d:props:children:props:doc:toc\"}]}]}]}]\n"])</script>
16<script>self.__next_f.push([1,"15:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
16<script>self.__next_f.push([1,"21:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/247eb132b7f7b574.js\"],\"IconMark\"]\n"])</script>
16<script>self.__next_f.push([1,"17:[[\"$\",\"title\",\"0\",{\"children\":\"Introduction - 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\":\"Introduction\"}],[\"$\",\"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/introduction\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image\",\"content\":\"https://fancycomponents.dev/og.jpg\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:image:alt\",\"content\":\"Fancy Components\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:creator\",\"content\":\"@nonzeroexitcode\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"Introduction\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"null\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://fancycomponents.dev/og.jpg\"}],[\"$\",\"link\",\"20\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon-16x16.png\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"22\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L21\",\"23\",{}]]\n"])</script>
16<script>self.__next_f.push([1,"13:null\n"])</script>
16</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.