[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import RadarPing from "@/components/radar-ping" export default function Home() { return } [V0_FILE]typescriptreact:file="components/radar-ping.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" export default function RadarPing() { const [isAnimating, setIsAnimating] = useState(true) const [isExporting, setIsExporting] = useState(false) // Function to export SVG as PNG const exportAsPNG = async (size: number, filename: string) => { setIsExporting(true) try { // Create a static SVG without animations for export const svgContent = ` ` // Create blob and convert to PNG const svgBlob = new Blob([svgContent], { type: "image/svg+xml" }) const url = URL.createObjectURL(svgBlob) const img = new Image() img.crossOrigin = "anonymous" await new Promise((resolve, reject) => { img.onload = resolve img.onerror = reject img.src = url }) // Create canvas and draw image const canvas = document.createElement("canvas") canvas.width = size canvas.height = size const ctx = canvas.getContext("2d")! // Draw image to canvas ctx.drawImage(img, 0, 0, size, size) // Convert to PNG and download canvas.toBlob((blob) => { if (blob) { const downloadUrl = URL.createObjectURL(blob) const link = document.createElement("a") link.href = downloadUrl link.download = filename document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(downloadUrl) } }, "image/png") URL.revokeObjectURL(url) } catch (error) { console.error("Export failed:", error) alert("Export failed. Please try again.") } finally { setIsExporting(false) } } // Function to export animated GIF const exportAnimatedGIF = async (size: number, filename: string) => { setIsExporting(true) try { const canvas = document.createElement("canvas") canvas.width = size canvas.height = size const ctx = canvas.getContext("2d")! const frames: string[] = [] const frameCount = 36 // 36 frames for smooth 360° rotation const angleStep = (2 * Math.PI) / frameCount // Generate frames for animation for (let frame = 0; frame < frameCount; frame++) { const angle = frame * angleStep // Calculate the end point of the radar sweep based on rotation const centerX = 100 const centerY = 100 const radius = 90 // Create the sweep arc path - always 60 degrees wide const sweepAngle = Math.PI / 3 // 60 degrees in radians const startAngle = angle - sweepAngle const endAngle = angle const arcStartX = centerX + radius * Math.sin(startAngle) const arcStartY = centerY - radius * Math.cos(startAngle) const arcEndX = centerX + radius * Math.sin(endAngle) const arcEndY = centerY - radius * Math.cos(endAngle) // Clear canvas ctx.clearRect(0, 0, size, size) // Create SVG for this frame with solid green sweep instead of gradient const svgContent = ` ` // Convert SVG to image and draw on canvas const svgBlob = new Blob([svgContent], { type: "image/svg+xml" }) const url = URL.createObjectURL(svgBlob) const img = new Image() img.crossOrigin = "anonymous" await new Promise((resolve, reject) => { img.onload = resolve img.onerror = reject img.src = url }) ctx.drawImage(img, 0, 0, size, size) // Store frame as data URL frames.push(canvas.toDataURL("image/png")) URL.revokeObjectURL(url) } // Create animated WebP or fallback to creating multiple PNGs await createAnimatedWebP(frames, filename, size) } catch (error) { console.error("Animated export failed:", error) alert("Animated export failed. Please try again.") } finally { setIsExporting(false) } } // Create animated WebP or fallback const createAnimatedWebP = async (frames: string[], filename: string, size: number) => { // Since creating true animated GIFs is complex without external libraries, // we'll create an APNG or provide frames as a zip // For now, let's create a simple solution that downloads the first frame as a high-quality PNG // and provides instructions for creating GIFs const canvas = document.createElement("canvas") canvas.width = size canvas.height = size const ctx = canvas.getContext("2d")! // Create a composite image showing multiple frames const compositeCanvas = document.createElement("canvas") compositeCanvas.width = size * 6 compositeCanvas.height = size const compositeCtx = compositeCanvas.getContext("2d")! // Draw 6 frames side by side to show animation sequence for (let i = 0; i < 6; i++) { const frameIndex = Math.floor((i / 6) * frames.length) const img = new Image() await new Promise((resolve) => { img.onload = resolve img.src = frames[frameIndex] }) compositeCtx.drawImage(img, i * size, 0, size, size) } // Download the composite image compositeCanvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = filename.replace(".gif", "-frames.png") document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) } }, "image/png") // Also download individual frames for manual GIF creation for (let i = 0; i < frames.length; i += 6) { // Every 6th frame to reduce file count const img = new Image() await new Promise((resolve) => { img.onload = resolve img.src = frames[i] }) canvas.width = size canvas.height = size ctx.clearRect(0, 0, size, size) ctx.drawImage(img, 0, 0) canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const link = document.createElement("a") link.href = url link.download = `radar-frame-${String(i).padStart(2, "0")}.png` document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) } }, "image/png") // Small delay between downloads await new Promise((resolve) => setTimeout(resolve, 100)) } } // Export all sizes as a batch const exportAllSizes = async () => { await exportAsPNG(128, "radar-ping-128px.png") await new Promise((resolve) => setTimeout(resolve, 500)) // Small delay between exports await exportAsPNG(64, "radar-ping-64px.png") await new Promise((resolve) => setTimeout(resolve, 500)) await exportAsPNG(32, "radar-ping-32px.png") await new Promise((resolve) => setTimeout(resolve, 500)) await exportAsPNG(24, "radar-ping-24px.png") } return (

Radar Ping Emoji

{/* Main radar display */}

{/* Export Controls */}

📥 Export for Slack

{/* Static PNG exports */}

Static PNG (Recommended for Slack)

{/* Animated exports */}

🎬 Animated Frames (For GIF Creation)

💡 This downloads animation frames + composite image. Use online GIF makers like ezgif.com to create animated GIFs from the frames.

{/* Export all button */}

• PNG files with transparent backgrounds

• Static versions work best for Slack emojis

• Animated frames can be used to create GIFs for other platforms

{/* Emoji-sized versions */}

Emoji Sizes Preview

{/* 64px version */}

64px

{/* 32px version */}

32px

{/* 24px version */}

24px

{/* Controls */}

Perfect for Slack! Export as PNG files and upload directly to your Slack workspace as custom emojis.

) }