├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.svg └── vite.svg ├── src ├── App.jsx ├── components │ ├── Footer.jsx │ ├── Hero.jsx │ └── PatternGrid.jsx ├── data │ └── patterns.js ├── index.css └── main.jsx ├── tailwind.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # Testing 7 | /coverage 8 | 9 | # Production 10 | /build 11 | /dist 12 | 13 | # Environment files 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | # Logs 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | logs 25 | *.log 26 | 27 | # Editor directories and files 28 | .vscode/* 29 | !.vscode/extensions.json 30 | .idea 31 | *.suo 32 | *.ntvs* 33 | *.njsproj 34 | *.sln 35 | *.sw? 36 | .DS_Store 37 | .env.local 38 | .env.development.local 39 | .env.test.local 40 | .env.production.local 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # Vite 58 | .vite/ 59 | 60 | # TypeScript 61 | *.tsbuildinfo 62 | 63 | # Cache directories 64 | .cache 65 | .parcel-cache 66 | 67 | # Local Netlify folder 68 | .netlify 69 | 70 | # Temporary files 71 | *.tmp 72 | *.temp 73 | .temp/ 74 | .tmp/ 75 | 76 | # System Files 77 | Thumbs.db 78 | ehthumbs.db 79 | Desktop.ini 80 | $RECYCLE.BIN/ 81 | 82 | # Package manager lock files (uncomment if you want to ignore) 83 | # package-lock.json 84 | # yarn.lock 85 | # pnpm-lock.yaml 86 | 87 | # Debug files 88 | debug.log 89 | debug/ 90 | 91 | # Backup files 92 | *.bak 93 | *.backup 94 | *~ 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MotifyX - Transform Your Web Designs with Stunning Background Patterns 2 | 3 |

4 |

5 |

MotifyX

6 |

7 | 8 | ✨ Elevate your web projects with MotifyX - an innovative collection of mesmerizing background patterns crafted for modern developers and designers. From sleek geometric shapes to cyberpunk-inspired animations, MotifyX offers a diverse range of customizable patterns that will bring your designs to life. 9 | 10 | ## ✨ Key Features 11 | 12 | - 50+ Handcrafted Premium Patterns 13 | - Rich Pattern Categories: 14 | - 🔷 Geometric Patterns - Clean, minimal designs 15 | - 🚀 Futuristic Patterns - Sci-fi inspired effects 16 | - 👾 Matrix Patterns - Dynamic matrix-style animations 17 | - 💻 Codescape Patterns - Code-themed backgrounds 18 | - 🎨 Dark Gradients - Subtle, modern color transitions 19 | - ⚡ Interactive Dot Patterns - Engaging particle effects 20 | - 🔥 Real-time Pattern Customization 21 | - 📋 Instant CSS Code Generation & Copying 22 | - 📱 Fully Responsive Design 23 | - 🎭 Seamless Animations & Transitions 24 | - 🌙 Dark Mode First Approach 25 | - ⚡ Lightning Fast Performance 26 | - 🎨 Color Customization Options 27 | - 💾 Easy Integration Process 28 | 29 | ## 🚀 Live Demo 30 | 31 | Experience MotifyX in action: [Launch Demo](https://jatin-yadav05.github.io/MotifyX/) 32 | 33 | ## 🛠️ Built With Modern Tech Stack 34 | 35 | - ⚛️ React.js - For dynamic UI components 36 | - 🎨 Tailwind CSS - For utility-first styling 37 | - 💫 Framer Motion - For smooth animations 38 | - 📦 React Icons - For beautiful iconography 39 | - 🎭 CSS Animations - For engaging interactions 40 | - 🔧 Vite - For lightning-fast development 41 | 42 | ## 🌟 Getting Started 43 | 44 | Let's get you up and running with MotifyX: 45 | 46 | 1. Clone the repository: 47 | ```bash 48 | git clone https://github.com/jatin-yadav05/MotifyX.git 49 | ``` 50 | 51 | 2. Install dependencies: 52 | ```bash 53 | npm install 54 | ``` 55 | 56 | 3. Start development server: 57 | ```bash 58 | npm run dev 59 | ``` 60 | 61 | ## 🤝 Contributing 62 | 63 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. 64 | 65 | 1. Fork the Project 66 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 67 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 68 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 69 | 5. Open a Pull Request 70 | 71 | ## 📝 License 72 | 73 | Distributed under the MIT License. See `LICENSE` for more information. 74 | 75 | ## 📬 Contact 76 | 77 | Jatin Yadav - [@jatinyadav_05](https://twitter.com/jatinyadav_05) 78 | 79 | Project Link: [https://github.com/jatin-yadav05/MotifyX](https://github.com/jatin-yadav05/MotifyX) 80 | 81 | ## 🙏 Acknowledgments 82 | 83 | * [React.js](https://reactjs.org/) 84 | * [Tailwind CSS](https://tailwindcss.com/) 85 | * [Framer Motion](https://www.framer.com/motion/) 86 | * [React Icons](https://react-icons.github.io/react-icons/) 87 | * [Vite](https://vitejs.dev/) 88 | 89 | --- 90 | 91 | Made with ❤️ by [Jatin Yadav](https://github.com/jatin-yadav05) 92 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | MotifyX 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bgcollection", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview", 11 | "predeploy": "npm run build", 12 | "deploy": "gh-pages -d dist" 13 | }, 14 | "dependencies": { 15 | "framer-motion": "^11.15.0", 16 | "react": "^18.3.1", 17 | "react-dom": "^18.3.1", 18 | "react-icons": "^5.4.0" 19 | }, 20 | "devDependencies": { 21 | "@eslint/js": "^9.17.0", 22 | "@types/react": "^18.3.17", 23 | "@types/react-dom": "^18.3.5", 24 | "@vitejs/plugin-react": "^4.3.4", 25 | "autoprefixer": "^10.4.20", 26 | "eslint": "^9.17.0", 27 | "eslint-plugin-react": "^7.37.2", 28 | "eslint-plugin-react-hooks": "^5.0.0", 29 | "eslint-plugin-react-refresh": "^0.4.16", 30 | "gh-pages": "^6.2.0", 31 | "globals": "^15.13.0", 32 | "postcss": "^8.4.49", 33 | "tailwindcss": "^3.4.17", 34 | "vite": "^6.0.3" 35 | }, 36 | "homepage": "https://jatin-yadav05.github.io/MotifyX" 37 | } 38 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react' 2 | import { FaGithub, FaLinkedin } from 'react-icons/fa' 3 | import { HiSparkles, HiCode, HiClipboard, HiEye, HiColorSwatch, HiX, HiCheck, HiRefresh, HiPlay, HiPause, HiChevronUp, HiSelector } from 'react-icons/hi' 4 | import { motion, AnimatePresence } from 'framer-motion' 5 | import {patterns} from './data/patterns' 6 | import Footer from './components/Footer' 7 | 8 | 9 | // Rename the component to CustomGlitchText 10 | const CustomGlitchText = ({ text, className = "" }) => { 11 | return ( 12 |

13 | {/* Main Text */} 14 | 15 | {text} 16 | 17 | 18 | {/* Animated Glowing Line */} 19 |

20 | {/* Base glow layers */} 21 |

22 |

23 | 24 | {/* Moving highlight */} 25 |

26 |

27 |

28 | 29 | {/* Extra glow effect */} 30 |

31 |

32 |

