96:I[903690,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/3ak2clbc09163.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1ipe_dsc-e9gt.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/30g_pmqpnaqh0.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/3ak2clbc09163.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/1ipe_dsc-e9gt.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"SWRDataProvider"] 98:T2016,[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 (

) } 8c:["$","$L96",null,{"chatId":"TXb6tryaFyn","children":["$","$L97",null,{"data":{"@\"active-block\",\"TXb6tryaFyn\",":{"id":"b_LFedBrGgkQr","messageId":"cg5wa6tEHqPajV6MDyJ5M68ZLfl3ZXVP","source":"$98","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"coffee-machine-animation","type":"code-project","project":"coffee-machine-animation"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"TXb6tryaFyn\",":false,"":null},"children":"$L99"}]}]

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This