Skip to content

Commit 4a85c87

Browse files
devinschumacherclaude
devinschumacher
and
claude
committed
Add fun drop animations and implement 12 image converters
Features: - Implemented 12 client-side image converters (JPG↔PNG, BMP→JPG/PNG, ICO→PNG, GIF→JPG/WebP, PNG/JPG→WebP, AVIF→JPG/JPEG) - Made drag & drop zone much larger (600x300px) with cloud icon - Added 8 random fun animations on file drop (splash, bounce, spin, pulse, shake, flip, zoom, confetti) - Entire drop zone is now clickable - Created comprehensive test files for all formats All converters use HeroConverter component with client-side canvas processing. No server uploads - fully private browser-based conversion. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 8293c77 commit 4a85c87

File tree

25 files changed

+359
-25
lines changed

25 files changed

+359
-25
lines changed

‎app/globals.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,71 @@
5656
body {
5757
@apply bg-background text-foreground;
5858
}
59+
}
60+
61+
/* Fun drop animations */
62+
@keyframes splash {
63+
0% { transform: scale(1) rotate(0deg); }
64+
25% { transform: scale(1.1) rotate(-2deg); }
65+
50% { transform: scale(0.95) rotate(1deg); }
66+
75% { transform: scale(1.05) rotate(-1deg); }
67+
100% { transform: scale(1) rotate(0deg); }
68+
}
69+
70+
@keyframes bounce {
71+
0%, 100% { transform: translateY(0); }
72+
25% { transform: translateY(-20px); }
73+
50% { transform: translateY(-10px); }
74+
75% { transform: translateY(-15px); }
75+
}
76+
77+
@keyframes spin {
78+
0% { transform: rotate(0deg) scale(1); }
79+
50% { transform: rotate(180deg) scale(1.05); }
80+
100% { transform: rotate(360deg) scale(1); }
81+
}
82+
83+
@keyframes pulse {
84+
0%, 100% { transform: scale(1); opacity: 1; }
85+
25% { transform: scale(1.05); opacity: 0.9; }
86+
50% { transform: scale(1.1); opacity: 0.8; }
87+
75% { transform: scale(1.05); opacity: 0.9; }
88+
}
89+
90+
@keyframes shake {
91+
0%, 100% { transform: translateX(0); }
92+
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
93+
20%, 40%, 60%, 80% { transform: translateX(5px); }
94+
}
95+
96+
@keyframes flip {
97+
0% { transform: perspective(400px) rotateY(0); }
98+
50% { transform: perspective(400px) rotateY(180deg); }
99+
100% { transform: perspective(400px) rotateY(360deg); }
100+
}
101+
102+
@keyframes zoom {
103+
0% { transform: scale(1); }
104+
50% { transform: scale(1.2); }
105+
100% { transform: scale(1); }
106+
}
107+
108+
@keyframes confetti {
109+
0% { transform: rotate(0deg) scale(1); background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #ffd93d); }
110+
25% { transform: rotate(5deg) scale(1.05); }
111+
50% { transform: rotate(-5deg) scale(1.1); }
112+
75% { transform: rotate(3deg) scale(1.05); }
113+
100% { transform: rotate(0deg) scale(1); }
114+
}
115+
116+
.animate-splash { animation: splash 0.6s ease-in-out; }
117+
.animate-bounce { animation: bounce 0.8s ease-in-out; }
118+
.animate-spin { animation: spin 0.6s ease-in-out; }
119+
.animate-pulse { animation: pulse 0.8s ease-in-out; }
120+
.animate-shake { animation: shake 0.5s ease-in-out; }
121+
.animate-flip { animation: flip 0.6s ease-in-out; }
122+
.animate-zoom { animation: zoom 0.5s ease-in-out; }
123+
.animate-confetti {
124+
animation: confetti 0.8s ease-in-out;
125+
background-size: 200% 200%;
59126
}

‎app/tools/avif-to-jpeg/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>avif-to-jpeg</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="AVIF to JPEG" subtitle="Convert AVIF images to JPEG format." from="avif" to="jpeg" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/avif-to-jpg/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>avif-to-jpg</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="AVIF to JPG" subtitle="Convert AVIF images to JPG format." from="avif" to="jpg" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/bmp-to-jpg/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>bmp-to-jpg</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="BMP to JPG" subtitle="Convert BMP images to JPG format." from="bmp" to="jpg" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/bmp-to-png/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>bmp-to-png</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="BMP to PNG" subtitle="Convert BMP images to PNG format." from="bmp" to="png" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/gif-to-jpg/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>gif-to-jpg</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="GIF to JPG" subtitle="Extract first frame from GIF as JPG." from="gif" to="jpg" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/gif-to-webp/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>gif-to-webp</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="GIF to WebP" subtitle="Convert animated GIFs to WebP format." from="gif" to="webp" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/ico-to-png/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>ico-to-png</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="ICO to PNG" subtitle="Convert ICO icons to PNG images." from="ico" to="png" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/jpeg-to-webp/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>jpeg-to-webp</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="JPEG to WebP" subtitle="Convert JPEG images to WebP format." from="jpeg" to="webp" />
12+
</main>
13+
</>
14+
);
15+
}

‎app/tools/jpg-to-png/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
export default function Page() { return <div>jpg-to-png</div>; }
1+
"use client";
2+
3+
import HeroConverter from "@/components/HeroConverter";
4+
import { Navbar } from "@/components/Navbar";
5+
6+
export default function Page() {
7+
return (
8+
<>
9+
<Navbar />
10+
<main className="min-h-screen bg-background">
11+
<HeroConverter title="JPG to PNG" subtitle="Convert JPG images to PNG with transparency support." from="jpg" to="png" />
12+
</main>
13+
</>
14+
);
15+
}

0 commit comments

Comments
 (0)