94:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"SWRDataProvider"] 96:T169f,[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import DraggableButton from "./components/DraggableButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/DraggableButton.tsx" "use client" import { useState, useRef, useEffect } from "react" import { motion, useMotionValue, useTransform, useSpring, useAnimation } from "framer-motion" const DraggableButton = () => { const [quadrant, setQuadrant] = useState(1) const constraintsRef = useRef(null) const audioRef = useRef(null) const x = useMotionValue(0) const y = useMotionValue(0) const rotateX = useTransform(y, [-200, 200], [15, -15]) const rotateY = useTransform(x, [-200, 200], [-15, 15]) const springConfig = { damping: 10, stiffness: 100 } const scaleSpring = useSpring(1, springConfig) const controls = useAnimation() useEffect(() => { audioRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() }, []) const playSound = (frequency: number, duration: number) => { if (audioRef.current) { const oscillator = audioRef.current.createOscillator() const gainNode = audioRef.current.createGain() oscillator.connect(gainNode) gainNode.connect(audioRef.current.destination) oscillator.frequency.value = frequency oscillator.type = "sine" gainNode.gain.setValueAtTime(0.7, audioRef.current.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.00001, audioRef.current.currentTime + duration) oscillator.start() oscillator.stop(audioRef.current.currentTime + duration) } } const handleDragStart = () => { playSound(330, 0.1) // Play a higher pitch sound when starting to drag scaleSpring.set(1.1) } const handleDragEnd = (event: any, info: any) => { playSound(220, 0.2) // Play a lower pitch sound when dropping scaleSpring.set(1) const newQuadrant = getQuadrant(x.get(), y.get()) setQuadrant(newQuadrant) // Wobble effect controls.start({ rotate: [0, -5, 5, -5, 5, 0], transition: { duration: 0.5 }, }) // Tilt based on velocity const tiltX = -info.velocity.y * 0.2 const tiltY = info.velocity.x * 0.2 controls.start({ rotateX: tiltX, rotateY: tiltY, transition: { duration: 0.5 } }) } const getQuadrant = (x: number, y: number) => { if (x >= 0 && y >= 0) return 1 if (x < 0 && y >= 0) return 2 if (x < 0 && y < 0) return 3 return 4 } const getBackgroundColor = () => { switch (quadrant) { case 1: return "bg-red-500" case 2: return "bg-blue-500" case 3: return "bg-green-500" case 4: return "bg-yellow-500" default: return "bg-gray-500" } } return (

{/* X and Y axes */}

Just Ship It

) } export default DraggableButton [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { red: { 500: "#EF4444", }, blue: { 500: "#3B82F6", }, green: { 500: "#10B981", }, yellow: { 500: "#F59E0B", }, gray: { 100: "#F3F4F6", 300: "#D1D5DB", 500: "#6B7280", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } 8a:["$","$L94",null,{"chatId":"yuv1Fj677Pg","children":["$","$L95",null,{"data":{"@\"active-block\",\"yuv1Fj677Pg\",":{"id":"b_UuJMIaE6Mfo","messageId":"RTvbbT9i1fx1bYwsOwKB1xBgofjfM6wD","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"interactive-button","type":"code-project","project":"interactive-button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"yuv1Fj677Pg\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This