├── .eslintrc.json ├── .gitignore ├── README.md ├── app ├── favicon.ico ├── globals.css ├── layout.tsx ├── opengraph-image.png ├── page.tsx ├── text-variants │ └── page.tsx └── usage │ └── page.tsx ├── components.json ├── components ├── landing │ ├── blockquote.tsx │ ├── features.tsx │ ├── info.tsx │ ├── intro-text.tsx │ └── variant-carousel.tsx ├── shared │ ├── footer.tsx │ ├── main-nav.tsx │ ├── mode-toggle.tsx │ ├── nav-dropdown.tsx │ ├── nav-links.tsx │ ├── nav-sheet.tsx │ ├── spotlight.tsx │ └── vv-logo.tsx ├── theme-provider.tsx ├── ui │ ├── accordion.tsx │ ├── alert.tsx │ ├── avatar.tsx │ ├── button.tsx │ ├── card.tsx │ ├── command.tsx │ ├── dialog.tsx │ ├── dropdown-menu.tsx │ ├── hover-card.tsx │ ├── input.tsx │ ├── scroll-area.tsx │ ├── select.tsx │ ├── sheet.tsx │ ├── tabs.tsx │ ├── toast.tsx │ ├── toaster.tsx │ ├── tooltip.tsx │ └── use-toast.ts └── usage │ ├── all-variants.tsx │ ├── call-to-action.tsx │ ├── copy.tsx │ └── intro.tsx ├── lib └── utils.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── landing.jpeg ├── next.svg └── vercel.svg ├── tailwind.config.js ├── tsconfig.json ├── variants ├── code-snippets │ └── index.ts ├── definitions │ └── index.ts └── variant-previews │ └── index.tsx └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 18 | 19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChrisAbdo/MotionVariants/d0413146d159dcc4968d7dd68ab963e3c6c8360e/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 240 10% 3.9%; 9 | 10 | --muted: 240 4.8% 95.9%; 11 | --muted-foreground: 240 3.8% 46.1%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 240 10% 3.9%; 15 | 16 | --card: 0 0% 100%; 17 | --card-foreground: 240 10% 3.9%; 18 | 19 | --border: 240 5.9% 90%; 20 | --input: 240 5.9% 90%; 21 | 22 | --primary: 240 5.9% 10%; 23 | --primary-foreground: 0 0% 98%; 24 | 25 | --secondary: 240 4.8% 95.9%; 26 | --secondary-foreground: 240 5.9% 10%; 27 | 28 | --accent: 240 4.8% 95.9%; 29 | --accent-foreground: ; 30 | 31 | --destructive: 0 84.2% 60.2%; 32 | --destructive-foreground: 0 0% 98%; 33 | 34 | --ring: 240 5% 64.9%; 35 | 36 | --radius: 0.5rem; 37 | } 38 | 39 | .dark { 40 | --background: 240 10% 3.9%; 41 | --foreground: 0 0% 98%; 42 | 43 | --muted: 240 3.7% 15.9%; 44 | --muted-foreground: 240 5% 64.9%; 45 | 46 | --popover: 240 10% 3.9%; 47 | --popover-foreground: 0 0% 98%; 48 | 49 | --card: 240 10% 3.9%; 50 | --card-foreground: 0 0% 98%; 51 | 52 | --border: 240 3.7% 15.9%; 53 | --input: 240 3.7% 15.9%; 54 | 55 | --primary: 0 0% 98%; 56 | --primary-foreground: 240 5.9% 10%; 57 | 58 | --secondary: 240 3.7% 15.9%; 59 | --secondary-foreground: 0 0% 98%; 60 | 61 | --accent: 240 3.7% 15.9%; 62 | --accent-foreground: ; 63 | 64 | --destructive: 0 62.8% 30.6%; 65 | --destructive-foreground: 0 85.7% 97.3%; 66 | 67 | --ring: 240 3.7% 15.9%; 68 | } 69 | } 70 | 71 | @layer base { 72 | * { 73 | @apply border-border; 74 | } 75 | body { 76 | @apply bg-background text-foreground; 77 | font-feature-settings: "rlig" 1, "calt" 1; 78 | } 79 | } 80 | 81 | @layer utilities { 82 | .parallax { 83 | overflow: hidden; 84 | letter-spacing: -2px; 85 | line-height: 0.9; 86 | margin: 0; 87 | white-space: nowrap; 88 | display: flex; 89 | flex-wrap: nowrap; 90 | } 91 | 92 | .parallax .scroller { 93 | font-weight: 600; 94 | text-transform: uppercase; 95 | font-size: 100px; 96 | display: flex; 97 | white-space: nowrap; 98 | display: flex; 99 | flex-wrap: nowrap; 100 | } 101 | 102 | .parallax span { 103 | display: block; 104 | margin-right: 30px; 105 | } 106 | 107 | .step { 108 | counter-increment: step; 109 | } 110 | 111 | .step:before { 112 | @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background; 113 | @apply ml-[-50px] mt-[-4px]; 114 | content: counter(step); 115 | } 116 | } 117 | 118 | @media (max-width: 640px) { 119 | .container { 120 | @apply px-4; 121 | } 122 | } 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | 3 | import type { Metadata } from "next"; 4 | 5 | import { Inter } from "next/font/google"; 6 | 7 | import { ThemeProvider } from "@/components/theme-provider"; 8 | import { Toaster } from "@/components/ui/toaster"; 9 | 10 | import MainNav from "@/components/shared/main-nav"; 11 | import Footer from "@/components/shared/footer"; 12 | 13 | const inter = Inter({ subsets: ["latin"] }); 14 | 15 | const title = 16 | "Variant Vault - A collection of Framer Motion variants for your next project."; 17 | const description = 18 | "Variant Vault is a collection of Framer Motion variants for your next project. All free to use and open source."; 19 | 20 | export const metadata: Metadata = { 21 | title, 22 | description, 23 | openGraph: { 24 | title, 25 | description, 26 | }, 27 | twitter: { 28 | title, 29 | description, 30 | card: "summary_large_image", 31 | creator: "@abdo_eth", 32 | }, 33 | metadataBase: new URL("https://variantvault.chrisabdo.dev"), 34 | themeColor: "#ffffff", 35 | }; 36 | export default function RootLayout({ 37 | children, 38 | }: { 39 | children: React.ReactNode; 40 | }) { 41 | return ( 42 | 43 | 44 | 45 | 46 | {children} 47 |