Pattern Genie

Next.jsTypeScriptReactTailwindCSSFramer Motion

Next.js-based developer tool featuring 100+ unique CSS patterns with automatic theme switching, real-time previews, and one-click code copying. Built with TypeScript, TailwindCSS, and Framer Motion for optimal developer experience.

Pattern Genie screenshot

About the Project

Developer tool for discovering and implementing CSS background patterns. Features live previews, automatic theme switching based on pattern brightness, and seamless code copying functionality for efficient developer workflows.

Key Features

  • 100+ unique CSS background patterns
  • Automatic dark/light theme switching
  • Real-time pattern previews
  • One-click CSS/JSX code copying
  • Full-text search and filtering
  • localStorage favorites persistence
Pattern Genie | Mayur Bijarniya