[V0_FILE]typescriptreact:file="use-coffee-animation.ts" isFixed="true" isMerged="true" "use client" import { useState, useEffect } from "react" export function useCoffeeAnimation(isPouring: boolean) { const [cupFillLevel, setCupFillLevel] = useState(0) useEffect(() => { if (isPouring) { const fillInterval = setInterval(() => { setCupFillLevel((prev) => { if (prev >= 1) { clearInterval(fillInterval) return 1 } return prev + 0.01 }) }, 20) return () => clearInterval(fillInterval) } else { setCupFillLevel(0) } }, [isPouring]) return cupFillLevel } [V0_FILE]typescriptreact:file="coffee-machine-animation.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { useCoffeeAnimation } from "./use-coffee-animation" export default function CoffeeMachineAnimation() { const [isPouring, setIsPouring] = useState(false) const cupFillLevel = useCoffeeAnimation(isPouring) const startPouring = () => { setIsPouring(true) } const resetAnimation = () => { setIsPouring(false) } return (

) } function CoffeeMachine({ isPouring }: { isPouring: boolean }) { return ( ) } function Cup({ fillLevel }: { fillLevel: number }) { return ( ) } [V0_FILE]typescriptreact:file="coffee-machine.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" const SmokeParticle = ({ delay, x }: { delay: number; x: number }) => ( ) export default function CoffeeMachine() { const [isPouring, setIsPouring] = useState(false) const [fillLevel, setFillLevel] = useState(0) const [showSmoke, setShowSmoke] = useState(false) const startPouring = () => { setIsPouring(true) setShowSmoke(false) const timer = setTimeout(() => { setIsPouring(false) setShowSmoke(true) setTimeout(() => setShowSmoke(false), 3000) // Show smoke for 3 seconds after pouring setFillLevel(0) }, 3000) let level = 0 const fillInterval = setInterval(() => { level += 0.1 if (level >= 1) { clearInterval(fillInterval) } else { setFillLevel(level) } }, 300) return () => { clearTimeout(timer) clearInterval(fillInterval) } } return (

) }

About

Tags

Share

More from vixclotet

More Templates Like This

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This