[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match the playful physics tag design brief */ --background: oklch(0.98 0.02 85); /* Soft yellow background #fefce8 */ --foreground: oklch(0.4 0.01 240); /* Dark gray text #4b5563 */ --card: oklch(1 0 0); /* White for tags */ --card-foreground: oklch(0.4 0.01 240); /* Dark gray text on tags */ --popover: oklch(1 0 0); /* White for popovers */ --popover-foreground: oklch(0.4 0.01 240); /* Dark gray text in popovers */ --primary: oklch(0.45 0.15 65); /* Warm yellow-brown #a16207 */ --primary-foreground: oklch(1 0 0); /* White text on primary */ --secondary: oklch(0.55 0.2 260); /* Vibrant blue-purple #6366f1 */ --secondary-foreground: oklch(1 0 0); /* White text on secondary */ --muted: oklch(0.98 0.005 240); /* Very light gray #f8fafc */ --muted-foreground: oklch(0.4 0.01 240); /* Dark gray for muted text */ --accent: oklch(0.55 0.2 260); /* Accent blue-purple #6366f1 */ --accent-foreground: oklch(1 0 0); /* White text on accent */ --destructive: oklch(0.5 0.25 15); /* Red for destructive actions */ --destructive-foreground: oklch(1 0 0); /* White text on destructive */ --border: oklch(0.85 0.005 240); /* Light border #d1d5db */ --input: oklch(1 0 0); /* White input background */ --ring: oklch(0.55 0.2 260); /* Blue focus ring */ --chart-1: oklch(0.45 0.15 65); --chart-2: oklch(0.35 0.01 240); --chart-3: oklch(0.5 0.25 15); --chart-4: oklch(0.55 0.2 260); --chart-5: oklch(0.4 0.01 240); --radius: 0.5rem; /* Rounded corners for tags */ --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.4 0.01 240); --sidebar-primary: oklch(0.98 0.005 240); --sidebar-primary-foreground: oklch(0.4 0.01 240); --sidebar-accent: oklch(0.55 0.2 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.85 0.005 240); --sidebar-ring: oklch(0.55 0.2 260); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { PhysicsTags } from "@/components/physics-tags" export default function Home() { return (

Physics Tag System

Drag and drop tags with realistic physics simulation. Watch them bounce, rotate, and interact with gravity!

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "framer-motion": "12.23.12" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/physics-tags.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useRef } from "react" import { motion, useAnimation } from "framer-motion" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" interface Tag { id: string text: string x: number y: number } interface PhysicsTagsProps { initialTags?: string[] onTagsChange?: (tags: string[]) => void } export function PhysicsTags({ initialTags = ["React", "TypeScript", "Next.js", "Tailwind", "Physics", "Animation", "Drag & Drop"], onTagsChange, }: PhysicsTagsProps) { const containerRef = useRef(null) const [tags] = useState(() => { return initialTags.map((text, index) => ({ id: `tag-${index}`, text, x: 100 + (index % 3) * 150, y: 100 + Math.floor(index / 3) * 80, })) }) const controls = useAnimation() const triggerStarDrop = async () => { await controls.start((i) => ({ y: [null, -50, 600], x: [null, null, Math.random() * 400 + 100], rotate: [0, 360, 720], scale: [1, 1.2, 0.8], transition: { duration: 2, delay: i * 0.1, ease: "easeIn", }, })) // Reset positions controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerSupermanFly = async () => { await controls.start((i) => ({ x: [-100, 800], y: [null, Math.random() * 200 + 100], rotate: [0, 15, -15, 0], scale: [1, 1.3, 1], transition: { duration: 1.5, delay: i * 0.15, ease: "easeInOut", }, })) // Reset positions controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerIronManFlight = async () => { await controls.start((i) => ({ x: [null, Math.random() * 400 + 100, Math.random() * 400 + 100], y: [null, Math.random() * 200 + 50, Math.random() * 200 + 50], rotate: [0, 360], scale: [1, 1.2, 1], transition: { duration: 2, delay: i * 0.1, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerSpiderSwing = async () => { await controls.start((i) => ({ x: [null, 200, 400, 600, 300], y: [null, 50, 150, 80, 200], rotate: [0, -30, 30, -15, 0], scale: [1, 1.1, 1.2, 1.1, 1], transition: { duration: 2.5, delay: i * 0.12, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerLokiTeleport = async () => { await controls.start((i) => ({ scale: [1, 0, 1.5, 0, 1], x: [null, null, Math.random() * 500 + 50, null, Math.random() * 500 + 50], y: [null, null, Math.random() * 300 + 50, null, Math.random() * 300 + 50], rotate: [0, 180, 360, 540, 720], transition: { duration: 2, delay: i * 0.08, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerThorHammer = async () => { await controls.start((i) => ({ x: [null, 700, -100, 400], y: [null, 100, 150, null], rotate: [0, 1080, 2160, 0], scale: [1, 1.3, 0.8, 1], transition: { duration: 3, delay: i * 0.1, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerBlackWidowStealth = async () => { await controls.start((i) => ({ opacity: [1, 0.2, 0.8, 0.1, 1], x: [null, Math.random() * 400 + 100, Math.random() * 400 + 100], y: [null, Math.random() * 200 + 50, Math.random() * 200 + 50], scale: [1, 0.8, 1.1, 0.9, 1], transition: { duration: 2, delay: i * 0.15, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, opacity: 1, scale: 1, transition: { duration: 0.5 }, })) } const triggerHawkeyeArrow = async () => { await controls.start((i) => ({ x: [null, 600], y: [null, 50 + Math.sin(i) * 100], rotate: [0, 45], scale: [1, 1.2, 1], transition: { duration: 1.5, delay: i * 0.05, ease: "easeOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerVisionPhase = async () => { await controls.start((i) => ({ opacity: [1, 0.3, 0.7, 0.2, 1], x: [null, 300, 500, 200, 350], y: [null, null, null, null, null], scale: [1, 1.1, 0.9, 1.2, 1], transition: { duration: 2.5, delay: i * 0.1, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, opacity: 1, scale: 1, transition: { duration: 0.5 }, })) } const triggerWandaMagic = async () => { await controls.start((i) => ({ x: [null, 300 + Math.sin(i * 2) * 150], y: [null, 200 + Math.cos(i * 2) * 100], rotate: [0, 720, -360, 180, 0], scale: [1, 1.5, 0.7, 1.3, 1], transition: { duration: 3, delay: i * 0.08, ease: "easeInOut", }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerThanosSnap = async () => { await controls.start((i) => ({ scale: [1, 1.2, 0], opacity: [1, 0.8, 0], rotate: [0, 180], transition: { duration: 1.5, delay: i * 0.2, ease: "easeIn", }, })) // Bring them back after a pause setTimeout(() => { controls.start((i) => ({ scale: [0, 1.2, 1], opacity: [0, 0.5, 1], y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, transition: { duration: 1, delay: i * 0.1, ease: "easeOut", }, })) }, 1000) } const triggerUltronSwarm = async () => { await controls.start((i) => ({ x: [null, 300 + Math.sin(i * 0.5) * 200], y: [null, 150 + Math.cos(i * 0.5) * 100], rotate: [0, 360, 720], scale: [1, 0.8, 1.2, 1], transition: { duration: 2, delay: i * 0.05, ease: "linear" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerRedSkullMarch = async () => { await controls.start((i) => ({ x: [null, 50 + i * 80], y: [null, 200], rotate: [0, 0], scale: [1, 1.1, 1], transition: { duration: 2, delay: i * 0.2, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerZemoStrategy = async () => { await controls.start((i) => ({ x: [null, 400, 200, 600, 300], y: [null, 100, 250, 150, 200], rotate: [0, 45, -45, 90, 0], scale: [1, 1.2, 0.9, 1.1, 1], transition: { duration: 3, delay: i * 0.1, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerKangTimeWarp = async () => { await controls.start((i) => ({ x: [null, Math.random() * 600, Math.random() * 600, Math.random() * 600], y: [null, Math.random() * 400, Math.random() * 400, Math.random() * 400], rotate: [0, 180, 360, 540, 720], scale: [1, 2, 0.5, 1.5, 1], opacity: [1, 0.3, 0.8, 0.4, 1], transition: { duration: 4, delay: i * 0.05, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, opacity: 1, transition: { duration: 0.5 }, })) } const triggerDoomConquer = async () => { await controls.start((i) => ({ x: [null, 300], y: [null, 200], rotate: [0, 360], scale: [1, 1.5, 1.2, 1], transition: { duration: 2.5, delay: i * 0.15, ease: "easeOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerGravitonPull = async () => { await controls.start((i) => ({ x: [null, 300 + Math.sin(i * 2) * 50], y: [null, 200 + Math.cos(i * 2) * 50], rotate: [0, 720], scale: [1, 0.8, 1.3, 1], transition: { duration: 2, delay: i * 0.03, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerTaskmasterMimic = async () => { await controls.start((i) => ({ x: [null, 200, 400, 600, 300], y: [null, 50, 150, 80, 200], rotate: [0, -30, 30, -15, 0], scale: [1, 1.1, 1.2, 1.1, 1], transition: { duration: 2.5, delay: i * 0.12, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerMODOKFloat = async () => { await controls.start((i) => ({ x: [null, Math.random() * 400 + 100], y: [null, 50 + Math.sin(Date.now() * 0.001 + i) * 30], rotate: [0, 10, -10, 5, 0], scale: [1, 1.3, 1.1, 1.2, 1], transition: { duration: 3, delay: i * 0.1, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerMandarinRings = async () => { await controls.start((i) => ({ x: [null, 300 + Math.cos(i * 0.8) * 150], y: [null, 200 + Math.sin(i * 0.8) * 100], rotate: [0, 360 * 3], scale: [1, 1.4, 0.8, 1.2, 1], transition: { duration: 3, delay: i * 0.08, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerJuggernautCharge = async () => { await controls.start((i) => ({ x: [null, 700], y: [null, 200 + Math.sin(i) * 20], rotate: [0, 15, -15, 0], scale: [1, 1.3, 1.5, 1.2, 1], transition: { duration: 1.5, delay: i * 0.05, ease: "easeOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerEnchantressMagic = async () => { await controls.start((i) => ({ x: [null, 300 + Math.sin(i * 3) * 100], y: [null, 150 + Math.cos(i * 2) * 80], rotate: [0, 180, 360, 540], scale: [1, 1.3, 0.7, 1.4, 1], opacity: [1, 0.7, 1, 0.8, 1], transition: { duration: 3.5, delay: i * 0.07, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, opacity: 1, transition: { duration: 0.5 }, })) } const triggerGalactusDevour = async () => { await controls.start((i) => ({ scale: [1, 3, 0.1, 2, 1], x: [null, 300], y: [null, 200], rotate: [0, 720], opacity: [1, 0.8, 0.3, 0.9, 1], transition: { duration: 4, delay: i * 0.1, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, opacity: 1, transition: { duration: 0.5 }, })) } const triggerBlackOrderAssault = async () => { await controls.start((i) => ({ x: [null, 100 + (i % 4) * 150], y: [null, 100 + Math.floor(i / 4) * 100], rotate: [0, 90, 180, 270, 360], scale: [1, 1.2, 0.9, 1.3, 1], transition: { duration: 2.5, delay: i * 0.1, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, transition: { duration: 0.5 }, })) } const triggerHydraInfiltration = async () => { await controls.start((i) => ({ opacity: [1, 0.2, 0.8, 0.1, 0.9, 1], x: [null, Math.random() * 500 + 50], y: [null, Math.random() * 300 + 50], scale: [1, 0.8, 1.1, 0.7, 1.2, 1], rotate: [0, 45, -45, 90, -90, 0], transition: { duration: 3, delay: i * 0.08, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, opacity: 1, transition: { duration: 0.5 }, })) } const triggerMephistoHell = async () => { await controls.start((i) => ({ x: [null, 300 + Math.sin(i * 4) * 120], y: [null, 400, 50, 300], rotate: [0, 666, 1332], scale: [1, 1.5, 0.5, 1.8, 1], opacity: [1, 0.6, 1, 0.4, 1], transition: { duration: 4, delay: i * 0.06, ease: "easeInOut" }, })) controls.start((i) => ({ y: 100 + Math.floor(i / 3) * 80, x: 100 + (i % 3) * 150, rotate: 0, scale: 1, opacity: 1, transition: { duration: 0.5 }, })) } return (

Physics Tag System

Marvel Effects

Heroes

Major Villains

Cosmic & Time

Tech & Science

Magic & Mystical

Organizations

Powerhouses

About

Tags

Share

More from phatjack

More Templates Like This

About

Tags

Share

About

Tags

Share

More from phatjack

More Templates Like This