mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtter
172c0fa772
- Update stale tool counts (48/49/50) to 51 across all apps, docs, and tests - Add Meme Generator to landing page bento grid (was missing) - Add 12 SEO-friendly rotating phrases to hero typing cursor - Change landing hero subtitle to "Every image tool you need." - Replace outdated login page copy with branded hero + rotating phrases
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
|
|
const phrases = [
|
|
"No signups. No accounts.",
|
|
"No uploads to the cloud. Ever.",
|
|
"100% local processing.",
|
|
"Free. Forever.",
|
|
"No limits. No hidden caps.",
|
|
"Works fully offline.",
|
|
"Unlimited batch processing.",
|
|
"51 image tools.",
|
|
"15 AI models. Your hardware.",
|
|
"Lightning fast. Built on Sharp.",
|
|
"Air-gapped ready.",
|
|
"One Docker container.",
|
|
"Open source. Always.",
|
|
"Every pixel stays on your hardware.",
|
|
"Your server. Your rules.",
|
|
"Deploys in a single docker pull.",
|
|
"The self-hosted alternative.",
|
|
"Resize, compress, convert. Locally.",
|
|
"Free image editor. No watermarks.",
|
|
"Bulk image processing. Unlimited.",
|
|
"Remove backgrounds offline.",
|
|
"Self-hosted Canva alternative.",
|
|
"No API keys needed.",
|
|
"GDPR compliant by design.",
|
|
"Works without internet.",
|
|
];
|
|
|
|
export function TypingCursor() {
|
|
const [index, setIndex] = useState(0);
|
|
|
|
const advance = useCallback(() => {
|
|
setIndex((i) => (i + 1) % phrases.length);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(advance, 3000);
|
|
return () => clearInterval(timer);
|
|
}, [advance]);
|
|
|
|
return (
|
|
<AnimatePresence mode="wait">
|
|
<motion.span
|
|
key={phrases[index]}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="text-accent"
|
|
>
|
|
{phrases[index]}
|
|
</motion.span>
|
|
</AnimatePresence>
|
|
);
|
|
}
|