Components
Loading preview...
Animated Download with a sci-fi HUD (heads-up display) style theme. Completely customizable.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/animated-downloadimport { useState } from "react"
import { AnimatedDownload } from "@/components/ui/animated-download";
import { Button } from "@/components/ui/button";
const DemoOne = () => {
const [isDownloading, setIsDownloading] = useState(false)
const startDownload = () => {
setIsDownloading(true)
}
const handleAnimationComplete = () => {
setIsDownloading(false)
}
return (
<div className= "flex flex-col w-full h-screen justify-center items-center">
<Button
variant="outline"
className = "mb-4"
onClick = { startDownload }
disabled = { isDownloading }
initial = "idle"
whileHover = {!isDownloading ? "hover" : "idle"
}
whileTap = {!isDownloading ? "tap" : "idle"}
>
<span
key={ isDownloading ? 'downloading' : 'idle' }
initial = {{ opacity: 0 }}
animate = {{ opacity: 1 }}
transition = {{ duration: 0.2 }}
>
{ isDownloading? 'Downloading...': 'Start Download' }
< /span>
< /Button>
< AnimatedDownload width = { 1200}
height = { 200}
className = "max-w-full h-auto"
isAnimating = { isDownloading }
onAnimationComplete = { handleAnimationComplete } />
</div>
);
};
export { DemoOne };