[Feature]: Animated GIFs Gallery Feature with Custom GIF Support & Size Controls

ATTRIBUTION.md

@@ -0,0 +1,35 @@
+# Attribution & Credits
+
+## GIFs Gallery
+
+The default GIFs in the GIFs Gallery feature are sourced from:
+
+**[Cool-GIFs-For-GitHub](https://github.com/Anmol-Baranwal/Cool-GIFs-For-GitHub)** by [Anmol Baranwal](https://github.com/Anmol-Baranwal)
+
+- **License**: MIT License
+- **Repository**: https://github.com/Anmol-Baranwal/Cool-GIFs-For-GitHub
+- **Author**: [@Anmol_Codes](https://twitter.com/Anmol_Codes)
+
+### MIT License
+
+The MIT License allows:
+- ✅ Commercial use
+- ✅ Modification
+- ✅ Distribution
+- ✅ Private use
+
+We appreciate Anmol's incredible work in creating and maintaining this collection of high-quality GIFs specifically designed for GitHub profile READMEs!
+
+### Additional Resources
+
+Users of this generator can also:
+- Browse 200+ more GIFs from the Cool-GIFs-For-GitHub repository
+- Add custom GIF URLs from any licensed source
+- Upload their own GIF files
+- Use any public GIF URL they have rights to
+
+---
+
+## Other Dependencies
+
+For a complete list of dependencies and their licenses, see [package.json](./package.json).

package.json

@@ -22,8 +22,10 @@
     "@hookform/resolvers": "^5.2.2",
     "@next/third-parties": "^15.5.4",
     "@tailwindcss/typography": "^0.5.19",
+    "@types/jszip": "^3.4.0",
     "critters": "^0.0.23",
     "framer-motion": "^12.23.24",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.545.0",
     "next": "15.5.4",
     "react": "19.1.0",

src/app/globals.css

@@ -415,3 +415,28 @@ select::placeholder {
 .text-large h3 {
   font-size: 1.75rem;
 }
+
+/* Theme-aware scrollbar styles */
+.gif-gallery-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--muted) / 0.5);
+}
+
+.gif-gallery-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.gif-gallery-scroll::-webkit-scrollbar-track {
+  background: hsl(var(--muted) / 0.5);
+  border-radius: 4px;
+}
+
+.gif-gallery-scroll::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+.gif-gallery-scroll::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}