[V0_FILE]javascript:file="tailwind.config.js" isMerged="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: { fontFamily: { sans: ["var(--font-geist-sans)"], mono: ["var(--font-geist-mono)"], }, colors: { 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)", }, keyframes: { wobbleLeft: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, wobbleRight: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, wobbleUp: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, wobbleDown: { "0%, 100%": { transform: "translate(-50%, -50%) scale(1.25) rotate(0deg)" }, "50%": { transform: "translate(-50%, -50%) scale(1.25) rotate(var(--tilt-angle))" }, }, lightWobble: { "0%, 100%": { transform: "translate(-50%, -50%) rotate(0deg)" }, "25%": { transform: "translate(-50%, -50%) rotate(-3deg)" }, "75%": { transform: "translate(-50%, -50%) rotate(3deg)" }, }, }, animation: { wobbleLeft: "wobbleLeft 0.3s ease-in-out", wobbleRight: "wobbleRight 0.3s ease-in-out", wobbleUp: "wobbleUp 0.3s ease-in-out", wobbleDown: "wobbleDown 0.3s ease-in-out", lightWobble: "lightWobble 0.3s ease-in-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="styles/animations.css" isMerged="true" @keyframes wobble { 0% { transform: translate(-50%, -50%) scale(1.25) rotate(0deg); } 25% { transform: translate(-50%, -50%) scale(1.25) rotate(5deg); } 50% { transform: translate(-50%, -50%) scale(1.25) rotate(0eg); } 75% { transform: translate(-50%, -50%) scale(1.25) rotate(-5deg); } 100% { transform: translate(-50%, -50%) scale(1.25) rotate(0deg); } } .animate-wobble { animation: wobble 0.5s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { MarketMap } from "@/components/market-map" export default function Home() { return } [V0_FILE]typescriptreact:file="components/draggable-label.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" export interface Position { x: number y: number } export interface DraggableLabelProps { initialX: number initialY: number children: React.ReactNode color: string } export function DraggableLabel({ initialX, initialY, children, color }: DraggableLabelProps) { const [position, setPosition] = useState({ x: initialX, y: initialY }) const [isDragging, setIsDragging] = useState(false) const [moveDirection, setMoveDirection] = useState(null) const [tiltAngle, setTiltAngle] = useState(0) const [isWobbling, setIsWobbling] = useState(false) const ref = useRef(null) const lastPosition = useRef({ x: initialX, y: initialY }) const lastMoveTime = useRef(0) const moveTimeoutRef = useRef(null) const dropSoundRef = useRef(null) const clickSoundRef = useRef(null) useEffect(() => { dropSoundRef.current = new Audio( "https://rjj2qyxxex49xrmy.public.blob.vercel-storage.com/a_short_and_fun_womp%20(1)-KP9MRnczG1Yn0Er85oaT3beNqA8Hri.mp3", ) clickSoundRef.current = new Audio( "https://rjj2qyxxex49xrmy.public.blob.vercel-storage.com/a_quick_click_sound-fsBeePlfPVSXEf5MiVtaMBPjArwufm.mp3", ) }, []) useEffect(() => { if (isDragging) { document.body.classList.add("dragging") } else { document.body.classList.remove("dragging") } }, [isDragging]) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging && ref.current) { const currentTime = Date.now() const rect = ref.current.parentElement!.getBoundingClientRect() const newX = ((e.clientX - rect.left) / rect.width) * 100 const newY = ((e.clientY - rect.top) / rect.height) * 100 const dx = newX - lastPosition.current.x const dy = newY - lastPosition.current.y const timeDiff = currentTime - lastMoveTime.current const velocity = Math.sqrt(dx * dx + dy * dy) / timeDiff const newTiltAngle = Math.min(Math.max(velocity * 200, 1), 15) setTiltAngle(newTiltAngle) if (Math.abs(dx) > Math.abs(dy)) { setMoveDirection(dx > 0 ? "right" : "left") } else { setMoveDirection(dy > 0 ? "down" : "up") } setPosition({ x: newX, y: newY }) lastPosition.current = { x: newX, y: newY } lastMoveTime.current = currentTime if (moveTimeoutRef.current) { clearTimeout(moveTimeoutRef.current) } moveTimeoutRef.current = setTimeout(() => { setMoveDirection(null) setTiltAngle(0) }, 50) } } const handleMouseUp = () => { setIsDragging(false) setMoveDirection(null) setTiltAngle(0) if (moveTimeoutRef.current) { clearTimeout(moveTimeoutRef.current) } // Start the light wobble effect setIsWobbling(true) setTimeout(() => setIsWobbling(false), 300) // Duration of the wobble effect // Play the drop sound if (dropSoundRef.current) { dropSoundRef.current.currentTime = 0 // Reset the audio to the beginning dropSoundRef.current.play() } document.body.classList.remove("dragging") } if (isDragging) { window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) } return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) if (moveTimeoutRef.current) { clearTimeout(moveTimeoutRef.current) } } }, [isDragging]) const handleMouseDown = (e: React.MouseEvent) => { e.preventDefault() setIsDragging(true) setIsWobbling(false) lastPosition.current = position lastMoveTime.current = Date.now() document.body.classList.add("dragging") // Play the click sound if (clickSoundRef.current) { clickSoundRef.current.currentTime = 0 // Reset the audio to the beginning clickSoundRef.current.play() } } const getWobbleAnimation = () => { if (isWobbling) return "animate-lightWobble" switch (moveDirection) { case "left": return "animate-wobbleLeft" case "right": return "animate-wobbleRight" case "up": return "animate-wobbleUp" case "down": return "animate-wobbleDown" default: return "" } } return (

{children}

) } [V0_FILE]typescriptreact:file="components/market-map.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState, useRef } from "react" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { DraggableLabel } from "@/components/draggable-label" const labels = [ { text: "Serverless", color: "#6AACF8" }, { text: "Fluid", color: "#6CDA76" }, { text: "Edge Workers", color: "#F2AB3C" }, { text: "Servers", color: "#8955DD" }, ] export function MarketMap() { const [labelPositions, setLabelPositions] = useState<{ x: number; y: number }[]>([]) const containerRef = useRef(null) useEffect(() => { const calculatePositions = () => { if (!containerRef.current) return const containerRect = containerRef.current.getBoundingClientRect() const containerWidth = containerRect.width const containerHeight = containerRect.height const bottomPadding = 10 // 10px from the bottom const leftPadding = 10 // 10px from the left const labelSpacing = 10 // 10px between labels let currentX = leftPadding const newPositions = labels.map((label) => { // Create a temporary element to measure the label's width const tempElement = document.createElement("div") tempElement.style.position = "absolute" tempElement.style.visibility = "hidden" tempElement.style.whiteSpace = "nowrap" tempElement.style.fontSize = "1.25rem" // Matches the text-xl class tempElement.style.padding = "0.25rem 1rem" // Matches the px-4 py-1 classes tempElement.innerText = label.text document.body.appendChild(tempElement) const labelWidth = tempElement.offsetWidth document.body.removeChild(tempElement) const x = (currentX / containerWidth) * 100 const y = ((containerHeight - bottomPadding) / containerHeight) * 100 currentX += labelWidth + labelSpacing return { x, y } }) setLabelPositions(newPositions) } calculatePositions() window.addEventListener("resize", calculatePositions) return () => window.removeEventListener("resize", calculatePositions) }, []) return (

{/* Axes */}

{/* Axis Labels */}

Better DX

Worse DX

Less cost-efficient

More cost-efficient

{/* Quadrant Items */}

Serverless Fluid Edge Workers Servers

) }

About

About