33 | ); 34 | }; 35 | 36 | function App() { 37 | const [selectedPattern, setSelectedPattern] = useState(null) 38 | const [showCopyNotification, setShowCopyNotification] = useState(false) 39 | const [customColors, setCustomColors] = useState({}) 40 | const [isAnimationPaused, setIsAnimationPaused] = useState(false) 41 | const [isAppliedToPage, setIsAppliedToPage] = useState(false) 42 | const [activeSection, setActiveSection] = useState('geometric') 43 | const [isMenuOpen, setIsMenuOpen] = useState(false) 44 | const dropupRef = useRef(null) 45 | const [hasInteracted, setHasInteracted] = useState(false) 46 | 47 | 48 | 49 | const handleCopyCSS = (pattern) => { 50 | const cssString = Object.entries(pattern.style) 51 | .map(([key, value]) => `${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${value};`) 52 | .join('\n'); 53 | navigator.clipboard.writeText(cssString); 54 | setShowCopyNotification(true); 55 | setTimeout(() => setShowCopyNotification(false), 2000); 56 | } 57 | 58 | const getModifiedStyle = (pattern) => { 59 | if (!customColors[pattern.id]) return pattern.style; 60 | 61 | const newStyle = { ...pattern.style }; 62 | if (pattern.category === 'gradients') { 63 | const colors = [ 64 | customColors[pattern.id]?.color1 || (pattern.id === 4 ? '#ff3366' : '#12c2e9'), 65 | customColors[pattern.id]?.color2 || (pattern.id === 4 ? '#00ff99' : '#c471ed'), 66 | customColors[pattern.id]?.color3 || (pattern.id === 4 ? null : '#f64f59'), 67 | ].filter(Boolean); 68 | 69 | newStyle.backgroundImage = `linear-gradient(45deg, ${colors.join(', ')})`; 70 | newStyle.backgroundSize = '200% 200%'; 71 | if (!newStyle.animation && pattern.category === 'gradients') { 72 | newStyle.animation = 'gradient 10s ease infinite'; 73 | } 74 | } else { 75 | newStyle.backgroundColor = customColors[pattern.id]?.backgroundColor || pattern.style.backgroundColor; 76 | if (pattern.category === 'patterns' || pattern.category === 'geometric') { 77 | const patternColor = customColors[pattern.id]?.patternColor || 'rgba(255, 255, 255, 0.05)'; 78 | newStyle.backgroundImage = pattern.style.backgroundImage.replace( 79 | /rgba$255,\s*255,\s*255,\s*[\d.]+$/g, 80 | patternColor 81 | ); 82 | } 83 | } 84 | return newStyle; 85 | } 86 | 87 | const toggleAnimation = (pattern) => { 88 | setIsAnimationPaused(!isAnimationPaused); 89 | const style = document.documentElement.style; 90 | if (isAnimationPaused) { 91 | style.setProperty('--animation-play-state', 'running'); 92 | } else { 93 | style.setProperty('--animation-play-state', 'paused'); 94 | } 95 | } 96 | 97 | const applyToPage = (pattern) => { 98 | const mainElement = document.querySelector('.min-h-screen'); 99 | 100 | if (mainElement) { 101 | // Reset previous styles 102 | mainElement.style.background = 'none'; 103 | mainElement.style.animation = 'none'; 104 | 105 | // Apply new styles 106 | const modifiedStyle = getModifiedStyle(pattern); 107 | 108 | Object.entries(modifiedStyle).forEach(([key, value]) => { 109 | mainElement.style[key] = value; 110 | }); 111 | 112 | // Make sure content remains visible 113 | mainElement.style.position = 'relative'; 114 | mainElement.style.zIndex = '0'; 115 | 116 | // Add transition 117 | mainElement.style.transition = 'background-color 0.3s, background-image 0.3s'; 118 | } 119 | 120 | setIsAppliedToPage(true); 121 | setTimeout(() => setIsAppliedToPage(false), 2000); 122 | } 123 | 124 | const resetBackground = () => { 125 | const mainElement = document.querySelector('.min-h-screen'); 126 | if (mainElement) { 127 | mainElement.style.background = ''; 128 | mainElement.style.backgroundColor = ''; 129 | mainElement.style.backgroundImage = ''; 130 | mainElement.style.backgroundSize = ''; 131 | mainElement.style.backgroundPosition = ''; 132 | mainElement.style.animation = ''; 133 | mainElement.className = 'min-h-screen bg-zinc-950 text-white selection:bg-violet-500/30 transition-all duration-300'; 134 | } 135 | } 136 | 137 | useEffect(() => { 138 | function handleClickOutside(event) { 139 | if (dropupRef.current && !dropupRef.current.contains(event.target)) { 140 | setIsMenuOpen(false) 141 | } 142 | } 143 | 144 | document.addEventListener('mousedown', handleClickOutside) 145 | return () => { 146 | document.removeEventListener('mousedown', handleClickOutside) 147 | } 148 | }, []) 149 | 150 | // Add this function at the top of your component 151 | const scrollToPatterns = () => { 152 | const patternsSection = document.querySelector('.patterns-section') 153 | patternsSection?.scrollIntoView({ behavior: 'smooth' }) 154 | } 155 | 156 | return ( 157 |

158 | {/* Navbar */} 159 |

160 |

161 |

162 |

163 |

164 |

165 | 171 |

172 |

173 | MotifyX 174 |

175 |

176 | 182 | 184 | 185 | 186 | 188 | 189 | 190 | 196 | MotifyX - Transform your web designs with stunning background patterns | Product Hunt

201 | 202 |

203 |

204 |

205 | 206 | {/* Main content wrapper */} 207 |

208 | {/* Hero Section - adjust bottom padding */} 209 |

210 |

211 |

212 |

213 |

214 | 215 | Design with confidence 216 | • 217 | 100% free & open source 218 |

219 | 220 |

221 | Transform your
222 | 226 | {' '} 227 | effortlessly 228 |

229 | 230 |

231 | Elevate your designs with our curated collection of modern background patterns. 232 | Preview, customize, and implement with just a few clicks. 233 |

234 | 235 |

236 | 243 | 249 | View on GitHub 250 | 251 |

252 |

253 |

254 | 255 | {/* Patterns Section - adjust padding */} 256 |

257 | {/* Active Section Content */} 258 |

259 |

264 |

265 |

Futuristic Patterns

266 |

Next-gen patterns inspired by cyberpunk and tech aesthetics

267 |

268 |

269 | {patterns 270 | .filter(pattern => pattern.category === 'futuristic') 271 | .map((pattern) => ( 272 |

274 |

275 |

279 |

280 |

{pattern.name}

281 |

{pattern.description}

282 |

283 | 290 | 297 |

298 |

299 |

300 | ))} 301 |

302 |

303 | 304 |

309 |

310 |

Geometric Patterns

311 |

Clean, structured patterns for sophisticated designs

312 |

313 |

314 | {patterns 315 | .filter(pattern => pattern.category === 'geometric') 316 | .map((pattern) => ( 317 |

319 |

320 |

324 |

325 |

{pattern.name}

326 |

{pattern.description}

327 |

328 | 335 | 342 |

343 |

344 |

345 | ))} 346 |

347 |

348 | 349 |

354 |

355 |

Dot Patterns

356 |

Subtle, repeating patterns for texture and depth

357 |

358 |

359 | {patterns 360 | .filter(pattern => pattern.category === 'patterns') 361 | .map((pattern) => ( 362 |

364 |

365 |

369 |

370 |

{pattern.name}

371 |

{pattern.description}

372 |

373 | 380 | 387 |

388 |

389 |

390 | ))} 391 |

392 |

393 | 394 |

399 |

400 |

Matrix Patterns

401 |

Digital code and binary-inspired backgrounds

402 |

403 |

404 | {patterns 405 | .filter(pattern => pattern.category === 'matrix') 406 | .map((pattern) => ( 407 |

409 |

410 |

414 |

415 |

{pattern.name}

416 |

{pattern.description}

417 |

418 | 425 | 432 |

433 |

434 |

435 | ))} 436 |

437 |

438 | 439 |

444 |

445 |

Codescape Patterns

446 |

Programming landscapes and code-inspired designs

447 |

448 |

449 | {patterns 450 | .filter(pattern => pattern.category === 'codescape') 451 | .map((pattern) => ( 452 |

454 |

455 |

459 |

460 |

{pattern.name}

461 |

{pattern.description}

462 |

463 | 470 | 477 |

478 |

479 |

480 | ))} 481 |

482 |

483 | 484 |

489 |

490 |

Dark Gradients

491 |

Subtle, dark gradient patterns for modern interfaces

492 |

493 |

494 | {patterns 495 | .filter(pattern => pattern.category === 'gradients') 496 | .map((pattern) => ( 497 |

499 |

500 |

504 |

505 |

{pattern.name}

506 |

{pattern.description}

507 |

508 | 515 | 522 |

523 |

524 |

525 | ))} 526 |

527 |

528 |

529 | 530 | {/* Section Selector */} 531 |

532 |

533 | 550 | 551 | {/* Dropdown Menu */} 552 |

557 |

558 | {['geometric', 'futuristic', 'patterns', 'matrix', 'codescape', 'gradients'].map((section) => ( 559 | 571 | ))} 572 |

573 |

574 |

575 |

576 |

577 |

578 | 579 |

580 | 581 | {/* Copy Notification */} 582 |

587 | 588 | CSS copied to clipboard! 589 |

590 | 591 | {/* Preview Modal */} 592 | {selectedPattern && ( 593 |

594 |

595 | {/* Modal Header */} 596 |

597 |

{selectedPattern.name}

598 | 604 |

605 | 606 | {/* Pattern Preview */} 607 |

608 |

612 |

613 | 614 | {/* Scrollable Content */} 615 |

616 | {/* Customization Controls */} 617 |

618 |

Customize Pattern

619 |

620 | {selectedPattern.category === 'gradients' ? ( 621 | <> 622 |

623 | Color 1: 624 | setCustomColors(prev => ({ 628 | ...prev, 629 | [selectedPattern.id]: { ...prev[selectedPattern.id], color1: e.target.value } 630 | }))} 631 | className="w-8 h-8 rounded cursor-pointer" 632 | /> 633 |

634 |

635 | Color 2: 636 | setCustomColors(prev => ({ 640 | ...prev, 641 | [selectedPattern.id]: { ...prev[selectedPattern.id], color2: e.target.value } 642 | }))} 643 | className="w-8 h-8 rounded cursor-pointer" 644 | /> 645 |

646 | {selectedPattern.style.backgroundImage.includes('linear-gradient') && 647 | selectedPattern.style.backgroundImage.split(',').length > 2 && ( 648 |

649 | Color 3: 650 | setCustomColors(prev => ({ 654 | ...prev, 655 | [selectedPattern.id]: { ...prev[selectedPattern.id], color3: e.target.value } 656 | }))} 657 | className="w-8 h-8 rounded cursor-pointer" 658 | /> 659 |

660 | )} 661 | 662 | ) : ( 663 | <> 664 |

665 | Background: 666 | setCustomColors(prev => ({ 670 | ...prev, 671 | [selectedPattern.id]: { ...prev[selectedPattern.id], backgroundColor: e.target.value } 672 | }))} 673 | className="w-8 h-8 rounded cursor-pointer" 674 | /> 675 |

676 |

677 | Pattern Color: 678 | setCustomColors(prev => ({ 682 | ...prev, 683 | [selectedPattern.id]: { ...prev[selectedPattern.id], patternColor: e.target.value } 684 | }))} 685 | className="w-8 h-8 rounded cursor-pointer" 686 | /> 687 |

688 | 689 | )} 690 | 691 | {selectedPattern.style.animation && ( 692 | 708 | )} 709 | 710 | 717 |

718 |

719 | 720 | {/* CSS Code */} 721 |

722 |

723 |

CSS Code

724 | 731 |

732 |

733 |                   
734 |                     {Object.entries(getModifiedStyle(selectedPattern))
735 |                       .map(([key, value]) => `${key.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${value};`)
736 |                       .join('\n')}
737 |                   
738 |

739 |

740 |

741 |

742 |

743 | )} 744 | 745 | {/* Apply to Page Notification */} 746 |

751 | 752 | Pattern applied to page! 753 |

