{"repo":"MinhOmega/react-theme-switch-animation","free":true,"listed":false,"github":"https://github.com/MinhOmega/react-theme-switch-animation","clone":"git clone https://github.com/MinhOmega/react-theme-switch-animation.git","description":"React Theme Switch with smooth animation supports dark and light modes on NextJS, ReactJS, and more ...","language":"TypeScript","stars":68,"topics":["animation-css","animation-effects","dark-theme","hook","nextjs","nextjs14-typescript","react-themes","reactjs","theme","typescript"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"React Theme Switch Animation Hook Beautiful, smooth animations for theme switching in React applications. Built with TypeScript and powered by the View Transition API. 🚀 Live Demo 📦 npm Package 💼 Hire me 🎥 Demo ✨ Six Animation Types Available - 🔵 Circle : Smooth expanding circle transition - 🌀 Blur Circle : Circle with elegant blur effect on the edges - 📱 QR Scan : Scanning line sweeps left to right (like QR code reader) - 🔷 Polygon : Diagonal wipe that sweeps across the screen - 📐 Polygon Gradient : Diagonal wipe with a soft gradient edge - 🎬 Custom GIF : Reveal the new theme through any GIF mask of your choice 📝 Notes - The hook is only available in the browser environment. So if you use NextJS App router or any other framework that uses Server Components, you should use this hook in a Client Component by adding the directive use client - Currently works only if the project is using TailwindCSS - Ensure your project has the necessary TailwindCSS configuration for dark mode 🚀 Features - 🎨 Multiple Animation Types : Circle, Blur Circle, QR Scan, Polygon, Polygon Gradient, and Custom GIF animations - ⚡ High Performance : Optimized for high-resolution displays with smooth 60fps animations - 🎯 View Transition API : Leverages modern browser APIs for seamless transitions - 📱 Responsive Design : Works perfectly across all device sizes and screen resolutions - ♿ Accessibility First : Respects prefers-reduced-motion and provides fallback experiences - 🔧 TypeScript Sup","default_branch":null,"files":null,"tree":[],"storefront":"/r/MinhOmega","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/MinhOmega/react-theme-switch-animation/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}