754 |

755 | ) 756 | } 757 | 758 | export default App -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { FaGithub, FaLinkedin } from 'react-icons/fa' 2 | import { HiColorSwatch } from 'react-icons/hi' 3 | 4 | const Footer = ({ setActiveSection }) => { 5 | return ( 6 | 124 | ) 125 | } 126 | 127 | export default Footer -------------------------------------------------------------------------------- /src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | const Hero = ({ scrollToPatterns }) => { 2 | return ( 3 |

4 |

5 |

6 | 7 | 6 unique pattern categories 8 | • 9 | 100+ customizable designs 10 |

11 | 12 |

13 | Transform your
14 | 18 | effortlessly 19 |

20 | 21 |

22 | Discover a curated collection of unique background patterns, from subtle geometric designs 23 | to dynamic code-inspired landscapes. Each pattern is crafted with precision, featuring 24 | live customization, 25 | real-time previews, and 26 | instant CSS generation. 27 |

28 | 29 |

30 | 37 | 43 | View on GitHub 44 | 45 |

46 |

47 |

48 | ) 49 | } 50 | 51 | export default Hero -------------------------------------------------------------------------------- /src/components/PatternGrid.jsx: -------------------------------------------------------------------------------- 1 | import { patterns, getPatternsByCategory } from '../data/patterns' 2 | 3 | const PatternGrid = ({ category }) => { 4 | const categoryPatterns = getPatternsByCategory(category) 5 | 6 | return ( 7 |

8 | {categoryPatterns.map((pattern) => ( 9 | 10 | ))} 11 |

12 | ) 13 | } 14 | 15 | export default PatternGrid -------------------------------------------------------------------------------- /src/data/patterns.js: -------------------------------------------------------------------------------- 1 | export const patterns = [ 2 | { 3 | id: 1, 4 | name: 'Neural Mesh', 5 | category: 'futuristic', 6 | description: 'Subtle neural network visualization', 7 | style: { 8 | backgroundColor: '#0a0a0a', 9 | backgroundImage: ` 10 | radial-gradient(circle at 50% 50%, rgba(128, 103, 243, 0.05) 0%, transparent 25%), 11 | radial-gradient(circle at 0% 0%, rgba(128, 103, 243, 0.025) 0%, transparent 30%), 12 | radial-gradient(circle at 100% 100%, rgba(128, 103, 243, 0.05) 0%, transparent 25%), 13 | linear-gradient(45deg, transparent 48%, rgba(128, 103, 243, 0.02) 49%, rgba(128, 103, 243, 0.02) 51%, transparent 52%), 14 | linear-gradient(-45deg, transparent 48%, rgba(128, 103, 243, 0.02) 49%, rgba(128, 103, 243, 0.02) 51%, transparent 52%) 15 | `, 16 | backgroundSize: '60px 60px, 60px 60px, 60px 60px, 30px 30px, 30px 30px', 17 | animation: 'neuralPulse 10s ease infinite' 18 | } 19 | }, 20 | { 21 | id: 2, 22 | name: 'Data Flow', 23 | category: 'futuristic', 24 | description: 'Dynamic data stream effect', 25 | style: { 26 | backgroundColor: '#0a0a0a', 27 | backgroundImage: ` 28 | linear-gradient(0deg, transparent 24%, 29 | rgba(128, 103, 243, 0.03) 25%, 30 | rgba(128, 103, 243, 0.03) 26%, 31 | transparent 27%, 32 | transparent 74%, 33 | rgba(128, 103, 243, 0.03) 75%, 34 | rgba(128, 103, 243, 0.03) 76%, 35 | transparent 77%), 36 | linear-gradient(90deg, transparent 24%, 37 | rgba(128, 103, 243, 0.03) 25%, 38 | rgba(128, 103, 243, 0.03) 26%, 39 | transparent 27%, 40 | transparent 74%, 41 | rgba(128, 103, 243, 0.03) 75%, 42 | rgba(128, 103, 243, 0.03) 76%, 43 | transparent 77%) 44 | `, 45 | backgroundSize: '50px 50px', 46 | backgroundPosition: '0 0, 25px 25px', 47 | animation: 'dataFlow 20s linear infinite' 48 | } 49 | }, 50 | { 51 | id: 3, 52 | name: 'Quantum Grid', 53 | category: 'futuristic', 54 | description: 'Ethereal quantum computing inspired', 55 | style: { 56 | backgroundColor: '#0a0a0a', 57 | backgroundImage: ` 58 | linear-gradient(to right, rgba(128, 103, 243, 0.03) 1px, transparent 1px), 59 | linear-gradient(to bottom, rgba(128, 103, 243, 0.03) 1px, transparent 1px), 60 | radial-gradient(circle at 50% 50%, rgba(128, 103, 243, 0.05) 0%, transparent 100%), 61 | radial-gradient(circle at 0% 100%, rgba(128, 103, 243, 0.025) 0%, transparent 50%) 62 | `, 63 | backgroundSize: '40px 40px, 40px 40px, 200px 200px, 400px 400px', 64 | animation: 'quantumShift 15s ease infinite' 65 | } 66 | }, 67 | { 68 | id: 4, 69 | name: 'Gradient Mesh', 70 | category: 'gradientss', 71 | description: 'Smooth transitioning colors', 72 | style: { 73 | backgroundColor: '#e5e5f7', 74 | backgroundImage: 'linear-gradient(45deg, #12c2e9, #c471ed, #f64f59)', 75 | backgroundSize: '200% 200%', 76 | animation: 'gradient 15s ease infinite', 77 | } 78 | }, 79 | { 80 | id: 5, 81 | name: 'Neural Grid', 82 | category: 'geometric', 83 | description: 'Modern line patterns', 84 | style: { 85 | backgroundColor: 'rgba(15, 15, 15, 1)', 86 | backgroundImage: ` 87 | linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), 88 | linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 89 | `, 90 | backgroundSize: '20px 20px', 91 | } 92 | }, 93 | { 94 | id: 6, 95 | name: 'Cosmic Dots', 96 | category: 'patterns', 97 | description: 'Subtle dot matrix', 98 | style: { 99 | backgroundColor: '#000000', 100 | backgroundImage: 'radial-gradient(rgba(255, 255, 255, 0.15) 0.5px, transparent 0.5px)', 101 | backgroundSize: '10px 10px', 102 | } 103 | }, 104 | { 105 | id: 7, 106 | name: 'Neon Waves', 107 | category: 'gradientss', 108 | description: 'Vibrant color flows', 109 | style: { 110 | backgroundColor: '#000000', 111 | backgroundImage: 'linear-gradient(45deg, #ff3366, #00ff99)', 112 | backgroundSize: '200% 200%', 113 | animation: 'gradient 10s ease infinite', 114 | } 115 | }, 116 | { 117 | id: 8, 118 | name: 'Circuit Board', 119 | category: 'geometric', 120 | description: 'Tech-inspired pattern', 121 | style: { 122 | backgroundColor: '#1a1a1a', 123 | backgroundImage: ` 124 | linear-gradient(45deg, rgba(100, 100, 255, 0.1) 25%, transparent 25%), 125 | linear-gradient(-45deg, rgba(100, 100, 255, 0.1) 25%, transparent 25%), 126 | linear-gradient(45deg, transparent 75%, rgba(100, 100, 255, 0.1) 75%), 127 | linear-gradient(-45deg, transparent 75%, rgba(100, 100, 255, 0.1) 75%) 128 | `, 129 | backgroundSize: '20px 20px', 130 | backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px', 131 | } 132 | }, 133 | { 134 | id: 9, 135 | name: 'Hexagon Grid', 136 | category: 'patterns', 137 | description: 'Modern honeycomb pattern', 138 | style: { 139 | backgroundColor: '#0a0a0a', 140 | backgroundImage: `radial-gradient(circle at center center, rgba(255,255,255,.05), transparent), 141 | repeating-radial-gradient(circle at center center, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 3px, transparent 3px, transparent 100%)`, 142 | backgroundSize: '20px 20px', 143 | } 144 | }, 145 | { 146 | id: 10, 147 | name: 'Diagonal Lines', 148 | category: 'geometric', 149 | description: 'Clean diagonal stripes', 150 | style: { 151 | backgroundColor: '#0a0a0a', 152 | backgroundImage: `repeating-linear-gradient( 153 | 45deg, 154 | transparent, 155 | transparent 10px, 156 | rgba(255, 255, 255, 0.03) 10px, 157 | rgba(255, 255, 255, 0.03) 20px 158 | )` 159 | } 160 | }, 161 | { 162 | id: 11, 163 | name: 'Subtle Squares', 164 | category: 'geometric', 165 | description: 'Minimalist square grid', 166 | style: { 167 | backgroundColor: '#0a0a0a', 168 | backgroundImage: ` 169 | linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), 170 | linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 171 | `, 172 | backgroundSize: '40px 40px', 173 | backgroundPosition: '-1px -1px' 174 | } 175 | }, 176 | { 177 | id: 12, 178 | name: 'Diamond Grid', 179 | category: 'geometric', 180 | description: 'Elegant diamond pattern', 181 | style: { 182 | backgroundColor: '#0a0a0a', 183 | backgroundImage: ` 184 | linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%), 185 | linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%), 186 | linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%), 187 | linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%) 188 | `, 189 | backgroundSize: '30px 30px', 190 | backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0px' 191 | } 192 | }, 193 | { 194 | id: 13, 195 | name: 'Concentric Circles', 196 | category: 'geometric', 197 | description: 'Radial ring pattern', 198 | style: { 199 | backgroundColor: '#0a0a0a', 200 | backgroundImage: ` 201 | repeating-radial-gradient( 202 | circle at center, 203 | transparent 0, 204 | transparent 10px, 205 | rgba(255, 255, 255, 0.03) 10px, 206 | rgba(255, 255, 255, 0.03) 20px 207 | ) 208 | `, 209 | backgroundSize: '40px 40px' 210 | } 211 | }, 212 | { 213 | id: 14, 214 | name: 'Cross Hatch', 215 | category: 'geometric', 216 | description: 'Subtle crossing lines', 217 | style: { 218 | backgroundColor: '#0a0a0a', 219 | backgroundImage: ` 220 | linear-gradient(45deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), 221 | linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 222 | `, 223 | backgroundSize: '20px 20px' 224 | } 225 | }, 226 | { 227 | id: 15, 228 | name: 'Triangles', 229 | category: 'geometric', 230 | description: 'Modern triangle mosaic', 231 | style: { 232 | backgroundColor: '#0a0a0a', 233 | backgroundImage: ` 234 | linear-gradient(60deg, rgba(255, 255, 255, 0.02) 25%, transparent 25.5%, transparent 75%, rgba(255, 255, 255, 0.02) 75.5%), 235 | linear-gradient(-60deg, rgba(255, 255, 255, 0.02) 25%, transparent 25.5%, transparent 75%, rgba(255, 255, 255, 0.02) 75.5%) 236 | `, 237 | backgroundSize: '40px 70px' 238 | } 239 | }, 240 | { 241 | id: 16, 242 | name: 'Tech Pulse', 243 | category: 'futuristic', 244 | description: 'Subtle tech heartbeat pattern', 245 | style: { 246 | backgroundColor: '#0a0a0a', 247 | backgroundImage: ` 248 | radial-gradient(circle at center, rgba(128, 103, 243, 0.03) 0%, transparent 8%), 249 | radial-gradient(circle at center, rgba(128, 103, 243, 0.02) 0%, transparent 6%) 250 | `, 251 | backgroundSize: '60px 60px, 30px 30px', 252 | animation: 'techPulse 8s ease-in-out infinite' 253 | } 254 | }, 255 | { 256 | id: 17, 257 | name: 'Digital Echo', 258 | category: 'futuristic', 259 | description: 'Rippling data waves', 260 | style: { 261 | backgroundColor: '#0a0a0a', 262 | backgroundImage: ` 263 | repeating-linear-gradient( 264 | -45deg, 265 | transparent, 266 | transparent 1px, 267 | rgba(128, 103, 243, 0.02) 1px, 268 | rgba(128, 103, 243, 0.02) 2px 269 | ), 270 | repeating-linear-gradient( 271 | 45deg, 272 | transparent, 273 | transparent 1px, 274 | rgba(128, 103, 243, 0.02) 1px, 275 | rgba(128, 103, 243, 0.02) 2px 276 | ) 277 | `, 278 | backgroundSize: '30px 30px', 279 | animation: 'digitalEcho 20s linear infinite' 280 | } 281 | }, 282 | { 283 | id: 18, 284 | name: 'Circuit Flow', 285 | category: 'futuristic', 286 | description: 'Flowing circuit pathways', 287 | style: { 288 | backgroundColor: '#0a0a0a', 289 | backgroundImage: ` 290 | linear-gradient(0deg, transparent 95%, rgba(128, 103, 243, 0.03) 95%), 291 | linear-gradient(90deg, transparent 95%, rgba(128, 103, 243, 0.03) 95%) 292 | `, 293 | backgroundSize: '20px 20px', 294 | animation: 'circuitFlow 15s linear infinite' 295 | } 296 | }, 297 | { 298 | id: 19, 299 | name: 'Dotted Grid', 300 | category: 'patterns', 301 | description: 'Clear dot matrix layout', 302 | style: { 303 | backgroundColor: '#0a0a0a', 304 | backgroundImage: ` 305 | radial-gradient(rgba(128, 103, 243, 0.15) 1px, transparent 1px), 306 | radial-gradient(rgba(128, 103, 243, 0.1) 1px, transparent 1px) 307 | `, 308 | backgroundSize: '20px 20px, 40px 40px', 309 | backgroundPosition: '0 0, 10px 10px' 310 | } 311 | }, 312 | { 313 | id: 20, 314 | name: 'Wave Dots', 315 | category: 'patterns', 316 | description: 'Flowing dot pattern', 317 | style: { 318 | backgroundColor: '#0a0a0a', 319 | backgroundImage: ` 320 | radial-gradient(circle at 50% 50%, rgba(128, 103, 243, 0.12) 3px, transparent 3px) 321 | `, 322 | backgroundSize: '30px 30px', 323 | backgroundPosition: '0 0', 324 | animation: 'waveDots 10s linear infinite' 325 | } 326 | }, 327 | { 328 | id: 21, 329 | name: 'Pixel Rain', 330 | category: 'patterns', 331 | description: 'Digital rain effect', 332 | style: { 333 | backgroundColor: '#0a0a0a', 334 | backgroundImage: ` 335 | linear-gradient(0deg, 336 | rgba(128, 103, 243, 0.15) 25%, 337 | transparent 25%, 338 | transparent 50%, 339 | rgba(128, 103, 243, 0.15) 50%, 340 | rgba(128, 103, 243, 0.15) 75%, 341 | transparent 75%, 342 | transparent) 343 | `, 344 | backgroundSize: '10px 10px', 345 | animation: 'pixelRain 20s linear infinite' 346 | } 347 | }, 348 | { 349 | id: 22, 350 | name: 'Constellation', 351 | category: 'patterns', 352 | description: 'Connected dot network', 353 | style: { 354 | backgroundColor: '#0a0a0a', 355 | backgroundImage: ` 356 | radial-gradient(circle at center, rgba(128, 103, 243, 0.2) 2px, transparent 2px), 357 | linear-gradient(rgba(128, 103, 243, 0.1) 1px, transparent 1px), 358 | linear-gradient(90deg, rgba(128, 103, 243, 0.1) 1px, transparent 1px) 359 | `, 360 | backgroundSize: '40px 40px, 20px 20px, 20px 20px', 361 | backgroundPosition: '0 0, 10px 10px, 10px 10px' 362 | } 363 | }, 364 | { 365 | id: 23, 366 | name: 'Binary Flow', 367 | category: 'futuristic', 368 | description: 'Digital binary stream effect', 369 | style: { 370 | backgroundColor: '#0a0a0a', 371 | backgroundImage: ` 372 | linear-gradient(90deg, rgba(128, 103, 243, 0.03) 1px, transparent 1px), 373 | linear-gradient(180deg, rgba(128, 103, 243, 0.03) 1px, transparent 1px) 374 | `, 375 | backgroundSize: '8px 8px', 376 | animation: 'binaryFlow 15s linear infinite' 377 | } 378 | }, 379 | { 380 | id: 24, 381 | name: 'Cyber Maze', 382 | category: 'futuristic', 383 | description: 'Intricate tech maze pattern', 384 | style: { 385 | backgroundColor: '#0a0a0a', 386 | backgroundImage: ` 387 | linear-gradient(45deg, transparent 48%, rgba(128, 103, 243, 0.03) 49%, rgba(128, 103, 243, 0.03) 51%, transparent 52%), 388 | linear-gradient(-45deg, transparent 48%, rgba(128, 103, 243, 0.03) 49%, rgba(128, 103, 243, 0.03) 51%, transparent 52%) 389 | `, 390 | backgroundSize: '30px 30px', 391 | animation: 'cyberMaze 20s linear infinite' 392 | } 393 | }, 394 | { 395 | id: 25, 396 | name: 'Isometric Cubes', 397 | category: 'geometric', 398 | description: '3D cube illusion pattern', 399 | style: { 400 | backgroundColor: '#0a0a0a', 401 | backgroundImage: ` 402 | linear-gradient(30deg, rgba(128, 103, 243, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(128, 103, 243, 0.03) 87.5%, rgba(128, 103, 243, 0.03)), 403 | linear-gradient(150deg, rgba(128, 103, 243, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(128, 103, 243, 0.03) 87.5%, rgba(128, 103, 243, 0.03)), 404 | linear-gradient(30deg, rgba(128, 103, 243, 0.03) 12%, transparent 12.5%, transparent 87%, rgba(128, 103, 243, 0.03) 87.5%, rgba(128, 103, 243, 0.03)) 405 | `, 406 | backgroundSize: '80px 140px' 407 | } 408 | }, 409 | { 410 | id: 26, 411 | name: 'Octagon Grid', 412 | category: 'geometric', 413 | description: 'Complex octagonal pattern', 414 | style: { 415 | backgroundColor: '#0a0a0a', 416 | backgroundImage: ` 417 | linear-gradient(45deg, rgba(128, 103, 243, 0.03) 25%, transparent 25%), 418 | linear-gradient(-45deg, rgba(128, 103, 243, 0.03) 25%, transparent 25%), 419 | linear-gradient(45deg, transparent 75%, rgba(128, 103, 243, 0.03) 75%), 420 | linear-gradient(-45deg, transparent 75%, rgba(128, 103, 243, 0.03) 75%) 421 | `, 422 | backgroundSize: '40px 40px', 423 | backgroundPosition: '0 0, 20px 0, 20px -20px, 0 20px' 424 | } 425 | }, 426 | { 427 | id: 27, 428 | name: 'Micro Circles', 429 | category: 'patterns', 430 | description: 'Tiny circular dot matrix', 431 | style: { 432 | backgroundColor: '#0a0a0a', 433 | backgroundImage: ` 434 | radial-gradient(circle at center, rgba(128, 103, 243, 0.15) 1.5px, transparent 1.5px) 435 | `, 436 | backgroundSize: '15px 15px', 437 | backgroundPosition: '0 0' 438 | } 439 | }, 440 | { 441 | id: 28, 442 | name: 'Diagonal Dash', 443 | category: 'patterns', 444 | description: 'Subtle diagonal line pattern', 445 | style: { 446 | backgroundColor: '#0a0a0a', 447 | backgroundImage: ` 448 | repeating-linear-gradient( 449 | 45deg, 450 | transparent, 451 | transparent 2px, 452 | rgba(128, 103, 243, 0.1) 2px, 453 | rgba(128, 103, 243, 0.1) 4px 454 | ) 455 | `, 456 | backgroundSize: '10px 10px' 457 | } 458 | }, 459 | { 460 | id: 29, 461 | name: 'Binary Rain', 462 | category: 'matrix', 463 | description: 'Digital code rain effect', 464 | style: { 465 | backgroundColor: '#0a0a0a', 466 | backgroundImage: ` 467 | repeating-linear-gradient(0deg, 468 | rgba(0, 255, 0, 0.15) 0px, 469 | rgba(0, 255, 0, 0.15) 1px, 470 | transparent 1px, 471 | transparent 2px 472 | ), 473 | repeating-linear-gradient(90deg, 474 | rgba(0, 255, 0, 0.15) 0px, 475 | rgba(0, 255, 0, 0.15) 1px, 476 | transparent 1px, 477 | transparent 4px 478 | ) 479 | `, 480 | backgroundSize: '4px 4px', 481 | animation: 'matrixRain 20s linear infinite' 482 | } 483 | }, 484 | { 485 | id: 30, 486 | name: 'Code Flow', 487 | category: 'matrix', 488 | description: 'Scrolling code pattern', 489 | style: { 490 | backgroundColor: '#0a0a0a', 491 | backgroundImage: ` 492 | repeating-linear-gradient(0deg, 493 | transparent 0px, 494 | transparent 3px, 495 | rgba(32, 224, 159, 0.1) 3px, 496 | rgba(32, 224, 159, 0.1) 6px 497 | ), 498 | repeating-linear-gradient(90deg, 499 | rgba(32, 224, 159, 0.1) 0px, 500 | rgba(32, 224, 159, 0.1) 1px, 501 | transparent 1px, 502 | transparent 8px 503 | ) 504 | `, 505 | backgroundSize: '8px 8px', 506 | animation: 'codeFlow 15s linear infinite' 507 | } 508 | }, 509 | { 510 | id: 31, 511 | name: 'Data Stream', 512 | category: 'matrix', 513 | description: 'Binary data stream', 514 | style: { 515 | backgroundColor: '#0a0a0a', 516 | backgroundImage: ` 517 | repeating-linear-gradient(45deg, 518 | rgba(32, 224, 159, 0.1) 0px, 519 | rgba(32, 224, 159, 0.1) 1px, 520 | transparent 1px, 521 | transparent 2px 522 | ), 523 | repeating-linear-gradient(-45deg, 524 | rgba(32, 224, 159, 0.1) 0px, 525 | rgba(32, 224, 159, 0.1) 1px, 526 | transparent 1px, 527 | transparent 4px 528 | ) 529 | `, 530 | backgroundSize: '6px 6px', 531 | animation: 'dataStream 10s linear infinite' 532 | } 533 | }, 534 | { 535 | id: 32, 536 | name: 'Terminal Grid', 537 | category: 'matrix', 538 | description: 'Retro terminal interface', 539 | style: { 540 | backgroundColor: '#0a0a0a', 541 | backgroundImage: ` 542 | linear-gradient(rgba(32, 224, 159, 0.1) 1px, transparent 1px), 543 | linear-gradient(90deg, rgba(32, 224, 159, 0.1) 1px, transparent 1px), 544 | radial-gradient(rgba(32, 224, 159, 0.1) 1px, transparent 1px) 545 | `, 546 | backgroundSize: '20px 20px, 20px 20px, 10px 10px', 547 | backgroundPosition: '0 0, 0 0, 10px 10px', 548 | animation: 'terminalPulse 4s ease-in-out infinite' 549 | } 550 | }, 551 | { 552 | id: 33, 553 | name: 'ASCII Rain', 554 | category: 'codescape', 555 | description: 'Falling ASCII characters', 556 | style: { 557 | backgroundColor: '#0a0a0a', 558 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' fill='rgba(32, 224, 159, 0.15)' font-family='monospace'%3E01%3C/text%3E%3Ctext x='40' y='40' fill='rgba(32, 224, 159, 0.1)' font-family='monospace'%3E10%3C/text%3E%3Ctext x='70' y='60' fill='rgba(32, 224, 159, 0.15)' font-family='monospace'%3E11%3C/text%3E%3Ctext x='20' y='80' fill='rgba(32, 224, 159, 0.1)' font-family='monospace'%3E00%3C/text%3E%3C/svg%3E")`, 559 | backgroundSize: '100px 100px', 560 | animation: 'asciiRain 20s linear infinite' 561 | } 562 | }, 563 | { 564 | id: 34, 565 | name: 'Function Flow', 566 | category: 'codescape', 567 | description: 'Flowing code snippets', 568 | style: { 569 | backgroundColor: '#0a0a0a', 570 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3Efunction()%3C/text%3E%3Ctext x='50' y='60' fill='rgba(128, 103, 243, 0.15)' font-family='monospace'%3E%7B%7D%3C/text%3E%3Ctext x='30' y='100' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3Ereturn%3C/text%3E%3Ctext x='70' y='140' fill='rgba(128, 103, 243, 0.15)' font-family='monospace'%3E%3D%3E%3C/text%3E%3C/svg%3E")`, 571 | backgroundSize: '200px 200px', 572 | animation: 'codeArtFlow 15s linear infinite' 573 | } 574 | }, 575 | { 576 | id: 35, 577 | name: 'Variable Grid', 578 | category: 'codescape', 579 | description: 'Grid of programming variables', 580 | style: { 581 | backgroundColor: '#0a0a0a', 582 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' fill='rgba(128, 103, 243, 0.12)' font-family='monospace'%3Econst%3C/text%3E%3Ctext x='60' y='70' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3Elet%3C/text%3E%3Ctext x='20' y='110' fill='rgba(128, 103, 243, 0.12)' font-family='monospace'%3Evar%3C/text%3E%3C/svg%3E")`, 583 | backgroundSize: '150px 150px', 584 | animation: 'variableGrid 25s linear infinite' 585 | } 586 | }, 587 | { 588 | id: 36, 589 | name: 'Code Comments', 590 | category: 'codescape', 591 | description: 'Subtle code documentation', 592 | style: { 593 | backgroundColor: '#0a0a0a', 594 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='250' height='250' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='40' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E// TODO:%3C/text%3E%3Ctext x='50' y='100' fill='rgba(128, 103, 243, 0.06)' font-family='monospace'%3E/* Fix */%3C/text%3E%3Ctext x='30' y='160' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E%23include%3C/text%3E%3Ctext x='70' y='220' fill='rgba(128, 103, 243, 0.06)' font-family='monospace'%3E%23define%3C/text%3E%3C/svg%3E")`, 595 | backgroundSize: '250px 250px', 596 | animation: 'codeComments 30s linear infinite' 597 | } 598 | }, 599 | { 600 | id: 37, 601 | name: 'React Code', 602 | category: 'codescape', 603 | description: 'React component patterns', 604 | style: { 605 | backgroundColor: '#0a0a0a', 606 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3Eimport React from 'react'%3C/text%3E%3Ctext x='10' y='60' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3Econst App = () => {%3C/text%3E%3Ctext x='20' y='90' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3Ereturn (%3C/text%3E%3Ctext x='30' y='120' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E<div>%3C/text%3E%3Ctext x='40' y='150' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3E<h1>Hello</h1>%3C/text%3E%3Ctext x='30' y='180' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E</div>%3C/text%3E%3Ctext x='20' y='210' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3E)%3C/text%3E%3Ctext x='10' y='240' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E}%3C/text%3E%3C/svg%3E")`, 607 | backgroundSize: '300px 300px', 608 | animation: 'reactCode 30s linear infinite' 609 | } 610 | }, 611 | { 612 | id: 38, 613 | name: 'Git Commands', 614 | category: 'codescape', 615 | description: 'Common git operations', 616 | style: { 617 | backgroundColor: '#0a0a0a', 618 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='250' height='250' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' fill='rgba(128, 103, 243, 0.12)' font-family='monospace'%3Egit init%3C/text%3E%3Ctext x='40' y='70' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3Egit add .%3C/text%3E%3Ctext x='20' y='110' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3Egit commit%3C/text%3E%3Ctext x='50' y='150' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3Egit push%3C/text%3E%3Ctext x='30' y='190' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3Egit merge%3C/text%3E%3C/svg%3E")`, 619 | backgroundSize: '250px 250px', 620 | animation: 'gitCommands 25s linear infinite' 621 | } 622 | }, 623 | { 624 | id: 39, 625 | name: 'Terminal Commands', 626 | category: 'codescape', 627 | description: 'CLI command pattern', 628 | style: { 629 | backgroundColor: '#0a0a0a', 630 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='280' height='280' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' fill='rgba(32, 224, 159, 0.12)' font-family='monospace'%3E$ npm install%3C/text%3E%3Ctext x='20' y='70' fill='rgba(32, 224, 159, 0.08)' font-family='monospace'%3E$ cd project%3C/text%3E%3Ctext x='15' y='110' fill='rgba(32, 224, 159, 0.1)' font-family='monospace'%3E$ ls -la%3C/text%3E%3Ctext x='25' y='150' fill='rgba(32, 224, 159, 0.08)' font-family='monospace'%3E$ mkdir new%3C/text%3E%3C/svg%3E")`, 631 | backgroundSize: '280px 280px', 632 | animation: 'terminalCommands 20s linear infinite' 633 | } 634 | }, 635 | { 636 | id: 40, 637 | name: 'CSS Rules', 638 | category: 'codescape', 639 | description: 'Stylish CSS patterns', 640 | style: { 641 | backgroundColor: '#0a0a0a', 642 | backgroundImage: `url("data:image/svg+xml,%3Csvg width='320' height='320' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3E.container {%3C/text%3E%3Ctext x='20' y='60' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E display: flex;%3C/text%3E%3Ctext x='20' y='90' fill='rgba(128, 103, 243, 0.1)' font-family='monospace'%3E gap: 1rem;%3C/text%3E%3Ctext x='10' y='120' fill='rgba(128, 103, 243, 0.08)' font-family='monospace'%3E}%3C/text%3E%3C/svg%3E")`, 643 | backgroundSize: '320px 320px', 644 | animation: 'cssRules 35s linear infinite' 645 | } 646 | }, 647 | { 648 | id: 41, 649 | name: 'Dark Nebula', 650 | category: 'gradients', 651 | description: 'Deep space nebula effect', 652 | style: { 653 | backgroundColor: '#0a0a0a', 654 | backgroundImage: 'linear-gradient(125deg, #0a0a0a 0%, #2d1b4e 29%, #1a0b2e 67%, #0a0a0a 100%)', 655 | backgroundSize: '200% 200%', 656 | animation: 'gradientFlow 15s ease infinite' 657 | } 658 | }, 659 | { 660 | id: 42, 661 | name: 'Cyber Punk', 662 | category: 'gradients', 663 | description: 'Neon city vibes', 664 | style: { 665 | backgroundColor: '#0a0a0a', 666 | backgroundImage: 'linear-gradient(45deg, #0a0a0a 0%, #1a0b2e 30%, #2d0a2e 70%, #0a0a0a 100%)', 667 | backgroundSize: '200% 200%', 668 | animation: 'gradientPulse 12s ease infinite' 669 | } 670 | }, 671 | { 672 | id: 43, 673 | name: 'Dark Matter', 674 | category: 'gradients', 675 | description: 'Cosmic dark matter flow', 676 | style: { 677 | backgroundColor: '#0a0a0a', 678 | backgroundImage: ` 679 | radial-gradient(circle at 50% 50%, #1a0b2e 0%, #0a0a0a 100%), 680 | linear-gradient(45deg, #2d1b4e 0%, transparent 100%) 681 | `, 682 | backgroundSize: '200% 200%', 683 | animation: 'darkMatter 20s ease infinite' 684 | } 685 | }, 686 | { 687 | id: 44, 688 | name: 'Shadow Realm', 689 | category: 'gradients', 690 | description: 'Mysterious dark realm', 691 | style: { 692 | backgroundColor: '#0a0a0a', 693 | backgroundImage: ` 694 | linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #0a0a0a 50%, #2d1b4e 75%, #0a0a0a 100%) 695 | `, 696 | backgroundSize: '400% 400%', 697 | animation: 'shadowRealm 25s ease infinite' 698 | } 699 | }, 700 | { 701 | id: 45, 702 | name: 'Deep Ocean', 703 | category: 'gradients', 704 | description: 'Abyssal ocean depths', 705 | style: { 706 | backgroundColor: '#0a0a0a', 707 | backgroundImage: ` 708 | linear-gradient(180deg, #0a0a0a 0%, #0a192f 35%, #0a1f3f 75%, #0a0a0a 100%) 709 | `, 710 | backgroundSize: '200% 200%', 711 | animation: 'deepOcean 18s ease infinite' 712 | } 713 | }, 714 | { 715 | id: 46, 716 | name: 'Dark Energy', 717 | category: 'gradients', 718 | description: 'Cosmic dark energy waves', 719 | style: { 720 | backgroundColor: '#0a0a0a', 721 | backgroundImage: ` 722 | radial-gradient(circle at 30% 50%, #1a0b2e 0%, transparent 50%), 723 | radial-gradient(circle at 70% 50%, #2d1b4e 0%, #0a0a0a 50%) 724 | `, 725 | backgroundSize: '200% 200%', 726 | animation: 'darkEnergy 22s ease infinite' 727 | } 728 | }, 729 | { 730 | id: 47, 731 | name: 'Neural Network', 732 | category: 'matrix', 733 | description: 'AI network visualization', 734 | style: { 735 | backgroundColor: '#0a0a0a', 736 | backgroundImage: ` 737 | radial-gradient(circle at 50% 50%, rgba(32, 224, 159, 0.1) 2px, transparent 2px), 738 | linear-gradient(0deg, 739 | rgba(32, 224, 159, 0.05) 1px, 740 | transparent 1px 741 | ), 742 | linear-gradient(90deg, 743 | rgba(32, 224, 159, 0.05) 1px, 744 | transparent 1px 745 | ) 746 | `, 747 | backgroundSize: '40px 40px, 20px 20px, 20px 20px', 748 | animation: 'neuralMatrix 20s linear infinite' 749 | } 750 | }, 751 | { 752 | id: 48, 753 | name: 'Digital Rain Pro', 754 | category: 'matrix', 755 | description: 'Enhanced matrix rain effect', 756 | style: { 757 | backgroundColor: '#0a0a0a', 758 | backgroundImage: ` 759 | repeating-linear-gradient(90deg, 760 | rgba(32, 224, 159, 0.15) 0px, 761 | rgba(32, 224, 159, 0.15) 1px, 762 | transparent 1px, 763 | transparent 3px 764 | ), 765 | repeating-linear-gradient(0deg, 766 | rgba(32, 224, 159, 0) 0px, 767 | rgba(32, 224, 159, 0.15) 2px, 768 | rgba(32, 224, 159, 0) 4px, 769 | transparent 4px, 770 | transparent 8px 771 | ) 772 | `, 773 | backgroundSize: '4px 8px', 774 | animation: 'digitalRainPro 15s linear infinite' 775 | } 776 | }, 777 | { 778 | id: 49, 779 | name: 'Quantum Data', 780 | category: 'matrix', 781 | description: 'Quantum computing visualization', 782 | style: { 783 | backgroundColor: '#0a0a0a', 784 | backgroundImage: ` 785 | radial-gradient(circle at 25% 25%, rgba(32, 224, 159, 0.1) 0%, transparent 50%), 786 | radial-gradient(circle at 75% 75%, rgba(32, 224, 159, 0.1) 0%, transparent 50%), 787 | linear-gradient(90deg, 788 | transparent 0%, 789 | rgba(32, 224, 159, 0.05) 25%, 790 | rgba(32, 224, 159, 0.05) 75%, 791 | transparent 100% 792 | ) 793 | `, 794 | backgroundSize: '50px 50px, 50px 50px, 10px 10px', 795 | animation: 'quantumData 25s linear infinite' 796 | } 797 | }, 798 | { 799 | id: 50, 800 | name: 'Cyber Grid', 801 | category: 'matrix', 802 | description: 'Advanced cyberpunk grid', 803 | style: { 804 | backgroundColor: '#0a0a0a', 805 | backgroundImage: ` 806 | linear-gradient(0deg, transparent 24%, 807 | rgba(32, 224, 159, 0.05) 25%, 808 | rgba(32, 224, 159, 0.05) 26%, 809 | transparent 27%, 810 | transparent 74%, 811 | rgba(32, 224, 159, 0.05) 75%, 812 | rgba(32, 224, 159, 0.05) 76%, 813 | transparent 77%), 814 | linear-gradient(90deg, transparent 24%, 815 | rgba(32, 224, 159, 0.05) 25%, 816 | rgba(32, 224, 159, 0.05) 26%, 817 | transparent 27%, 818 | transparent 74%, 819 | rgba(32, 224, 159, 0.05) 75%, 820 | rgba(32, 224, 159, 0.05) 76%, 821 | transparent 77%) 822 | `, 823 | backgroundSize: '30px 30px', 824 | animation: 'cyberGridPulse 20s ease infinite' 825 | } 826 | }, 827 | { 828 | id: 51, 829 | name: 'Binary Pulse', 830 | category: 'matrix', 831 | description: 'Pulsing binary code effect', 832 | style: { 833 | backgroundColor: '#0a0a0a', 834 | backgroundImage: ` 835 | repeating-linear-gradient(45deg, 836 | rgba(32, 224, 159, 0.1) 0px, 837 | rgba(32, 224, 159, 0.1) 2px, 838 | transparent 2px, 839 | transparent 4px 840 | ), 841 | repeating-linear-gradient(-45deg, 842 | rgba(32, 224, 159, 0.05) 0px, 843 | rgba(32, 224, 159, 0.05) 2px, 844 | transparent 2px, 845 | transparent 4px 846 | ) 847 | `, 848 | backgroundSize: '8px 8px', 849 | animation: 'binaryPulse 15s linear infinite' 850 | } 851 | } 852 | ] -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --page-backgroundColor: transparent; 7 | --page-backgroundImage: none; 8 | --page-backgroundSize: auto; 9 | --page-backgroundPosition: 0 0; 10 | --animation-play-state: running; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 16 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 17 | sans-serif; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | background-color: var(--page-backgroundColor); 21 | background-image: var(--page-backgroundImage); 22 | background-size: var(--page-backgroundSize); 23 | background-position: var(--page-backgroundPosition); 24 | transition: background-color 0.3s, background-image 0.3s; 25 | } 26 | 27 | * { 28 | animation-play-state: var(--animation-play-state) !important; 29 | } 30 | 31 | .no-scrollbar::-webkit-scrollbar { 32 | display: none; 33 | } 34 | 35 | .no-scrollbar { 36 | -ms-overflow-style: none; 37 | scrollbar-width: none; 38 | } 39 | 40 | @layer utilities { 41 | .clip-glitch { 42 | clip-path: polygon( 43 | 0 0, 44 | 100% 0, 45 | 100% 100%, 46 | 0 100% 47 | ); 48 | animation: glitch-clip 4s infinite linear; 49 | } 50 | } 51 | 52 | @keyframes glitch-clip { 53 | 0% { 54 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 55 | } 56 | 2% { 57 | clip-path: polygon(0 15%, 100% 15%, 100% 85%, 0 85%); 58 | } 59 | 4% { 60 | clip-path: polygon(0 10%, 100% 10%, 100% 90%, 0 90%); 61 | } 62 | 6% { 63 | clip-path: polygon(0 5%, 100% 5%, 100% 95%, 0 95%); 64 | } 65 | 8% { 66 | clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%); 67 | } 68 | 10% { 69 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 70 | } 71 | } 72 | 73 | .animate-drip { 74 | animation-fill-mode: both; 75 | transform-origin: top; 76 | } 77 | 78 | .animate-drip-head { 79 | animation-fill-mode: both; 80 | } 81 | 82 | @keyframes dripping { 83 | 0% { 84 | height: 0; 85 | opacity: 0.7; 86 | } 87 | 20% { 88 | height: 40px; 89 | opacity: 0.7; 90 | } 91 | 100% { 92 | height: 40px; 93 | opacity: 0; 94 | transform: translateY(100px); 95 | } 96 | } 97 | 98 | @keyframes droplet { 99 | 0% { 100 | transform: scale(1); 101 | opacity: 0.7; 102 | } 103 | 100% { 104 | transform: scale(0.3) translateY(100px); 105 | opacity: 0; 106 | } 107 | } 108 | 109 | .dripping-text { 110 | position: relative; 111 | display: inline-block; 112 | } 113 | 114 | .drip { 115 | position: absolute; 116 | background: linear-gradient(180deg, rgba(139, 92, 246, 0.8) 0%, rgba(139, 92, 246, 0) 100%); 117 | transform-origin: top; 118 | } 119 | 120 | .droplet { 121 | position: absolute; 122 | background: linear-gradient(180deg, rgba(139, 92, 246, 0.8) 0%, rgba(139, 92, 246, 0.3) 100%); 123 | border-radius: 50%; 124 | } 125 | 126 | .liquid-effect { 127 | filter: url(#goo); 128 | } 129 | 130 | .drip-container { 131 | position: relative; 132 | overflow: visible; 133 | } 134 | 135 | .drip { 136 | position: absolute; 137 | background: currentColor; 138 | transform-origin: top; 139 | will-change: transform; 140 | } 141 | 142 | .droplet { 143 | position: absolute; 144 | background: currentColor; 145 | border-radius: 50%; 146 | will-change: transform; 147 | } 148 | 149 | .drip, .droplet { 150 | transition: opacity 0.2s ease-in-out; 151 | } 152 | 153 | * { 154 | backface-visibility: hidden; 155 | -webkit-font-smoothing: subpixel-antialiased; 156 | } 157 | 158 | .animate-drip-line { 159 | transform-origin: top; 160 | animation-fill-mode: forwards; 161 | will-change: height, opacity; 162 | } 163 | 164 | .animate-drip-drop { 165 | animation-fill-mode: forwards; 166 | will-change: transform, opacity; 167 | } 168 | 169 | /* Remove any conflicting animations from previous versions */ 170 | .drip, .droplet, .drip-line, .drip-drop { 171 | animation-fill-mode: forwards; 172 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | animation: { 10 | 'glow': 'glow 3s ease-in-out infinite', 11 | 'glow-wide': 'glowWide 6s ease-in-out infinite', 12 | 'slide': 'slide 5s linear infinite', 13 | 'pulse-subtle': 'pulseSubtle 4s ease-in-out infinite', 14 | 'neuralPulse': 'neuralPulse 10s ease infinite', 15 | 'dataFlow': 'dataFlow 20s linear infinite', 16 | 'quantumShift': 'quantumShift 15s ease infinite', 17 | 'techPulse': 'techPulse 8s ease-in-out infinite', 18 | 'digitalEcho': 'digitalEcho 20s linear infinite', 19 | 'circuitFlow': 'circuitFlow 15s linear infinite', 20 | 'waveDots': 'waveDots 10s linear infinite', 21 | 'pixelRain': 'pixelRain 20s linear infinite', 22 | 'binaryFlow': 'binaryFlow 15s linear infinite', 23 | 'cyberMaze': 'cyberMaze 20s linear infinite', 24 | 'matrixRain': 'matrixRain 20s linear infinite', 25 | 'codeFlow': 'codeFlow 15s linear infinite', 26 | 'dataStream': 'dataStream 10s linear infinite', 27 | 'terminalPulse': 'terminalPulse 4s ease-in-out infinite', 28 | 'asciiRain': 'asciiRain 20s linear infinite', 29 | 'codeArtFlow': 'codeArtFlow 15s linear infinite', 30 | 'variableGrid': 'variableGrid 25s linear infinite', 31 | 'codeComments': 'codeComments 30s linear infinite', 32 | 'reactCode': 'reactCode 30s linear infinite', 33 | 'gitCommands': 'gitCommands 25s linear infinite', 34 | 'terminalCommands': 'terminalCommands 20s linear infinite', 35 | 'cssRules': 'cssRules 35s linear infinite', 36 | 'gradientFlow': 'gradientFlow 15s ease infinite', 37 | 'gradientPulse': 'gradientPulse 12s ease infinite', 38 | 'darkMatter': 'darkMatter 20s ease infinite', 39 | 'shadowRealm': 'shadowRealm 25s ease infinite', 40 | 'deepOcean': 'deepOcean 18s ease infinite', 41 | 'darkEnergy': 'darkEnergy 22s ease infinite', 42 | 'neuralMatrix': 'neuralMatrix 20s linear infinite', 43 | 'digitalRainPro': 'digitalRainPro 15s linear infinite', 44 | 'quantumData': 'quantumData 25s linear infinite', 45 | 'cyberGridPulse': 'cyberGridPulse 20s ease infinite', 46 | 'binaryPulse': 'binaryPulse 15s linear infinite', 47 | 'borderFlow': 'borderFlow 2s linear infinite', 48 | 'borderFlowVertical': 'borderFlowVertical 2s linear infinite', 49 | }, 50 | keyframes: { 51 | glow: { 52 | '0%, 100%': { 53 | opacity: 0.7, 54 | transform: 'scaleX(0.95)', 55 | filter: 'blur(8px)', 56 | }, 57 | '50%': { 58 | opacity: 1, 59 | transform: 'scaleX(1.05)', 60 | filter: 'blur(12px)', 61 | } 62 | }, 63 | glowWide: { 64 | '0%, 100%': { 65 | opacity: 0.5, 66 | transform: 'scaleX(0.9)', 67 | }, 68 | '50%': { 69 | opacity: 0.8, 70 | transform: 'scaleX(1.1)', 71 | } 72 | }, 73 | slide: { 74 | '0%': { 75 | transform: 'translateX(-100%) translateY(-50%)', 76 | }, 77 | '100%': { 78 | transform: 'translateX(400%) translateY(-50%)', 79 | } 80 | }, 81 | pulseSubtle: { 82 | '0%, 100%': { 83 | opacity: 0.3, 84 | transform: 'scaleY(1)', 85 | }, 86 | '50%': { 87 | opacity: 0.5, 88 | transform: 'scaleY(1.2)', 89 | }, 90 | }, 91 | neuralPulse: { 92 | '0%, 100%': { 93 | backgroundSize: '60px 60px, 60px 60px, 60px 60px, 30px 30px, 30px 30px', 94 | filter: 'hue-rotate(0deg)', 95 | }, 96 | '50%': { 97 | backgroundSize: '65px 65px, 65px 65px, 65px 65px, 32px 32px, 32px 32px', 98 | filter: 'hue-rotate(45deg)', 99 | } 100 | }, 101 | dataFlow: { 102 | '0%': { 103 | backgroundPosition: '0 0, 25px 25px', 104 | opacity: 0.8, 105 | }, 106 | '50%': { 107 | opacity: 1, 108 | }, 109 | '100%': { 110 | backgroundPosition: '50px 0, 75px 25px', 111 | opacity: 0.8, 112 | } 113 | }, 114 | quantumShift: { 115 | '0%, 100%': { 116 | backgroundSize: '40px 40px, 40px 40px, 200px 200px, 400px 400px', 117 | filter: 'hue-rotate(0deg) brightness(1)', 118 | }, 119 | '50%': { 120 | backgroundSize: '40px 40px, 40px 40px, 220px 220px, 420px 420px', 121 | filter: 'hue-rotate(30deg) brightness(1.1)', 122 | } 123 | }, 124 | techPulse: { 125 | '0%, 100%': { 126 | backgroundSize: '60px 60px, 30px 30px', 127 | filter: 'hue-rotate(0deg)', 128 | }, 129 | '50%': { 130 | backgroundSize: '65px 65px, 35px 35px', 131 | filter: 'hue-rotate(30deg)', 132 | } 133 | }, 134 | digitalEcho: { 135 | '0%': { 136 | backgroundPosition: '0 0', 137 | opacity: 0.8, 138 | }, 139 | '50%': { 140 | opacity: 1, 141 | }, 142 | '100%': { 143 | backgroundPosition: '30px 30px', 144 | opacity: 0.8, 145 | } 146 | }, 147 | circuitFlow: { 148 | '0%, 100%': { 149 | backgroundPosition: '0 0', 150 | filter: 'hue-rotate(0deg)', 151 | }, 152 | '50%': { 153 | backgroundPosition: '10px 10px', 154 | filter: 'hue-rotate(15deg)', 155 | } 156 | }, 157 | waveDots: { 158 | '0%, 100%': { 159 | backgroundPosition: '0 0', 160 | filter: 'hue-rotate(0deg)', 161 | }, 162 | '50%': { 163 | backgroundPosition: '15px 15px', 164 | filter: 'hue-rotate(180deg)', 165 | } 166 | }, 167 | pixelRain: { 168 | '0%': { 169 | backgroundPosition: '0 0', 170 | }, 171 | '100%': { 172 | backgroundPosition: '0 100px', 173 | } 174 | }, 175 | binaryFlow: { 176 | '0%': { 177 | backgroundPosition: '0 0', 178 | filter: 'hue-rotate(0deg)', 179 | }, 180 | '100%': { 181 | backgroundPosition: '0 100px', 182 | filter: 'hue-rotate(360deg)', 183 | } 184 | }, 185 | cyberMaze: { 186 | '0%': { 187 | backgroundPosition: '0 0', 188 | filter: 'hue-rotate(0deg) brightness(1)', 189 | }, 190 | '50%': { 191 | filter: 'hue-rotate(180deg) brightness(1.2)', 192 | }, 193 | '100%': { 194 | backgroundPosition: '30px 30px', 195 | filter: 'hue-rotate(360deg) brightness(1)', 196 | } 197 | }, 198 | matrixRain: { 199 | '0%': { 200 | backgroundPosition: '0 0', 201 | filter: 'hue-rotate(0deg) brightness(1)', 202 | }, 203 | '50%': { 204 | filter: 'hue-rotate(180deg) brightness(1.2)', 205 | }, 206 | '100%': { 207 | backgroundPosition: '0 100px', 208 | filter: 'hue-rotate(360deg) brightness(1)', 209 | } 210 | }, 211 | codeFlow: { 212 | '0%': { 213 | backgroundPosition: '0 0', 214 | opacity: 0.8, 215 | }, 216 | '50%': { 217 | opacity: 1, 218 | }, 219 | '100%': { 220 | backgroundPosition: '0 50px', 221 | opacity: 0.8, 222 | } 223 | }, 224 | dataStream: { 225 | '0%': { 226 | backgroundPosition: '0 0', 227 | filter: 'hue-rotate(0deg)', 228 | }, 229 | '100%': { 230 | backgroundPosition: '12px 12px', 231 | filter: 'hue-rotate(360deg)', 232 | } 233 | }, 234 | terminalPulse: { 235 | '0%, 100%': { 236 | opacity: 0.8, 237 | filter: 'brightness(1) hue-rotate(0deg)', 238 | }, 239 | '50%': { 240 | opacity: 1, 241 | filter: 'brightness(1.2) hue-rotate(30deg)', 242 | } 243 | }, 244 | asciiRain: { 245 | '0%': { 246 | backgroundPosition: '0 0', 247 | filter: 'hue-rotate(0deg)', 248 | }, 249 | '100%': { 250 | backgroundPosition: '0 1000px', 251 | filter: 'hue-rotate(360deg)', 252 | } 253 | }, 254 | codeArtFlow: { 255 | '0%': { 256 | backgroundPosition: '0 0', 257 | filter: 'hue-rotate(0deg) brightness(1)', 258 | }, 259 | '50%': { 260 | filter: 'hue-rotate(180deg) brightness(1.1)', 261 | }, 262 | '100%': { 263 | backgroundPosition: '200px 200px', 264 | filter: 'hue-rotate(360deg) brightness(1)', 265 | } 266 | }, 267 | variableGrid: { 268 | '0%': { 269 | backgroundPosition: '0 0', 270 | filter: 'hue-rotate(0deg)', 271 | }, 272 | '100%': { 273 | backgroundPosition: '150px 150px', 274 | filter: 'hue-rotate(360deg)', 275 | } 276 | }, 277 | codeComments: { 278 | '0%': { 279 | backgroundPosition: '0 0', 280 | opacity: 0.8, 281 | }, 282 | '50%': { 283 | opacity: 1, 284 | }, 285 | '100%': { 286 | backgroundPosition: '250px 250px', 287 | opacity: 0.8, 288 | } 289 | }, 290 | reactCode: { 291 | '0%': { 292 | backgroundPosition: '0 0', 293 | filter: 'hue-rotate(0deg) brightness(1)', 294 | }, 295 | '50%': { 296 | filter: 'hue-rotate(180deg) brightness(1.1)', 297 | }, 298 | '100%': { 299 | backgroundPosition: '0 600px', 300 | filter: 'hue-rotate(360deg) brightness(1)', 301 | } 302 | }, 303 | gitCommands: { 304 | '0%': { 305 | backgroundPosition: '0 0', 306 | filter: 'hue-rotate(0deg)', 307 | }, 308 | '100%': { 309 | backgroundPosition: '250px 250px', 310 | filter: 'hue-rotate(360deg)', 311 | } 312 | }, 313 | terminalCommands: { 314 | '0%': { 315 | backgroundPosition: '0 0', 316 | opacity: 0.8, 317 | }, 318 | '50%': { 319 | opacity: 1, 320 | }, 321 | '100%': { 322 | backgroundPosition: '0 280px', 323 | opacity: 0.8, 324 | } 325 | }, 326 | cssRules: { 327 | '0%': { 328 | backgroundPosition: '0 0', 329 | filter: 'hue-rotate(0deg) brightness(1)', 330 | }, 331 | '50%': { 332 | filter: 'hue-rotate(180deg) brightness(1.2)', 333 | }, 334 | '100%': { 335 | backgroundPosition: '320px 320px', 336 | filter: 'hue-rotate(360deg) brightness(1)', 337 | } 338 | }, 339 | gradientFlow: { 340 | '0%, 100%': { 341 | backgroundPosition: '0% 50%', 342 | filter: 'brightness(1)', 343 | }, 344 | '50%': { 345 | backgroundPosition: '100% 50%', 346 | filter: 'brightness(1.2)', 347 | } 348 | }, 349 | gradientPulse: { 350 | '0%, 100%': { 351 | backgroundPosition: '0% 0%', 352 | filter: 'hue-rotate(0deg)', 353 | }, 354 | '50%': { 355 | backgroundPosition: '100% 100%', 356 | filter: 'hue-rotate(30deg)', 357 | } 358 | }, 359 | darkMatter: { 360 | '0%, 100%': { 361 | backgroundPosition: '0% 50%', 362 | filter: 'brightness(1)', 363 | }, 364 | '50%': { 365 | backgroundPosition: '100% 50%', 366 | filter: 'brightness(1.1)', 367 | } 368 | }, 369 | shadowRealm: { 370 | '0%, 100%': { 371 | backgroundPosition: '0% 50%', 372 | }, 373 | '50%': { 374 | backgroundPosition: '100% 50%', 375 | } 376 | }, 377 | deepOcean: { 378 | '0%, 100%': { 379 | backgroundPosition: '50% 0%', 380 | filter: 'brightness(1)', 381 | }, 382 | '50%': { 383 | backgroundPosition: '50% 100%', 384 | filter: 'brightness(1.15)', 385 | } 386 | }, 387 | darkEnergy: { 388 | '0%, 100%': { 389 | backgroundPosition: '0% 50%', 390 | filter: 'hue-rotate(0deg)', 391 | }, 392 | '50%': { 393 | backgroundPosition: '100% 50%', 394 | filter: 'hue-rotate(15deg)', 395 | } 396 | }, 397 | neuralMatrix: { 398 | '0%': { 399 | backgroundPosition: '0 0', 400 | filter: 'hue-rotate(0deg) brightness(1)', 401 | }, 402 | '50%': { 403 | filter: 'hue-rotate(180deg) brightness(1.2)', 404 | }, 405 | '100%': { 406 | backgroundPosition: '40px 40px', 407 | filter: 'hue-rotate(360deg) brightness(1)', 408 | } 409 | }, 410 | digitalRainPro: { 411 | '0%': { 412 | backgroundPosition: '0 0', 413 | filter: 'brightness(1)', 414 | }, 415 | '100%': { 416 | backgroundPosition: '0 16px', 417 | filter: 'brightness(1.2)', 418 | } 419 | }, 420 | quantumData: { 421 | '0%, 100%': { 422 | backgroundPosition: '0 0, 0 0, 0 0', 423 | filter: 'hue-rotate(0deg)', 424 | }, 425 | '50%': { 426 | backgroundPosition: '25px 25px, -25px -25px, 5px 0', 427 | filter: 'hue-rotate(180deg)', 428 | } 429 | }, 430 | cyberGridPulse: { 431 | '0%, 100%': { 432 | backgroundSize: '30px 30px', 433 | filter: 'brightness(1)', 434 | }, 435 | '50%': { 436 | backgroundSize: '35px 35px', 437 | filter: 'brightness(1.2)', 438 | } 439 | }, 440 | binaryPulse: { 441 | '0%, 100%': { 442 | backgroundPosition: '0 0', 443 | filter: 'hue-rotate(0deg)', 444 | }, 445 | '50%': { 446 | backgroundPosition: '8px 8px', 447 | filter: 'hue-rotate(180deg)', 448 | } 449 | }, 450 | borderFlow: { 451 | '0%, 100%': { 452 | backgroundPosition: '200% 0', 453 | }, 454 | '50%': { 455 | backgroundPosition: '-200% 0', 456 | } 457 | }, 458 | borderFlowVertical: { 459 | '0%, 100%': { 460 | backgroundPosition: '0 200%', 461 | }, 462 | '50%': { 463 | backgroundPosition: '0 -200%', 464 | } 465 | }, 466 | } 467 | } 468 | } 469 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | // base: '/MotifyX/', 7 | build: { 8 | rollupOptions: { 9 | external: [], 10 | }, 11 | }, 12 | optimizeDeps: { 13 | include: ['framer-motion'], 14 | }, 15 | }); 16 | --------------------------------------------------------------------------------

MotifyX

221 | Transform your 222 | 226 | {' '} 227 | effortlessly 228 |

Futuristic Patterns

{pattern.name}

Geometric Patterns

{pattern.name}

Dot Patterns

{pattern.name}

Matrix Patterns

{pattern.name}

Codescape Patterns

{pattern.name}

Dark Gradients

{pattern.name}

221 | Transform your
222 | 226 | {' '} 227 | effortlessly 228 |