[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.1 0 0); /* Dark background #1a1a1a */ --foreground: oklch(1 0 0); /* White text for readability */ --card: oklch(0.94 0 0); /* Light card background #f0f0f0 */ --card-foreground: oklch(0.25 0 0); /* Dark text on cards #374151 */ --popover: oklch(1 0 0); /* White popover background */ --popover-foreground: oklch(0.25 0 0); /* Dark text in popovers */ --primary: oklch(0.8 0.2 180); /* Glowing cyan accent #00ffcc */ --primary-foreground: oklch(0.1 0 0); /* Dark text on primary */ --secondary: oklch(0.25 0 0); /* Borders and shadows #374151 */ --secondary-foreground: oklch(1 0 0); /* White text on secondary */ --muted: oklch(0.94 0 0); /* Muted backgrounds */ --muted-foreground: oklch(0.1 0 0); /* Dark muted text */ --accent: oklch(0.8 0.2 180); /* Glowing cyan for highlights */ --accent-foreground: oklch(0.1 0 0); /* Dark text on accent */ --destructive: oklch(0.55 0.2 25); /* Red for alerts */ --destructive-foreground: oklch(1 0 0); /* White text on destructive */ --border: oklch(0.25 0 0); /* Border color */ --input: oklch(0.94 0 0); /* Input background */ --ring: oklch(0.8 0.2 180 / 0.5); /* Glowing ring effect */ --chart-1: oklch(0.8 0.2 180); /* BTC data visualization color */ --chart-2: oklch(0.65 0.15 45); /* Orange for additional charts */ --chart-3: oklch(0.55 0.2 25); /* Red for charts */ --chart-4: oklch(0.6 0.15 140); /* Green for charts */ --chart-5: oklch(0.7 0.15 65); /* Yellow for charts */ --radius: 0.5rem; --sidebar: oklch(0.1 0 0); /* Dark sidebar */ --sidebar-foreground: oklch(1 0 0); /* White sidebar text */ --sidebar-primary: oklch(0.25 0 0); /* Sidebar primary */ --sidebar-primary-foreground: oklch(1 0 0); /* White text */ --sidebar-accent: oklch(0.8 0.2 180); /* Glowing sidebar accent */ --sidebar-accent-foreground: oklch(0.1 0 0); /* Dark text on accent */ --sidebar-border: oklch(0.25 0 0); /* Sidebar border */ --sidebar-ring: oklch(0.8 0.2 180 / 0.5); /* Glowing sidebar ring */ } .dark { --background: oklch(0.08 0 0); /* Even darker background */ --foreground: oklch(0.98 0 0); /* Brighter white text */ --card: oklch(0.12 0 0); /* Dark card background */ --card-foreground: oklch(0.98 0 0); /* Bright text on cards */ --popover: oklch(0.12 0 0); /* Dark popover */ --popover-foreground: oklch(0.98 0 0); /* Bright popover text */ --primary: oklch(0.85 0.25 180); /* Brighter glowing cyan */ --primary-foreground: oklch(0.08 0 0); /* Dark text on primary */ --secondary: oklch(0.2 0 0); /* Darker secondary */ --secondary-foreground: oklch(0.98 0 0); /* Bright text on secondary */ --muted: oklch(0.15 0 0); /* Dark muted */ --muted-foreground: oklch(0.7 0 0); /* Lighter muted text */ --accent: oklch(0.85 0.25 180); /* Bright glowing accent */ --accent-foreground: oklch(0.08 0 0); /* Dark text on accent */ --destructive: oklch(0.6 0.25 25); /* Brighter red */ --destructive-foreground: oklch(0.98 0 0); /* Bright text */ --border: oklch(0.2 0 0); /* Dark border */ --input: oklch(0.15 0 0); /* Dark input */ --ring: oklch(0.85 0.25 180 / 0.6); /* Brighter glowing ring */ --chart-1: oklch(0.85 0.25 180); /* Bright cyan for BTC */ --chart-2: oklch(0.7 0.2 45); /* Bright orange */ --chart-3: oklch(0.6 0.25 25); /* Bright red */ --chart-4: oklch(0.65 0.2 140); /* Bright green */ --chart-5: oklch(0.75 0.2 65); /* Bright yellow */ --sidebar: oklch(0.08 0 0); /* Very dark sidebar */ --sidebar-foreground: oklch(0.98 0 0); /* Bright sidebar text */ --sidebar-primary: oklch(0.85 0.25 180); /* Glowing sidebar primary */ --sidebar-primary-foreground: oklch(0.08 0 0); /* Dark text */ --sidebar-accent: oklch(0.2 0 0); /* Dark sidebar accent */ --sidebar-accent-foreground: oklch(0.98 0 0); /* Bright accent text */ --sidebar-border: oklch(0.2 0 0); /* Dark sidebar border */ --sidebar-ring: oklch(0.85 0.25 180 / 0.6); /* Bright glowing ring */ } @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]json:file="package.json" isEdit="true" isQuickEdit="true" 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": { "@burnt-labs/abstraxion": "^1.0.0", "@cosmjs/stargate": "^0.32.0", "@cosmjs/proto-signing": "^0.32.0", "@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" }, "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/haptic-feedback.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef, useCallback } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Slider } from "@/components/ui/slider" import { Smartphone, SmartphoneNfc, Zap } from "lucide-react" import { rangiHeartbeat } from "@/lib/rangi-heartbeat-algorithm" interface HapticFeedbackProps { btcPrice: number rangiFrequency: number isFrequencyPlaying: boolean priceChange24h: number heartbeatMetrics: any } export function HapticFeedback({ btcPrice, rangiFrequency, isFrequencyPlaying, priceChange24h, heartbeatMetrics, }: HapticFeedbackProps) { const [isHapticEnabled, setIsHapticEnabled] = useState(false) const [hapticSupported, setHapticSupported] = useState(false) const [intensity, setIntensity] = useState([0.7]) const [lastPrice, setLastPrice] = useState(btcPrice) const lastVibrateRef = useRef(0) const heartbeatIntervalRef = useRef() // Check if haptic feedback is supported useEffect(() => { const supported = "vibrate" in navigator && typeof navigator.vibrate === "function" setHapticSupported(supported) if (!supported) { console.log("[v0] Haptic feedback not supported on this device") } }, []) // Vibration patterns based on frequency and price const vibrationPatterns = { heartbeat: [100, 50, 100, 50, 200], // Basic heartbeat pattern pulse: [50, 30, 50, 30, 50], // Quick pulse wave: [200, 100, 300, 100, 200], // Wave-like pattern alert: [300, 200, 300, 200, 300], // Strong alert pattern gentle: [80, 40, 80, 40, 80], // Gentle vibration } // Create dynamic vibration pattern based on frequency const createFrequencyPattern = useCallback((frequency: number): number[] => { const baseInterval = Math.max(50, Math.min(200, 1000 / (frequency / 10))) const patternLength = 5 const pattern: number[] = [] for (let i = 0; i < patternLength; i++) { const vibrationTime = Math.round(baseInterval * (0.5 + Math.sin(i) * 0.3)) const pauseTime = Math.round(baseInterval * 0.3) pattern.push(vibrationTime, pauseTime) } return pattern.slice(0, -1) // Remove last pause }, []) // Trigger vibration with intensity control const triggerVibration = useCallback( (pattern: number[] | number, force = false) => { if (!hapticSupported || !isHapticEnabled) return const now = Date.now() if (!force && now - lastVibrateRef.current < 100) return // Throttle vibrations try { let adjustedPattern: number[] if (typeof pattern === "number") { adjustedPattern = [Math.round(pattern * intensity[0])] } else { adjustedPattern = pattern.map((duration) => Math.round(duration * intensity[0])) } navigator.vibrate(adjustedPattern) lastVibrateRef.current = now console.log("[v0] Haptic feedback triggered:", adjustedPattern) } catch (error) { console.error("[v0] Haptic feedback error:", error) } }, [hapticSupported, isHapticEnabled, intensity], ) // Price change haptic feedback useEffect(() => { if (btcPrice === lastPrice || lastPrice === 0) { setLastPrice(btcPrice) return } const priceChange = btcPrice - lastPrice const changePercent = Math.abs(priceChange / lastPrice) * 100 if (changePercent > 0.1 && heartbeatMetrics) { // Use emotional state to determine vibration intensity let vibrationPattern: number[] switch (heartbeatMetrics.emotionalState) { case "euphoric": vibrationPattern = priceChange > 0 ? [200, 50, 200, 50, 300] : [300, 100, 200, 100, 100] break case "fearful": vibrationPattern = priceChange > 0 ? [100, 30, 100] : [400, 200, 400, 200, 400] break case "anxious": vibrationPattern = [80, 20, 80, 20, 80, 20, 120] break default: vibrationPattern = priceChange > 0 ? [120, 40, 160] : [160, 40, 120] } triggerVibration(vibrationPattern) } setLastPrice(btcPrice) }, [btcPrice, lastPrice, heartbeatMetrics, triggerVibration]) // Frequency-based heartbeat pattern useEffect(() => { if (!isFrequencyPlaying || !isHapticEnabled || !heartbeatMetrics) { if (heartbeatIntervalRef.current) { clearInterval(heartbeatIntervalRef.current) } return } // Use the heartbeat algorithm to generate patterns const heartbeatPattern = rangiHeartbeat.generateHeartbeatPattern(heartbeatMetrics) const heartbeatInterval = 60000 / heartbeatMetrics.heartRate // Convert BPM to milliseconds heartbeatIntervalRef.current = setInterval(() => { triggerVibration(heartbeatPattern, true) }, heartbeatInterval) return () => { if (heartbeatIntervalRef.current) { clearInterval(heartbeatIntervalRef.current) } } }, [isFrequencyPlaying, isHapticEnabled, heartbeatMetrics, triggerVibration]) // Manual haptic test const testHaptic = (patternName: string) => { if (patternName === "frequency") { const pattern = createFrequencyPattern(rangiFrequency) triggerVibration(pattern, true) } else { const pattern = vibrationPatterns[patternName as keyof typeof vibrationPatterns] triggerVibration(pattern, true) } } // Stop all vibrations const stopVibration = () => { if (hapticSupported) { navigator.vibrate(0) } if (heartbeatIntervalRef.current) { clearInterval(heartbeatIntervalRef.current) } } return ( Haptic Feedback

{hapticSupported ? "SUPPORTED" : "NOT SUPPORTED"} {isHapticEnabled && ( ACTIVE )}

{/* Enable/Disable Toggle */}

{/* Intensity Control */}

Intensity

{Math.round(intensity[0] * 100)}%

{/* Heartbeat Pattern Info */} {heartbeatMetrics && (

Current Pattern

{heartbeatMetrics.emotionalState} Heartbeat

{heartbeatMetrics.heartRate.toFixed(1)} BPM • {heartbeatMetrics.baseFrequency.toFixed(2)}Hz

)} {/* Status Information */}

Price Change: {priceChange24h >= 0 ? "+" : ""} {priceChange24h.toFixed(2)}%

{isHapticEnabled && isFrequencyPlaying && heartbeatMetrics && (

Heartbeat pattern active • {heartbeatMetrics.emotionalState} rhythm

)}

{!hapticSupported && (

Haptic feedback requires a mobile device with vibration support

)} ) } [V0_FILE]typescriptreact:file="components/cymatics-visualization.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Eye, EyeOff } from "lucide-react" interface CymaticsVisualizationProps { rangiFrequency: number harmonicFrequency: number isPlaying: boolean btcPrice: number heartbeatMetrics: any } export function CymaticsVisualization({ rangiFrequency, harmonicFrequency, isPlaying, btcPrice, heartbeatMetrics, }: CymaticsVisualizationProps) { const canvasRef = useRef(null) const animationRef = useRef() const [isVisible, setIsVisible] = useState(true) const [time, setTime] = useState(0) const drawCymaticsPattern = ( ctx: CanvasRenderingContext2D, width: number, height: number, frequency: number, phase: number, intensity: number, color: string, emotionalState?: string, ) => { const centerX = width / 2 const centerY = height / 2 const maxRadius = Math.min(width, height) / 3 ctx.strokeStyle = color ctx.lineWidth = emotionalState === "euphoric" ? 2 : emotionalState === "fearful" ? 0.5 : 1 ctx.globalAlpha = intensity // Adjust pattern complexity based on emotional state const nodes = emotionalState === "anxious" ? Math.floor(frequency / 15) + 3 : emotionalState === "calm" ? Math.floor(frequency / 25) : Math.floor(frequency / 20) const rings = emotionalState === "euphoric" ? 12 : emotionalState === "fearful" ? 4 : 8 for (let ring = 1; ring <= rings; ring++) { const radius = (maxRadius * ring) / rings ctx.beginPath() for (let angle = 0; angle < Math.PI * 2; angle += 0.01) { // Enhanced wave amplitude based on emotional state let waveAmplitude = Math.sin(nodes * angle + phase) * Math.cos(ring * 0.5 + phase * 0.3) * (1 - ring / rings) * 20 // Modify amplitude based on emotional state switch (emotionalState) { case "euphoric": waveAmplitude *= 1.5 + Math.sin(phase * 2) * 0.5 break case "fearful": waveAmplitude *= 0.5 + Math.random() * 0.3 break case "anxious": waveAmplitude *= 0.8 + Math.sin(phase * 5) * 0.4 break case "excited": waveAmplitude *= 1.2 + Math.sin(phase * 3) * 0.3 break } const x = centerX + (radius + waveAmplitude) * Math.cos(angle) const y = centerY + (radius + waveAmplitude) * Math.sin(angle) if (angle === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.closePath() ctx.stroke() } // Add emotional state-specific effects if (emotionalState === "euphoric") { // Add sparkle effects for (let i = 0; i < 20; i++) { const sparkleX = centerX + (Math.random() - 0.5) * maxRadius * 2 const sparkleY = centerY + (Math.random() - 0.5) * maxRadius * 2 ctx.globalAlpha = Math.random() * 0.5 ctx.fillStyle = color ctx.fillRect(sparkleX, sparkleY, 2, 2) } } } // Draw interference patterns between frequencies const drawInterferencePattern = ( ctx: CanvasRenderingContext2D, width: number, height: number, freq1: number, freq2: number, phase: number, ) => { const centerX = width / 2 const centerY = height / 2 // Create interference pattern const gridSize = 4 for (let x = 0; x < width; x += gridSize) { for (let y = 0; y < height; y += gridSize) { const distance1 = Math.sqrt((x - centerX * 0.7) ** 2 + (y - centerY) ** 2) const distance2 = Math.sqrt((x - centerX * 1.3) ** 2 + (y - centerY) ** 2) const wave1 = Math.sin(distance1 * freq1 * 0.01 + phase) const wave2 = Math.sin(distance2 * freq2 * 0.01 + phase * 1.2) const interference = (wave1 + wave2) / 2 const intensity = Math.abs(interference) const hue = 180 + interference * 30 // Cyan to blue range ctx.fillStyle = `hsla(${hue}, 70%, 60%, ${intensity * 0.3})` ctx.fillRect(x, y, gridSize, gridSize) } } } // Animation loop useEffect(() => { if (!isVisible || !canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return const animate = () => { const width = canvas.width const height = canvas.height // Clear canvas with dark background ctx.fillStyle = "rgba(10, 10, 10, 0.1)" ctx.fillRect(0, 0, width, height) if (isPlaying && heartbeatMetrics) { const currentTime = Date.now() * 0.001 setTime(currentTime) const emotionalState = heartbeatMetrics.emotionalState const energyLevel = heartbeatMetrics.energyLevel const heartRate = heartbeatMetrics.heartRate // Draw interference pattern with emotional modulation drawInterferencePattern(ctx, width, height, rangiFrequency, harmonicFrequency, currentTime) // Draw Rangi's Heartbeat pattern with emotional state const rangiIntensity = 0.6 + energyLevel * 0.4 + Math.sin(currentTime * (heartRate / 30)) * 0.2 drawCymaticsPattern( ctx, width * 0.6, height, rangiFrequency, currentTime * 2, rangiIntensity, `hsl(180, 70%, ${50 + rangiIntensity * 20}%)`, emotionalState, ) // Draw harmonic pattern ctx.save() ctx.translate(width * 0.4, 0) const harmonicIntensity = 0.4 + energyLevel * 0.3 + Math.sin(currentTime * 1.5 + Math.PI) * 0.2 drawCymaticsPattern( ctx, width * 0.6, height, harmonicFrequency, currentTime * 1.5, harmonicIntensity, `hsl(200, 60%, ${40 + harmonicIntensity * 15}%)`, emotionalState, ) ctx.restore() // Add heartbeat pulse effect const pulseRadius = 30 + (heartRate / 150) * 50 + Math.sin(currentTime * (heartRate / 30)) * 20 const pulseAlpha = 0.1 + energyLevel * 0.2 ctx.globalAlpha = pulseAlpha ctx.strokeStyle = `hsl(180, 80%, 70%)` ctx.lineWidth = emotionalState === "euphoric" ? 3 : 2 ctx.beginPath() ctx.arc(width / 2, height / 2, pulseRadius, 0, Math.PI * 2) ctx.stroke() ctx.globalAlpha = 1 } animationRef.current = requestAnimationFrame(animate) } animate() return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [isVisible, isPlaying, rangiFrequency, harmonicFrequency, btcPrice, heartbeatMetrics]) // Set canvas size useEffect(() => { if (canvasRef.current) { const canvas = canvasRef.current const rect = canvas.getBoundingClientRect() canvas.width = rect.width * window.devicePixelRatio canvas.height = rect.height * window.devicePixelRatio const ctx = canvas.getContext("2d") if (ctx) { ctx.scale(window.devicePixelRatio, window.devicePixelRatio) } } }, []) return ( Cymatics Visualization

{isPlaying ? "ACTIVE" : "PAUSED"} {heartbeatMetrics && ( {heartbeatMetrics.emotionalState} )}

{/* Enhanced Frequency Info */}

Rangi's Pattern

{rangiFrequency.toFixed(2)}Hz

{heartbeatMetrics && (

{heartbeatMetrics.heartRate.toFixed(1)} BPM

)}

Harmonic Pattern

{harmonicFrequency.toFixed(2)}Hz

Sacred frequency

{isPlaying && heartbeatMetrics && (

Emotional State: {heartbeatMetrics.emotionalState} • Energy:{" "} {(heartbeatMetrics.energyLevel * 100).toFixed(0)}% • BTC: ${btcPrice.toLocaleString()}

)} ) } [V0_FILE]typescriptreact:file="components/market-data-cards.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" interface MarketData { symbol: string name: string price: number change24h: number volume: number } interface MarketDataCardsProps { onBtcDataChange: (data: MarketData) => void } export function MarketDataCards({ onBtcDataChange }: MarketDataCardsProps) { const [marketData, setMarketData] = useState([ { symbol: "BTC", name: "Bitcoin", price: 45234.56, change24h: 2.34, volume: 28500000000 }, { symbol: "ETH", name: "Ethereum", price: 2845.67, change24h: 1.89, volume: 15200000000 }, { symbol: "SOL", name: "Solana", price: 98.45, change24h: -0.67, volume: 2100000000 }, ]) const [baseFrequency] = useState(432.0) const [harmonicPurity] = useState(94.2) // Simulate real-time updates useEffect(() => { const interval = setInterval(() => { setMarketData((prev) => prev.map((coin) => ({ ...coin, price: coin.price * (1 + (Math.random() - 0.5) * 0.02), change24h: coin.change24h + (Math.random() - 0.5) * 0.5, })), ) }, 30000) return () => clearInterval(interval) }, []) // Update BTC data for parent component useEffect(() => { const btcData = marketData.find((coin) => coin.symbol === "BTC") if (btcData) { onBtcDataChange(btcData) } }, [marketData, onBtcDataChange]) return (

{marketData.map((coin) => ( {coin.name} ({coin.symbol})

${coin.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

= 0 ? "default" : "destructive"} className="text-xs"> {coin.change24h >= 0 ? "+" : ""} {coin.change24h.toFixed(2)}% ))} {/* Base Frequency Card */} Base Frequency

{baseFrequency.toFixed(2)} Hz

Harmonic Purity: {harmonicPurity}%

) } [V0_FILE]typescriptreact:file="components/sensory-integration-dashboard.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { RotateCcw, Download, Play, Pause } from "lucide-react" interface SensoryIntegrationDashboardProps { isPlaying: boolean onTogglePlayback: () => void heartbeatMetrics: any } export function SensoryIntegrationDashboard({ isPlaying, onTogglePlayback, heartbeatMetrics, }: SensoryIntegrationDashboardProps) { const [sonificationIntensity, setSonificationIntensity] = useState([75]) const [hapticStrength, setHapticStrength] = useState([60]) const [visualComplexity, setVisualComplexity] = useState([5]) const [systemStatus, setSystemStatus] = useState("Ready") const handleReset = () => { setSonificationIntensity([75]) setHapticStrength([60]) setVisualComplexity([5]) setSystemStatus("Reset Complete") setTimeout(() => setSystemStatus("Ready"), 2000) } const handleExport = () => { const data = { timestamp: new Date().toISOString(), settings: { sonificationIntensity: sonificationIntensity[0], hapticStrength: hapticStrength[0], visualComplexity: visualComplexity[0], }, heartbeatMetrics, } const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `rangi-heartbeat-${Date.now()}.json` a.click() URL.revokeObjectURL(url) } const harmonicAlignment = heartbeatMetrics ? Math.min(100, 80 + heartbeatMetrics.energyLevel * 20) : 94.2 return ( Sensory Integration Dashboard {/* Control Sliders */}

Sonification Intensity

{sonificationIntensity[0]}%

Haptic Strength

{hapticStrength[0]}%

Visual Complexity

{visualComplexity[0]}

{/* Control Buttons */}

{/* Status Bar */}

System Status: {systemStatus} Harmonic Alignment: {harmonicAlignment.toFixed(1)}%

) } [V0_FILE]typescriptreact:file="components/sensory-event-ledger.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" interface SensoryEvent { id: string timestamp: Date type: "frequency" | "haptic" | "visual" | "market" description: string value?: number unit?: string } interface SensoryEventLedgerProps { heartbeatMetrics: any isPlaying: boolean btcPrice: number } export function SensoryEventLedger({ heartbeatMetrics, isPlaying, btcPrice }: SensoryEventLedgerProps) { const [events, setEvents] = useState([]) const addEvent = (type: SensoryEvent["type"], description: string, value?: number, unit?: string) => { const newEvent: SensoryEvent = { id: `${Date.now()}-${Math.random()}`, timestamp: new Date(), type, description, value, unit, } setEvents((prev) => [newEvent, ...prev.slice(0, 49)]) // Keep last 50 events } // Monitor heartbeat changes useEffect(() => { if (!heartbeatMetrics) return const { emotionalState, baseFrequency, heartRate } = heartbeatMetrics addEvent("frequency", `Emotional state: ${emotionalState}`, baseFrequency, "Hz") }, [heartbeatMetrics]) // Monitor play state changes useEffect(() => { if (isPlaying) { addEvent("frequency", "Frequency generation started") } else { addEvent("frequency", "Frequency generation stopped") } }, [isPlaying]) // Monitor significant BTC price changes useEffect(() => { const priceThreshold = 100 // $100 change threshold const lastPrice = events.find((e) => e.type === "market")?.value || btcPrice if (Math.abs(btcPrice - lastPrice) > priceThreshold) { const change = btcPrice - lastPrice addEvent("market", `Significant price ${change > 0 ? "increase" : "decrease"}`, btcPrice, "USD") } }, [btcPrice]) const getEventIcon = (type: SensoryEvent["type"]) => { switch (type) { case "frequency": return "🎵" case "haptic": return "📳" case "visual": return "👁️" case "market": return "📈" default: return "•" } } const getEventColor = (type: SensoryEvent["type"]) => { switch (type) { case "frequency": return "text-primary" case "haptic": return "text-accent" case "visual": return "text-cyan-400" case "market": return "text-green-400" default: return "text-muted-foreground" } } return ( Sensory Event Ledger {events.length} events {events.length === 0 ? (

No events recorded yet. Start the frequency generator to begin logging.

) : (

{events.map((event) => (

{getEventIcon(event.type)} {event.description}

{event.value && (

{event.value.toFixed(2)} {event.unit}

)}

{event.timestamp.toLocaleTimeString()}

))}

)} ) } [V0_FILE]typescriptreact:file="components/custom-indicators.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" interface CustomIndicatorsProps { heartbeatMetrics: any btcPrice: number isPlaying: boolean } interface Portfolio { assets: Array<{ symbol: string; value: number; allocation: number }> cash: number debt: number totalValue: number } interface BiometricData { hrv: number // Heart Rate Variability gsr: number // Galvanic Skin Response focus: number // Focus level 0-1 } interface MotionData { kineticEnergy: number stability: number } export function CustomIndicators({ heartbeatMetrics, btcPrice, isPlaying }: CustomIndicatorsProps) { const [indicators, setIndicators] = useState({ HSI: { value: 0, label: "Harmonic Stability Index", unit: "%", description: "Financial resilience and risk management capacity", }, HRI: { value: 0, label: "Harmonic Resonance Index", unit: "Hz", description: "Market synchronization and timing efficiency", }, HIV: { value: 0, label: "Haptic Index Volume", unit: "pts", description: "Embodied Economic Action - biometric performance", }, SSS: { value: 0, label: "System Synchronization Score", unit: "%", description: "Portfolio harmony and life-goal alignment", }, }) const calculateHSI = (portfolio: Portfolio): number => { const diversityScore = calculateDiversity(portfolio.assets) const reserveScore = portfolio.cash / portfolio.totalValue const debtScore = 1 - portfolio.debt / (portfolio.totalValue + 0.001) return diversityScore * 0.4 + reserveScore * 0.3 + debtScore * 0.3 } const calculateDiversity = (assets: Array<{ symbol: string; value: number; allocation: number }>): number => { // Shannon diversity index for portfolio const totalValue = assets.reduce((sum, asset) => sum + asset.value, 0) let diversity = 0 assets.forEach((asset) => { const proportion = asset.value / totalValue if (proportion > 0) { diversity -= proportion * Math.log(proportion) } }) return Math.min(1, diversity / Math.log(assets.length)) } const calculateHRI = (tradeHistory: any, marketData: any): number => { const timingScore = analyzeTradeTiming(tradeHistory, marketData) const correlationScore = calculatePortfolioCorrelation(tradeHistory.assets) const captureScore = tradeHistory.gainedOpportunities / tradeHistory.totalOpportunities return timingScore * 0.5 + correlationScore * 0.3 + captureScore * 0.2 } const analyzeTradeTiming = (tradeHistory: any, marketData: any): number => { // Simulate timing analysis based on market volatility and price movements const volatilityFactor = heartbeatMetrics?.volatilityIndex || 0.5 const trendAlignment = Math.abs(heartbeatMetrics?.trendStrength || 0) return Math.min(1, (1 - volatilityFactor) * 0.6 + trendAlignment * 0.4) } const calculatePortfolioCorrelation = (assets: any): number => { // Simulate correlation analysis - lower correlation is better for diversification return Math.random() * 0.3 + 0.2 // 0.2-0.5 range } const calculateSSS = (portfolio: Portfolio, goals: any, lifeData: any): number => { const goalProgress = calculateGoalProgress(portfolio, goals) const allocationEfficiency = calculateAllocationEfficiency(portfolio) const lifeBalance = calculateLifeBalance(lifeData) return goalProgress * 0.4 + allocationEfficiency * 0.4 + lifeBalance * 0.2 } const calculateGoalProgress = (portfolio: Portfolio, goals: any): number => { // Simulate goal progress based on portfolio performance vs targets const performanceRatio = portfolio.totalValue / (goals?.targetValue || portfolio.totalValue) return Math.min(1, performanceRatio) } const calculateAllocationEfficiency = (portfolio: Portfolio): number => { // Measure how well allocated the portfolio is const idealAllocation = 1 / portfolio.assets.length let efficiency = 0 portfolio.assets.forEach((asset) => { const deviation = Math.abs(asset.allocation - idealAllocation) efficiency += 1 - deviation }) return efficiency / portfolio.assets.length } const calculateLifeBalance = (lifeData: any): number => { // Simulate life balance metrics return 0.7 + Math.sin(Date.now() * 0.0001) * 0.2 } const calculateHIV = (biometricData: BiometricData, motionData: MotionData): number => { const hrvScore = normalizeHRV(biometricData.hrv) const kineticScore = analyzeMotionQuality(motionData) const gsrScore = normalizeGSR(biometricData.gsr) const focusScore = biometricData.focus return hrvScore * 0.4 + kineticScore * 0.3 + gsrScore * 0.2 + focusScore * 0.1 } const normalizeHRV = (hrv: number): number => { // Normalize HRV to 0-1 scale (higher is better) return Math.min(1, Math.max(0, (hrv - 20) / 80)) // 20-100ms range } const analyzeMotionQuality = (motionData: MotionData): number => { return motionData.kineticEnergy * 0.6 + motionData.stability * 0.4 } const normalizeGSR = (gsr: number): number => { // Lower GSR indicates less stress (better performance) return Math.max(0, 1 - gsr / 100) } useEffect(() => { if (!heartbeatMetrics || !isPlaying) return // Generate mock portfolio data based on BTC price and market conditions const mockPortfolio: Portfolio = { assets: [ { symbol: "BTC", value: btcPrice * 0.5, allocation: 0.5 }, { symbol: "ETH", value: btcPrice * 0.3, allocation: 0.3 }, { symbol: "SOL", value: btcPrice * 0.2, allocation: 0.2 }, ], cash: btcPrice * 0.1, debt: btcPrice * 0.05, totalValue: btcPrice * 1.05, } // Generate mock biometric data influenced by market volatility const mockBiometricData: BiometricData = { hrv: 50 + heartbeatMetrics.energyLevel * 30 - heartbeatMetrics.volatilityIndex * 10, gsr: 30 + heartbeatMetrics.volatilityIndex * 20, focus: Math.max(0.3, 1 - heartbeatMetrics.volatilityIndex / 10), } const mockMotionData: MotionData = { kineticEnergy: heartbeatMetrics.energyLevel, stability: 1 - heartbeatMetrics.volatilityIndex / 10, } const mockTradeHistory = { assets: mockPortfolio.assets, gainedOpportunities: Math.floor(heartbeatMetrics.energyLevel * 10), totalOpportunities: 10, } const mockGoals = { targetValue: mockPortfolio.totalValue * 1.2, } const mockLifeData = { stressLevel: heartbeatMetrics.volatilityIndex, workLifeBalance: 0.7, } // Calculate indicators using actual algorithms const hsi = calculateHSI(mockPortfolio) * 100 const hri = calculateHRI(mockTradeHistory, { volatility: heartbeatMetrics.volatilityIndex }) * 432 + 111.11 const hiv = calculateHIV(mockBiometricData, mockMotionData) * 100 const sss = calculateSSS(mockPortfolio, mockGoals, mockLifeData) * 100 setIndicators({ HSI: { ...indicators.HSI, value: Math.round(hsi * 100) / 100 }, HRI: { ...indicators.HRI, value: Math.round(hri * 100) / 100 }, HIV: { ...indicators.HIV, value: Math.round(hiv * 100) / 100 }, SSS: { ...indicators.SSS, value: Math.round(sss * 100) / 100 }, }) }, [heartbeatMetrics, btcPrice, isPlaying]) const getHIVState = (hivValue: number) => { if (hivValue > 80) return { state: "High HIV", color: "text-green-400", description: "Premium trading enabled" } if (hivValue > 50) return { state: "Medium HIV", color: "text-yellow-400", description: "Standard trading active" } return { state: "Low HIV", color: "text-red-400", description: "Protective mode only" } } const hivState = getHIVState(indicators.HIV.value) return ( McCrea Harmonic Indicators {isPlaying ? "ACTIVE" : "STANDBY"} {Object.entries(indicators).map(([key, indicator]) => (

{key} {indicator.value.toFixed(2)} {indicator.unit}

{indicator.description}

{key === "HIV" && (

{hivState.state} - {hivState.description}

)}

))} {!isPlaying && (

Start frequency generator to activate McCrea indicators

)} ) } [V0_FILE]typescriptreact:file="reference/original-html-implementation.html" isMerged="true" Rangi's Heartbeat - Fixed

Rangi's Heartbeat

System Operational

Heartbeat Metrics

113.72

Base Frequency

73.62

Heart Rate

Volatility Index

calm

Emotional State

Market Connection

0.0001

Trees

↑ 2.3%

Market Trend

72%

Energy Flow

88%

Resonance

Heartbeat Visualization

Health Indicators

HSI

72.6

HRS

88.3

HIV

64.2

SSS

91.5

ISS

78.9

[V0_FILE]typescriptreact:file="components/xion-wallet-widget.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { useXionWallet } from "./xion-wallet-provider" export function XionWalletWidget() { const { isConnected, address, balance, connect, disconnect, sendTransaction } = useXionWallet() const [sendAmount, setSendAmount] = useState("") const [sendAddress, setSendAddress] = useState("") const [isLoading, setIsLoading] = useState(false) const handleConnect = async () => { setIsLoading(true) try { await connect() } finally { setIsLoading(false) } } const handleSend = async () => { if (!sendAmount || !sendAddress) return setIsLoading(true) try { const txHash = await sendTransaction(sendAddress, Number.parseFloat(sendAmount)) console.log("[v0] Transaction successful:", txHash) setSendAmount("") setSendAddress("") } catch (error) { console.error("[v0] Transaction failed:", error) } finally { setIsLoading(false) } } const formatAddress = (addr: string) => { return `${addr.slice(0, 8)}...${addr.slice(-6)}` } return (

Xion Wallet {isConnected ? "Connected" : "Disconnected"} {!isConnected ? ( ) : (

Address

{formatAddress(address!)}

Balance

{balance.toFixed(2)} XION

Send XION

setSendAddress(e.target.value)} /> setSendAmount(e.target.value)} />

)} ) } [V0_FILE]typescriptreact:file="components/hackathon-banner.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" export function HackathonBanner() { return (

XION HACKATHON Proof of Concept

Rangi's Heartbeat - Multi-Sensory Market Sonification

Real-Time Asset Data → Harmonic Sonification · Haptic Stimulation · Cymatic Visualization

🎥 Professional Demo Video 📦 Complete GitHub Package 🌐 Domain Deployment 🏆 Hackathon Submission

) } [V0_FILE]typescriptreact:file="components/rangi-heartbeat-monitor.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Heart, TrendingUp, TrendingDown, Activity } from "lucide-react" import { rangiHeartbeat } from "@/lib/rangi-heartbeat-algorithm" interface BTCData { price: number change24h: number volume: number timestamp: number } interface RangiHeartbeatMonitorProps { btcData: BTCData | null isConnected: boolean onHeartbeatUpdate?: (metrics: any) => void } export function RangiHeartbeatMonitor({ btcData, isConnected, onHeartbeatUpdate }: RangiHeartbeatMonitorProps) { const [heartbeatMetrics, setHeartbeatMetrics] = useState(null) const [isBeating, setIsBeating] = useState(false) const lastUpdateRef = useRef(0) const throttleTimeoutRef = useRef() const throttledHeartbeatUpdate = useCallback( (data: BTCData) => { const now = Date.now() const timeSinceLastUpdate = now - lastUpdateRef.current // Only update if enough time has passed (minimum 1 second between updates) if (timeSinceLastUpdate < 1000) { // Clear existing timeout and set new one if (throttleTimeoutRef.current) { clearTimeout(throttleTimeoutRef.current) } throttleTimeoutRef.current = setTimeout(() => { throttledHeartbeatUpdate(data) }, 1000 - timeSinceLastUpdate) return } lastUpdateRef.current = now try { const metrics = rangiHeartbeat.calculateHeartbeat({ price: data.price, change24h: data.change24h, volume: data.volume, timestamp: data.timestamp, }) setHeartbeatMetrics(metrics) onHeartbeatUpdate?.(metrics) console.log("[v0] Rangi's Heartbeat updated:", metrics) } catch (error) { console.error("[v0] Heartbeat calculation error:", error) } }, [onHeartbeatUpdate], ) // Update heartbeat metrics when BTC data changes useEffect(() => { if (!btcData) return throttledHeartbeatUpdate(btcData) // Cleanup timeout on unmount return () => { if (throttleTimeoutRef.current) { clearTimeout(throttleTimeoutRef.current) } } }, [btcData, throttledHeartbeatUpdate]) // Animate heartbeat useEffect(() => { if (!heartbeatMetrics) return const heartRate = heartbeatMetrics.heartRate const interval = Math.max(400, 60000 / heartRate) // Minimum 400ms between beats const beatAnimation = setInterval(() => { setIsBeating(true) setTimeout(() => setIsBeating(false), 200) // Beat duration }, interval) return () => clearInterval(beatAnimation) }, [heartbeatMetrics]) // Only depend on heartbeatMetrics to prevent excessive re-renders if (!heartbeatMetrics) { return ( Rangi's Heartbeat Monitor

Waiting for market data to initialize heartbeat...

) } const getEmotionalStateColor = (state: string) => { switch (state) { case "euphoric": return "text-green-400" case "excited": return "text-blue-400" case "calm": return "text-gray-400" case "anxious": return "text-yellow-400" case "fearful": return "text-red-400" default: return "text-gray-400" } } const getTrendIcon = (trendStrength: number) => { if (trendStrength > 0.1) return if (trendStrength < -0.1) return return } return ( Rangi's Heartbeat Monitor {isConnected ? "LIVE" : "OFFLINE"} {/* Main Metrics */}

Frequency

{heartbeatMetrics.baseFrequency}Hz

Heart Rate

{heartbeatMetrics.heartRate} BPM

{/* Emotional State */}

Emotional State

{heartbeatMetrics.emotionalState}

{/* Market Indicators */}

{getTrendIcon(heartbeatMetrics.trendStrength)} Trend Strength {(heartbeatMetrics.trendStrength * 100).toFixed(1)}%

Volatility Index {heartbeatMetrics.volatilityIndex}%

Energy Level {(heartbeatMetrics.energyLevel * 100).toFixed(0)}%

{/* Market Sentiment */}

{rangiHeartbeat.getMarketSentiment(heartbeatMetrics)}

) } [V0_FILE]typescriptreact:file="lib/security-utils.ts" isMerged="true" export class SecurityUtils { // Validate numeric inputs to prevent injection attacks static validateNumericInput(value: any): number { const num = Number.parseFloat(value) if (isNaN(num) || !isFinite(num)) { throw new Error("Invalid numeric input") } return num } // Sanitize string inputs static sanitizeString(input: string): string { return input.replace(/[<>"'&]/g, (match) => { const escapeMap: { [key: string]: string } = { "<": "<", ">": ">", '"': """, "'": "'", "&": "&", } return escapeMap[match] }) } // Rate limiting for API calls static createRateLimiter(maxCalls: number, windowMs: number) { const calls: number[] = [] return () => { const now = Date.now() const windowStart = now - windowMs // Remove old calls outside the window while (calls.length > 0 && calls[0] < windowStart) { calls.shift() } if (calls.length >= maxCalls) { throw new Error("Rate limit exceeded") } calls.push(now) return true } } // Validate environment variables static validateEnvVars() { const requiredVars = ["NODE_ENV"] const missing = requiredVars.filter((varName) => !process.env[varName]) if (missing.length > 0) { console.warn(`Missing environment variables: ${missing.join(", ")}`) } } } // Initialize security checks SecurityUtils.validateEnvVars() [V0_FILE]typescriptreact:file="lib/rangi-heartbeat-algorithm.ts" isEdit="true" isQuickEdit="true" isMerged="true" interface MarketData { price: number change24h: number volume: number timestamp: number } interface HeartbeatMetrics { baseFrequency: number heartRate: number // BPM equivalent volatilityIndex: number emotionalState: "calm" | "excited" | "anxious" | "euphoric" | "fearful" trendStrength: number energyLevel: number } export class RangiHeartbeatAlgorithm { private priceHistory: number[] = [] private volumeHistory: number[] = [] private timeHistory: number[] = [] private maxHistoryLength = 100 // Sacred frequency constants private readonly BASE_FREQUENCY = 111.11 private readonly HARMONIC_FREQUENCY = 432 private readonly GOLDEN_RATIO = 1.618033988749 constructor() { console.log("[v0] Rangi's Heartbeat Algorithm initialized") } // Add new market data point addDataPoint(data: MarketData): void { this.priceHistory.push(data.price) this.volumeHistory.push(data.volume) this.timeHistory.push(data.timestamp) // Keep history within limits if (this.priceHistory.length > this.maxHistoryLength) { this.priceHistory.shift() this.volumeHistory.shift() this.timeHistory.shift() } } // Calculate price velocity (rate of change) private calculateVelocity(): number { if (this.priceHistory.length < 2) return 0 const recent = this.priceHistory.slice(-5) // Last 5 data points let totalVelocity = 0 for (let i = 1; i < recent.length; i++) { const velocity = (recent[i] - recent[i - 1]) / recent[i - 1] totalVelocity += velocity } return totalVelocity / (recent.length - 1) } // Calculate market volatility private calculateVolatility(): number { if (this.priceHistory.length < 10) return 0 const recent = this.priceHistory.slice(-20) // Last 20 data points const mean = recent.reduce((sum, price) => sum + price, 0) / recent.length const variance = recent.reduce((sum, price) => { return sum + Math.pow(price - mean, 2) }, 0) / recent.length return Math.sqrt(variance) / mean // Coefficient of variation } // Determine emotional state based on market conditions private calculateEmotionalState( velocity: number, volatility: number, change24h: number, ): HeartbeatMetrics["emotionalState"] { const absVelocity = Math.abs(velocity) if (change24h > 5 && velocity > 0.02) return "euphoric" if (change24h < -5 && velocity < -0.02) return "fearful" if (volatility > 0.05 && absVelocity > 0.01) return "anxious" if (volatility > 0.03 || absVelocity > 0.005) return "excited" return "calm" } // Calculate trend strength using moving averages private calculateTrendStrength(): number { if (this.priceHistory.length < 20) return 0 const shortMA = this.calculateMovingAverage(5) const longMA = this.calculateMovingAverage(20) if (longMA === 0) return 0 const trendStrength = (shortMA - longMA) / longMA return Math.max(-1, Math.min(1, trendStrength * 10)) // Normalize to -1 to 1 } // Calculate moving average private calculateMovingAverage(periods: number): number { if (this.priceHistory.length < periods) return 0 const recent = this.priceHistory.slice(-periods) return recent.reduce((sum, price) => sum + price, 0) / periods } // Calculate energy level based on volume and price action private calculateEnergyLevel(): number { if (this.volumeHistory.length < 5) return 0.5 const recentVolume = this.volumeHistory.slice(-5) const avgVolume = recentVolume.reduce((sum, vol) => sum + vol, 0) / recentVolume.length const currentVolume = recentVolume[recentVolume.length - 1] const volumeRatio = currentVolume / avgVolume return Math.max(0.1, Math.min(2, volumeRatio)) // Normalize to 0.1 to 2 } // Main heartbeat calculation calculateHeartbeat(currentData: MarketData): HeartbeatMetrics { this.addDataPoint(currentData) const velocity = this.calculateVelocity() const volatility = this.calculateVolatility() const trendStrength = this.calculateTrendStrength() const energyLevel = this.calculateEnergyLevel() const emotionalState = this.calculateEmotionalState(velocity, volatility, currentData.change24h) const priceModulation = (currentData.price % 1000) / 1000 const volatilityModulation = Math.min(volatility * 100, 1) // Cap at 1 const trendModulation = Math.abs(trendStrength) * 0.5 const baseFrequency = this.BASE_FREQUENCY + priceModulation * 11.11 + volatilityModulation * 5.55 + trendModulation * 3.33 // Calculate heart rate (BPM equivalent) let baseHeartRate = 60 // Calm baseline switch (emotionalState) { case "euphoric": baseHeartRate = 100 + Math.abs(velocity) * 1000 break case "fearful": baseHeartRate = 90 + volatility * 500 break case "anxious": baseHeartRate = 80 + volatility * 300 break case "excited": baseHeartRate = 75 + Math.abs(velocity) * 500 break case "calm": baseHeartRate = 60 + energyLevel * 10 break } const priceStabilityFactor = Math.floor(currentData.price / 1000) * 0.5 const finalHeartRate = Math.max(40, Math.min(150, baseHeartRate + priceStabilityFactor)) return { baseFrequency: Math.round(baseFrequency * 100) / 100, heartRate: Math.round(finalHeartRate * 100) / 100, volatilityIndex: Math.round(volatility * 10000) / 100, // As percentage emotionalState, trendStrength: Math.round(trendStrength * 100) / 100, energyLevel: Math.round(energyLevel * 100) / 100, } } // Generate heartbeat rhythm pattern for haptic feedback generateHeartbeatPattern(metrics: HeartbeatMetrics): number[] { const { heartRate, emotionalState, energyLevel } = metrics // Base pattern timing (60000ms / BPM = interval between beats) const beatInterval = 60000 / heartRate const beatDuration = Math.max(50, beatInterval * 0.1) // 10% of interval let pattern: number[] switch (emotionalState) { case "euphoric": // Strong, rapid double beats pattern = [beatDuration * 1.5, beatDuration * 0.3, beatDuration * 1.2] break case "fearful": // Irregular, stuttering pattern pattern = [beatDuration * 0.8, beatDuration * 0.5, beatDuration * 0.6, beatDuration * 0.4, beatDuration] break case "anxious": // Quick, nervous pattern pattern = [beatDuration * 0.7, beatDuration * 0.2, beatDuration * 0.7, beatDuration * 0.2, beatDuration * 0.9] break case "excited": // Energetic double beat pattern = [beatDuration, beatDuration * 0.3, beatDuration * 0.8] break case "calm": default: // Steady, regular beat pattern = [beatDuration * energyLevel] break } return pattern.map((duration) => Math.round(duration)) } // Get current market sentiment description getMarketSentiment(metrics: HeartbeatMetrics): string { const { emotionalState, trendStrength, volatilityIndex } = metrics const trendDescription = trendStrength > 0.3 ? "bullish" : trendStrength < -0.3 ? "bearish" : "neutral" const volatilityDescription = volatilityIndex > 5 ? "highly volatile" : volatilityIndex > 2 ? "volatile" : "stable" return `Market is ${emotionalState} with ${trendDescription} trend and ${volatilityDescription} conditions` } // Reset algorithm state reset(): void { this.priceHistory = [] this.volumeHistory = [] this.timeHistory = [] console.log("[v0] Rangi's Heartbeat Algorithm reset") } } // Singleton instance export const rangiHeartbeat = new RangiHeartbeatAlgorithm() [V0_FILE]typescriptreact:file="components/frequency-generator.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { Play, Pause, Volume2, VolumeX } from "lucide-react" interface FrequencyGeneratorProps { btcPrice: number isConnected: boolean heartbeatMetrics: any onPlayStateChange: (isPlaying: boolean) => void } export function FrequencyGenerator({ btcPrice, isConnected, heartbeatMetrics, onPlayStateChange, }: FrequencyGeneratorProps) { const [isPlaying, setIsPlaying] = useState(false) const [volume, setVolume] = useState([0.3]) const [isMuted, setIsMuted] = useState(false) // Audio context and oscillators const audioContextRef = useRef(null) const rangiOscillatorRef = useRef(null) const harmonicOscillatorRef = useRef(null) const rangiGainRef = useRef(null) const harmonicGainRef = useRef(null) const masterGainRef = useRef(null) const rangiFrequency = heartbeatMetrics?.baseFrequency || 111.11 // Initialize audio context and oscillators const initializeAudio = useCallback(() => { if (audioContextRef.current) return try { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() // Create master gain node masterGainRef.current = audioContextRef.current.createGain() masterGainRef.current.connect(audioContextRef.current.destination) masterGainRef.current.gain.setValueAtTime(volume[0], audioContextRef.current.currentTime) // Create Rangi's Heartbeat oscillator rangiOscillatorRef.current = audioContextRef.current.createOscillator() rangiGainRef.current = audioContextRef.current.createGain() rangiOscillatorRef.current.type = "sine" rangiOscillatorRef.current.frequency.setValueAtTime(rangiFrequency, audioContextRef.current.currentTime) const emotionalGain = heartbeatMetrics?.emotionalState === "euphoric" ? 0.8 : heartbeatMetrics?.emotionalState === "fearful" ? 0.6 : 0.7 rangiGainRef.current.gain.setValueAtTime(emotionalGain, audioContextRef.current.currentTime) rangiOscillatorRef.current.connect(rangiGainRef.current) rangiGainRef.current.connect(masterGainRef.current) // Create harmonic oscillator (432Hz) harmonicOscillatorRef.current = audioContextRef.current.createOscillator() harmonicGainRef.current = audioContextRef.current.createGain() harmonicOscillatorRef.current.type = "sine" harmonicOscillatorRef.current.frequency.setValueAtTime(432, audioContextRef.current.currentTime) harmonicGainRef.current.gain.setValueAtTime(0.5, audioContextRef.current.currentTime) harmonicOscillatorRef.current.connect(harmonicGainRef.current) harmonicGainRef.current.connect(masterGainRef.current) console.log("[v0] Audio context initialized with heartbeat frequency:", rangiFrequency) } catch (error) { console.error("[v0] Failed to initialize audio context:", error) } }, [rangiFrequency, volume, heartbeatMetrics]) // Start audio playback const startAudio = useCallback(() => { if (!audioContextRef.current || !rangiOscillatorRef.current || !harmonicOscillatorRef.current) { initializeAudio() return } try { if (audioContextRef.current.state === "suspended") { audioContextRef.current.resume() } rangiOscillatorRef.current.start() harmonicOscillatorRef.current.start() setIsPlaying(true) console.log("[v0] Audio playback started - Rangi:", rangiFrequency, "Hz, Harmonic: 432 Hz") } catch (error) { console.error("[v0] Failed to start audio:", error) initializeAudio() } }, [initializeAudio, rangiFrequency]) // Stop audio playback const stopAudio = useCallback(() => { try { if (rangiOscillatorRef.current) { rangiOscillatorRef.current.stop() rangiOscillatorRef.current.disconnect() rangiOscillatorRef.current = null } if (harmonicOscillatorRef.current) { harmonicOscillatorRef.current.stop() harmonicOscillatorRef.current.disconnect() harmonicOscillatorRef.current = null } setIsPlaying(false) console.log("[v0] Audio playback stopped") } catch (error) { console.error("[v0] Failed to stop audio:", error) } }, []) // Toggle play/pause const togglePlayback = () => { const newPlayState = !isPlaying if (newPlayState) { initializeAudio() setTimeout(startAudio, 100) } else { stopAudio() } onPlayStateChange(newPlayState) } // Update volume useEffect(() => { if (masterGainRef.current && audioContextRef.current) { const gainValue = isMuted ? 0 : Math.max(0.1, volume[0]) masterGainRef.current.gain.setValueAtTime(gainValue, audioContextRef.current.currentTime) } }, [volume, isMuted]) useEffect(() => { if (rangiOscillatorRef.current && audioContextRef.current && isPlaying && heartbeatMetrics) { const currentFreq = heartbeatMetrics.baseFrequency const prevFreq = rangiOscillatorRef.current.frequency.value if (Math.abs(currentFreq - prevFreq) > 0.1) { rangiOscillatorRef.current.frequency.setValueAtTime(currentFreq, audioContextRef.current.currentTime) // Adjust gain based on energy level if (rangiGainRef.current) { const energyGain = 0.5 + heartbeatMetrics.energyLevel * 0.3 rangiGainRef.current.gain.setValueAtTime(energyGain, audioContextRef.current.currentTime) } console.log("[v0] Frequency updated to:", currentFreq, "Hz") } } }, [heartbeatMetrics, isPlaying]) // Cleanup on unmount useEffect(() => { return () => { stopAudio() if (audioContextRef.current) { audioContextRef.current.close() } } }, [stopAudio]) return ( Frequency Generator {isConnected ? "LIVE" : "OFFLINE"} {/* Frequency Display */}

Rangi's Heartbeat

{rangiFrequency.toFixed(2)}Hz

{heartbeatMetrics?.emotionalState || "Calculating..."}

Harmonic Tone

432.00Hz

Sacred frequency

{/* Controls */}

{/* Status */}

{isPlaying ? ( Frequencies resonating • Heart Rate: {heartbeatMetrics?.heartRate?.toFixed(1) || "--"} BPM ) : ( "Click play to start harmonic frequency generation" )}

) } [V0_FILE]typescript:file="lib/multi-crypto-api.ts" isEdit="true" isMerged="true" import { TechnicalIndicators } from "./technical-indicators" export interface CryptoData { symbol: string name: string price: number change24h: number volume: number marketCap: number high24h: number low24h: number timestamp: number baseFrequency: number technicalIndicators?: any } export interface MarketData { symbol: string name: string price: number change24h: number volume: number } export class MultiCryptoAPI { private indicators: Map private lastFetchTime = 0 private cache: Map = new Map() private readonly CACHE_DURATION = 30000 // 30 seconds constructor() { this.indicators = new Map() // Initialize technical indicators for each crypto this.indicators.set("BTC", new TechnicalIndicators()) this.indicators.set("ETH", new TechnicalIndicators()) this.indicators.set("SOL", new TechnicalIndicators()) } // Calculate base frequency for each cryptocurrency private calculateBaseFrequency(symbol: string, price: number): number { const baseFrequencies = { BTC: 111.11, // Rangi's base frequency ETH: 432.0, // Sacred frequency SOL: 528.0, // Love frequency } const base = baseFrequencies[symbol as keyof typeof baseFrequencies] || 432.0 // Modulate frequency based on price (subtle variation) const priceModulation = ((price % 100) / 100) * 5 // ±2.5Hz variation return base + priceModulation } // Fetch data from CoinGecko API async fetchCryptoData(): Promise { const now = Date.now() // Check cache first if (now - this.lastFetchTime < this.CACHE_DURATION && this.cache.size > 0) { return Array.from(this.cache.values()) } try { const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 15000) // 15 second timeout const response = await fetch( "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana&vs_currencies=usd&include_24hr_change=true&include_24hr_vol=true&include_market_cap=true&include_24hr_high=true&include_24hr_low=true", { signal: controller.signal, headers: { Accept: "application/json", "Content-Type": "application/json", }, }, ) clearTimeout(timeoutId) if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const data = await response.json() const cryptoData: CryptoData[] = [] // Process Bitcoin if (data.bitcoin) { const btcData = this.processCryptoData("BTC", "Bitcoin", data.bitcoin) cryptoData.push(btcData) this.cache.set("BTC", btcData) } // Process Ethereum if (data.ethereum) { const ethData = this.processCryptoData("ETH", "Ethereum", data.ethereum) cryptoData.push(ethData) this.cache.set("ETH", ethData) } // Process Solana if (data.solana) { const solData = this.processCryptoData("SOL", "Solana", data.solana) cryptoData.push(solData) this.cache.set("SOL", solData) } this.lastFetchTime = now console.log("[v0] Multi-crypto data fetched successfully:", cryptoData.length, "cryptocurrencies") return cryptoData } catch (error) { console.error("[v0] Multi-crypto fetch error:", error) // Return fallback data with realistic prices return this.getFallbackData() } } // Process individual cryptocurrency data private processCryptoData(symbol: string, name: string, apiData: any): CryptoData { const price = apiData.usd || 0 const change24h = apiData.usd_24h_change || 0 const volume = apiData.usd_24h_vol || 0 const marketCap = apiData.usd_market_cap || 0 const high24h = apiData.usd_24h_high || price const low24h = apiData.usd_24h_low || price const timestamp = Date.now() const baseFrequency = this.calculateBaseFrequency(symbol, price) // Add data point to technical indicators const indicator = this.indicators.get(symbol) if (indicator) { indicator.addDataPoint({ close: price, high: high24h, low: low24h, volume: volume, timestamp: timestamp, }) } const cryptoData: CryptoData = { symbol, name, price, change24h, volume, marketCap, high24h, low24h, timestamp, baseFrequency, technicalIndicators: indicator?.getAllIndicators() || {}, } return cryptoData } // Get fallback data when API fails private getFallbackData(): CryptoData[] { const timestamp = Date.now() return [ { symbol: "BTC", name: "Bitcoin", price: 111000 + (Math.random() - 0.5) * 2000, change24h: (Math.random() - 0.5) * 5, volume: 25000000000 + Math.random() * 5000000000, marketCap: 2100000000000, high24h: 113000, low24h: 109000, timestamp, baseFrequency: 111.11, technicalIndicators: {}, }, { symbol: "ETH", name: "Ethereum", price: 4000 + (Math.random() - 0.5) * 400, change24h: (Math.random() - 0.5) * 4, volume: 15000000000 + Math.random() * 3000000000, marketCap: 480000000000, high24h: 4200, low24h: 3800, timestamp, baseFrequency: 432.0, technicalIndicators: {}, }, { symbol: "SOL", name: "Solana", price: 200 + (Math.random() - 0.5) * 40, change24h: (Math.random() - 0.5) * 6, volume: 2000000000 + Math.random() * 500000000, marketCap: 95000000000, high24h: 220, low24h: 180, timestamp, baseFrequency: 528.0, technicalIndicators: {}, }, ] } // Get technical indicators for a specific cryptocurrency getTechnicalIndicators(symbol: string) { const indicator = this.indicators.get(symbol) return indicator?.getAllIndicators() || {} } // Get trading signals for a specific cryptocurrency getTradingSignals(symbol: string) { const indicator = this.indicators.get(symbol) return indicator?.getTradingSignals() || [] } // Get market summary getMarketSummary(cryptoData: CryptoData[]) { const totalMarketCap = cryptoData.reduce((sum, crypto) => sum + crypto.marketCap, 0) const totalVolume = cryptoData.reduce((sum, crypto) => sum + crypto.volume, 0) const avgChange = cryptoData.reduce((sum, crypto) => sum + crypto.change24h, 0) / cryptoData.length return { totalMarketCap, totalVolume, avgChange, dominance: { BTC: (cryptoData.find((c) => c.symbol === "BTC")?.marketCap / totalMarketCap) * 100 || 0, ETH: (cryptoData.find((c) => c.symbol === "ETH")?.marketCap / totalMarketCap) * 100 || 0, SOL: (cryptoData.find((c) => c.symbol === "SOL")?.marketCap / totalMarketCap) * 100 || 0, }, } } // Convert to MarketData format for compatibility toMarketDataFormat(cryptoData: CryptoData[]): MarketData[] { return cryptoData.map((crypto) => ({ symbol: crypto.symbol, name: crypto.name, price: crypto.price, change24h: crypto.change24h, volume: crypto.volume, })) } // Clear cache (useful for forcing refresh) clearCache() { this.cache.clear() this.lastFetchTime = 0 } // Get cached data getCachedData(): CryptoData[] { return Array.from(this.cache.values()) } } // Export singleton instance export const multiCryptoAPI = new MultiCryptoAPI() [V0_FILE]typescriptreact:file="components/enhanced-market-cards.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { TrendingUp, TrendingDown, Activity, Volume2 } from "lucide-react" import { multiCryptoAPI, type CryptoData, type MarketData } from "@/lib/multi-crypto-api" interface EnhancedMarketCardsProps { onDataChange?: (cryptos: MarketData[]) => void onBtcDataChange?: (btcData: MarketData) => void } export function EnhancedMarketCards({ onDataChange, onBtcDataChange }: EnhancedMarketCardsProps) { const [cryptoData, setCryptoData] = useState([]) const [isLoading, setIsLoading] = useState(true) const [lastUpdate, setLastUpdate] = useState(null) const [marketSummary, setMarketSummary] = useState(null) const fetchData = useCallback(async () => { try { setIsLoading(true) const data = await multiCryptoAPI.fetchCryptoData() setCryptoData(data) setLastUpdate(new Date()) // Calculate market summary const summary = multiCryptoAPI.getMarketSummary(data) setMarketSummary(summary) // Convert to MarketData format for callbacks const marketData = multiCryptoAPI.toMarketDataFormat(data) onDataChange?.(marketData) // Send BTC data specifically const btcData = marketData.find((crypto) => crypto.symbol === "BTC") if (btcData) { onBtcDataChange?.(btcData) } console.log("[v0] Enhanced market cards updated with", data.length, "cryptocurrencies") } catch (error) { console.error("[v0] Enhanced market cards fetch error:", error) } finally { setIsLoading(false) } }, [onDataChange, onBtcDataChange]) useEffect(() => { fetchData() // Initial fetch const interval = setInterval(fetchData, 30000) // Update every 30 seconds return () => clearInterval(interval) }, [fetchData]) const formatCurrency = (value: number, decimals = 2) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(value) } const formatLargeNumber = (value: number) => { if (value >= 1e12) return `$${(value / 1e12).toFixed(2)}T` if (value >= 1e9) return `$${(value / 1e9).toFixed(2)}B` if (value >= 1e6) return `$${(value / 1e6).toFixed(2)}M` return formatCurrency(value) } const formatVolume = (value: number) => { if (value >= 1e9) return `${(value / 1e9).toFixed(1)}B` if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M` return `${(value / 1e3).toFixed(1)}K` } const getChangeColor = (change: number) => { if (change > 0) return "text-green-500" if (change < 0) return "text-red-500" return "text-muted-foreground" } const getChangeIcon = (change: number) => { if (change > 0) return if (change < 0) return return } const getTradingSignal = (crypto: CryptoData) => { const signals = multiCryptoAPI.getTradingSignals(crypto.symbol) if (signals.length === 0) return null const strongSignals = signals.filter((s) => s.strength === "STRONG") if (strongSignals.length > 0) { const signal = strongSignals[0] return { type: signal.type, color: signal.type === "BUY" ? "bg-green-500" : "bg-red-500", text: signal.reason, } } const mediumSignals = signals.filter((s) => s.strength === "MEDIUM") if (mediumSignals.length > 0) { const signal = mediumSignals[0] return { type: signal.type, color: signal.type === "BUY" ? "bg-green-400" : "bg-red-400", text: signal.reason, } } return null } const getRSIColor = (rsi: number) => { if (rsi > 70) return "text-red-500" // Overbought if (rsi < 30) return "text-green-500" // Oversold return "text-yellow-500" // Neutral } if (isLoading && cryptoData.length === 0) { return (

{[1, 2, 3, 4].map((i) => (

))}

) } return (

{/* Market Summary */} {marketSummary && ( Market Overview

Total Market Cap

{formatLargeNumber(marketSummary.totalMarketCap)}

24h Volume

{formatLargeNumber(marketSummary.totalVolume)}

Avg Change

{marketSummary.avgChange > 0 ? "+" : ""} {marketSummary.avgChange.toFixed(2)}%

BTC Dominance

{marketSummary.dominance.BTC.toFixed(1)}%

)} {/* Cryptocurrency Cards */}

{cryptoData.map((crypto) => { const signal = getTradingSignal(crypto) const rsi = crypto.technicalIndicators?.RSI const macd = crypto.technicalIndicators?.MACD return (

{crypto.symbol}

{crypto.name} {signal && {signal.type}}

{/* Price and Change */}

{formatCurrency(crypto.price)}

{getChangeIcon(crypto.change24h)} {crypto.change24h > 0 ? "+" : ""} {crypto.change24h.toFixed(2)}%

H: {formatCurrency(crypto.high24h)} L: {formatCurrency(crypto.low24h)}

{/* Base Frequency */}

Base Frequency

{crypto.baseFrequency.toFixed(2)} Hz

{crypto.symbol === "BTC" && "Rangi's Heartbeat"} {crypto.symbol === "ETH" && "Sacred Frequency"} {crypto.symbol === "SOL" && "Love Frequency"}

{/* Technical Indicators */} {(rsi !== undefined || macd) && (

Technical Indicators

{rsi !== undefined && (

RSI (14) {rsi.toFixed(1)}

)} {macd && (

MACD macd.signal ? "text-green-500" : "text-red-500"}`} > {macd.macd > macd.signal ? "↗" : "↘"}

)}

)} {/* Market Data */}

Market Cap

{formatLargeNumber(crypto.marketCap)}

Volume

{formatVolume(crypto.volume)}

{/* Trading Signal Details */} {signal &&

{signal.text}

} {/* Animated border for active trading */} {signal && (

)} ) })} {/* Harmonic Purity Card */} Harmonic Purity

94.2%

System Alignment

Frequency Sync 98%

Market Resonance 87%

Harmonic Balance 96%

{lastUpdate && (

Last sync: {lastUpdate.toLocaleTimeString()}

)}

) } [V0_FILE]typescript:file="lib/technical-indicators.ts" isMerged="true" export class TechnicalIndicators { private indicators: Map private historicalData: Array<{ close: number high: number low: number volume: number timestamp: number }> constructor() { this.indicators = new Map() this.historicalData = [] } // Add new price data point addDataPoint(data: { close: number; high: number; low: number; volume: number; timestamp: number }) { this.historicalData.push(data) // Keep a reasonable history (e.g., 200 periods) if (this.historicalData.length > 200) { this.historicalData.shift() } // Recalculate all indicators this.calculateAllIndicators() } // Calculate all indicators calculateAllIndicators() { if (this.historicalData.length < 20) return // Not enough data this.calculateMovingAverages() this.calculateBollingerBands() this.calculateRSI() this.calculateMACD() this.calculateStochasticOscillator() this.calculateFibonacciLevels() this.calculateATR() this.calculateStandardDeviation() } // Simple Moving Average calculateSMA(period = 20): number | null { if (this.historicalData.length < period) return null const closes = this.historicalData.slice(-period).map((d) => d.close) const sum = closes.reduce((a, b) => a + b, 0) return sum / period } // Exponential Moving Average calculateEMA(period = 20): number | null { if (this.historicalData.length < period) return null const multiplier = 2 / (period + 1) let ema = this.calculateSMA(period) if (!ema) return null for (let i = period; i < this.historicalData.length; i++) { ema = (this.historicalData[i].close - ema) * multiplier + ema } return ema } // Moving Average Convergence Divergence calculateMACD() { const ema12 = this.calculateEMA(12) const ema26 = this.calculateEMA(26) if (!ema12 || !ema26) return null const macd = ema12 - ema26 // Simplified signal calculation const signal = this.calculateEMA(9) const histogram = signal ? macd - signal : 0 const result = { macd, signal: signal || 0, histogram } this.indicators.set("MACD", result) return result } // Relative Strength Index calculateRSI(period = 14): number | null { if (this.historicalData.length < period + 1) return null let gains = 0 let losses = 0 for (let i = 1; i <= period; i++) { const change = this.historicalData[this.historicalData.length - i].close - this.historicalData[this.historicalData.length - i - 1].close if (change >= 0) { gains += change } else { losses -= change } } const avgGain = gains / period const avgLoss = losses / period if (avgLoss === 0) return 100 const rs = avgGain / avgLoss const rsi = 100 - 100 / (1 + rs) this.indicators.set("RSI", rsi) return rsi } // Bollinger Bands calculateBollingerBands(period = 20, multiplier = 2) { if (this.historicalData.length < period) return null const sma = this.calculateSMA(period) const stdDev = this.calculateStandardDeviation(period) if (!sma || !stdDev) return null const upper = sma + multiplier * stdDev const lower = sma - multiplier * stdDev const bandwidth = ((upper - lower) / sma) * 100 const result = { upper, middle: sma, lower, bandwidth } this.indicators.set("BollingerBands", result) return result } // Stochastic Oscillator calculateStochasticOscillator(period = 14) { if (this.historicalData.length < period) return null const recentData = this.historicalData.slice(-period) const highestHigh = Math.max(...recentData.map((d) => d.high)) const lowestLow = Math.min(...recentData.map((d) => d.low)) const currentClose = recentData[recentData.length - 1].close const k = ((currentClose - lowestLow) / (highestHigh - lowestLow)) * 100 const d = k // Simplified - normally would be 3-period SMA of %K const result = { k, d } this.indicators.set("Stochastic", result) return result } // Fibonacci Retracement Levels calculateFibonacciLevels() { if (this.historicalData.length < 2) return null const recentData = this.historicalData.slice(-20) const highest = Math.max(...recentData.map((d) => d.high)) const lowest = Math.min(...recentData.map((d) => d.low)) const diff = highest - lowest const levels = { "0.0": highest, "0.236": highest - diff * 0.236, "0.382": highest - diff * 0.382, "0.5": highest - diff * 0.5, "0.618": highest - diff * 0.618, "0.786": highest - diff * 0.786, "1.0": lowest, } this.indicators.set("Fibonacci", levels) return levels } // Average True Range calculateATR(period = 14): number | null { if (this.historicalData.length < period + 1) return null const trueRanges = [] for (let i = 1; i <= period; i++) { const current = this.historicalData[this.historicalData.length - i] const previous = this.historicalData[this.historicalData.length - i - 1] const tr = Math.max( current.high - current.low, Math.abs(current.high - previous.close), Math.abs(current.low - previous.close), ) trueRanges.push(tr) } const atr = trueRanges.reduce((a, b) => a + b, 0) / period this.indicators.set("ATR", atr) return atr } // Standard Deviation calculateStandardDeviation(period = 20): number | null { if (this.historicalData.length < period) return null const closes = this.historicalData.slice(-period).map((d) => d.close) const mean = closes.reduce((a, b) => a + b, 0) / period const squareDiffs = closes.map((value) => Math.pow(value - mean, 2)) const avgSquareDiff = squareDiffs.reduce((a, b) => a + b, 0) / period const stdDev = Math.sqrt(avgSquareDiff) this.indicators.set("StdDev", stdDev) return stdDev } // Calculate moving averages calculateMovingAverages() { const sma20 = this.calculateSMA(20) const sma50 = this.calculateSMA(50) const ema20 = this.calculateEMA(20) this.indicators.set("SMA20", sma20) this.indicators.set("SMA50", sma50) this.indicators.set("EMA20", ema20) } // Get all calculated indicators getAllIndicators(): Record { return Object.fromEntries(this.indicators) } // Get specific indicator getIndicator(name: string): any { return this.indicators.get(name) } // Get current price data getCurrentData() { return this.historicalData[this.historicalData.length - 1] || null } // Get trading signals based on indicators getTradingSignals() { const rsi = this.getIndicator("RSI") const macd = this.getIndicator("MACD") const bb = this.getIndicator("BollingerBands") const currentData = this.getCurrentData() const signals = [] if (rsi !== null) { if (rsi > 70) signals.push({ type: "SELL", reason: "RSI Overbought", strength: "STRONG" }) if (rsi < 30) signals.push({ type: "BUY", reason: "RSI Oversold", strength: "STRONG" }) } if (macd && macd.macd > macd.signal) { signals.push({ type: "BUY", reason: "MACD Bullish", strength: "MEDIUM" }) } else if (macd && macd.macd < macd.signal) { signals.push({ type: "SELL", reason: "MACD Bearish", strength: "MEDIUM" }) } if (bb && currentData) { if (currentData.close > bb.upper) { signals.push({ type: "SELL", reason: "Above Bollinger Upper", strength: "MEDIUM" }) } if (currentData.close < bb.lower) { signals.push({ type: "BUY", reason: "Below Bollinger Lower", strength: "MEDIUM" }) } } return signals } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import { Badge } from "@/components/ui/badge" import { FrequencyGenerator } from "@/components/frequency-generator" import { CymaticsVisualization } from "@/components/cymatics-visualization" import { HapticFeedback } from "@/components/haptic-feedback" import { RangiHeartbeatMonitor } from "@/components/rangi-heartbeat-monitor" import { EnhancedMarketCards } from "@/components/enhanced-market-cards" import { CustomIndicators } from "@/components/custom-indicators" import { SensoryIntegrationDashboard } from "@/components/sensory-integration-dashboard" import { SensoryEventLedger } from "@/components/sensory-event-ledger" import { HackathonBanner } from "@/components/hackathon-banner" import { XionWalletWidget } from "@/components/xion-wallet-widget" import XionWallet from "@/components/xion-wallet-integration" interface BTCData { price: number change24h: number volume: number marketCap: number timestamp: number } interface MarketData { symbol: string name: string price: number change24h: number volume: number } export default function RangiHeartbeatDashboard() { const [btcData, setBtcData] = useState(null) const [allCryptoData, setAllCryptoData] = useState([]) const [isConnected, setIsConnected] = useState(false) const [lastUpdate, setLastUpdate] = useState(null) const [isFrequencyPlaying, setIsFrequencyPlaying] = useState(false) const [heartbeatMetrics, setHeartbeatMetrics] = useState(null) const updateTimeoutRef = useRef() const handleMarketDataChange = useCallback((marketData: MarketData) => { if (marketData.symbol === "BTC") { // Clear existing timeout if (updateTimeoutRef.current) { clearTimeout(updateTimeoutRef.current) } updateTimeoutRef.current = setTimeout(() => { setBtcData({ price: marketData.price, change24h: marketData.change24h, volume: marketData.volume, marketCap: marketData.price * 19700000, // Approximate BTC supply timestamp: Date.now(), }) setIsConnected(true) setLastUpdate(new Date()) }, 100) } }, []) const handleAllCryptoDataChange = useCallback((cryptos: MarketData[]) => { setAllCryptoData(cryptos) console.log("[v0] All crypto data updated:", cryptos.length, "cryptocurrencies") }, []) const handleHeartbeatMetricsUpdate = useCallback((metrics: any) => { setHeartbeatMetrics((prevMetrics) => { // Only update if metrics actually changed if (JSON.stringify(prevMetrics) !== JSON.stringify(metrics)) { return metrics } return prevMetrics }) }, []) const calculateRangiFrequency = (price: number) => { return heartbeatMetrics?.baseFrequency || 111.11 } const handlePlayStateChange = (isPlaying: boolean) => { setIsFrequencyPlaying(isPlaying) console.log("[v0] Global play state changed:", isPlaying) } useEffect(() => { return () => { if (updateTimeoutRef.current) { clearTimeout(updateTimeoutRef.current) } } }, []) const formatCurrency = (value: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(value) } const formatLargeNumber = (value: number) => { if (value >= 1e12) return `$${(value / 1e12).toFixed(2)}T` if (value >= 1e9) return `$${(value / 1e9).toFixed(2)}B` if (value >= 1e6) return `$${(value / 1e6).toFixed(2)}M` return formatCurrency(value) } const currentPrice = btcData?.price || 0 const rangiFrequency = calculateRangiFrequency(currentPrice) return (

{/* Header */}

Sounds of Rangi

Multi-Sensory Market Sonification Platform

Envisioned by Justin William McCrea

{heartbeatMetrics && (

System Status: {heartbeatMetrics.emotionalState} • {heartbeatMetrics.heartRate.toFixed(1)} BPM

)}

{isConnected ? "LIVE" : "DISCONNECTED"} {isFrequencyPlaying && ( SYNCHRONIZED )} {lastUpdate && ( Last update: {lastUpdate.toLocaleTimeString()} )}

{/* Enhanced Market Cards */} {/* Main Components Grid */}

) } [V0_FILE]typescriptreact:file="components/mobile-rangi-worldwide.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Slider } from "@/components/ui/slider" interface MobileRangiProps { cryptoData: any[] heartbeatMetrics: any isPlaying: boolean onTogglePlay: () => void } export function MobileRangiWorldwide({ cryptoData, heartbeatMetrics, isPlaying, onTogglePlay }: MobileRangiProps) { const [selectedCrypto, setSelectedCrypto] = useState(0) const [hapticIntensity, setHapticIntensity] = useState([75]) const [isConnected, setIsConnected] = useState(false) // XION Wallet Connection const connectXionWallet = async () => { try { // Simulate XION connection for mobile setIsConnected(true) if (navigator.vibrate) { navigator.vibrate([100, 50, 100]) // Connection success haptic } } catch (error) { console.error("XION connection failed:", error) } } // Mobile haptic feedback based on price changes useEffect(() => { if (cryptoData.length > 0 && navigator.vibrate) { const crypto = cryptoData[selectedCrypto] if (crypto?.change24h > 0) { navigator.vibrate([50, 30, 50]) // Positive change } else if (crypto?.change24h < 0) { navigator.vibrate([100, 50, 100, 50, 100]) // Negative change } } }, [cryptoData, selectedCrypto]) const currentCrypto = cryptoData[selectedCrypto] || {} return (

{/* Mobile Header */}

Dave XION Edition

Rangi-Worldwide Mobile

{isConnected ? "XION Connected" : "Tap to Connect"}

{/* XION Connection Card */} {/* Crypto Selector */} Select Cryptocurrency

{cryptoData.map((crypto, index) => ( ))}

{/* Current Crypto Display */}

{currentCrypto.name}

${currentCrypto.price?.toLocaleString()}

= 0 ? "text-green-400" : "text-red-400"}`}> {currentCrypto.change24h >= 0 ? "+" : ""} {currentCrypto.change24h?.toFixed(2)}%

Base Frequency: {currentCrypto.baseFrequency?.toFixed(2)} Hz

{/* Heartbeat Visualization */} Rangi's Heartbeat

{heartbeatMetrics?.heartRate?.toFixed(0)} BPM

State: {heartbeatMetrics?.emotionalState}

Energy: {(heartbeatMetrics?.energyLevel * 100)?.toFixed(0)}%

{/* Haptic Controls */} Haptic Intensity

{hapticIntensity[0]}%

{/* Play Controls */} {/* Domain Links */} Rangi Ecosystem

) } [V0_FILE]typescriptreact:file="components/deployment-guide.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" export function DeploymentGuide() { const domains = [ { name: "RealityProtocol.io", purpose: "Main Rangi-Worldwide Platform", status: "Ready for Deployment", features: ["Multi-Sensory Market Data", "XION Integration", "Harmonic Visualization"], }, { name: "CryptoClashers.games", purpose: "Gaming & Interactive Features", status: "Ready for Deployment", features: ["Haptic Gaming", "Crypto Battles", "Frequency Challenges"], }, { name: "StoneYard.cash", purpose: "Financial Dashboard", status: "Ready for Deployment", features: ["Portfolio Tracking", "Technical Indicators", "Market Analysis"], }, ] return (

Domain Deployment Strategy

Activate your Rangi ecosystem across multiple domains

{domains.map((domain, index) => (

{domain.name} {domain.status}

{domain.purpose}

{domain.features.map((feature, idx) => (

{feature}

))}

))} GitHub Integration

Connect to Luckyspot0golda@github for Rangis_Worldwide repository

) } [V0_FILE]typescriptreact:file="components/reality-protocol-hub.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Play, Github, ExternalLink, Award, Users, Zap, Shield } from "lucide-react" export default function RealityProtocolHub() { return (

{/* Hero Section */}

Rangi's Heartbeat

Patent-pending market sonification technology transforming financial data into multi-sensory experiences

Patent Pending ADA Compliant Multi-Sensory Accessibility First

{/* Innovation Showcase */}

Revolutionary Technology

The world's first multi-sensory financial analysis platform, making markets accessible to everyone

Auditory Markets Transform price movements into harmonic frequencies that reveal market patterns through sound

Bitcoin Base Frequency 111.11 Hz

Ethereum Harmonic 432.00 Hz

Solana Resonance 528.00 Hz

Haptic Feedback Feel market volatility through precise vibration patterns that communicate risk and opportunity

Volatility Pulse High Intensity

Trend Direction Upward Rhythm

Support Levels Steady Beat

Visual Cymatics Watch market data create beautiful geometric patterns that reveal hidden mathematical relationships

Pattern Recognition Sacred Geometry

Frequency Visualization Real-time

Market Harmonics Live Analysis

{/* Domain Ecosystem */}

Digital Ecosystem

Interconnected platforms serving different aspects of sensory finance

RealityProtocol.io Main hub for Rangi's Heartbeat technology and research

• Patent documentation
• Technical specifications
• Research publications
• Developer resources

CryptoClashers.games Gamified trading education with sensory feedback

• Interactive trading games
• Sensory learning modules
• Accessibility training
• Community challenges

StoneYard.cash Professional trading platform with multi-sensory analysis

• Real-time market data
• Haptic trading alerts
• Audio market analysis
• Institutional tools

{/* Technical Achievements */}

Technical Innovation

Core Technology

• Patent-pending harmonic algorithms
• Real-time frequency transformation
• Multi-sensory data mapping
• ADA-compliant interface design
• Cross-platform compatibility

Integration Stack

• XION blockchain integration
• Web Audio API implementation
• Haptic feedback systems
• Real-time market data feeds
• Mobile-responsive design

{/* Call to Action */}

Ready to Experience the Future?

Join the revolution in sensory finance. Make markets accessible to everyone.

) } [V0_FILE]typescriptreact:file="components/devpost-presentation.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Play, Github, ExternalLink, Award, Users, Zap, Shield, Headphones, Smartphone, Eye } from "lucide-react" export default function DevPostPresentation() { return (

{/* Header */}

Rangi's Heartbeat

Hearing the Pulse of Financial Markets

Patent Pending ADA Compliant Multi-Sensory

{/* Problem Statement */} The Problem

Financial markets speak a visual language that excludes millions. The blind cannot see charts, the deaf cannot hear alerts, and even sighted traders struggle with information overload.

285M visually impaired people excluded from visual trading interfaces

466M deaf/hard-of-hearing people miss audio alerts

Even experienced traders overwhelmed by data complexity

{/* Solution */} Our Solution

We've created the world's first multi-sensory market analysis platform that transforms complex financial data into intuitive auditory and haptic experiences using patent-pending harmonic algorithms.

Auditory Markets

Transform price movements into harmonic frequencies

Haptic Feedback

Feel market volatility through vibration patterns

Visual Cymatics

Watch data create geometric patterns

{/* Technology Stack */} Technology Stack

Frontend & Audio

• React.js with TypeScript
• Web Audio API for real-time synthesis
• Haptic feedback integration
• Responsive design with Tailwind CSS

Blockchain & Data

• XION for seamless transactions
• Real-time CoinGecko API integration
• Custom harmonic analysis algorithms
• Patent-pending frequency mapping

{/* Accessibility Breakthrough */} Accessibility Breakthrough

Inclusive Design

✅ First ADA-compliant trading interface
✅ Screen-free market analysis for the blind
✅ Haptic feedback for deaf community
✅ Intuitive understanding for all traders

Technical Innovation

• Patent-pending harmonic algorithms
• Multi-sensory data transformation
• Real-time frequency synthesis
• Cross-platform compatibility

{/* Demo Links */} Experience Rangi's Heartbeat

{/* Impact Statement */} Making Markets Accessible to Everyone

We're not just building another trading app - we're creating a new sensory language for financial understanding that includes everyone, regardless of ability.

"Democratizing financial markets through multi-sensory innovation"

) } [V0_FILE]typescriptreact:file="lib/cymatics.js" isMerged="true" Perfect — I’ll give you ready-to-paste patches and instructions to plug into your Manus/mobile edition so the missing pieces (on-chain/mint mock, cymatic visuals + sonification, accessibility, mobile polish) disappear. No fluff — copy the files/snippets exactly into your project, follow the tiny instructions, and you’ll have a much stronger submission for Xion and Meta. \ I assume your Manus preview is a web/mobile web build (HTML/JS/React). If anything you paste needs to be adapted to a different file structure, tell me the filenames and I’ll rewrite. Ok — three things we’ll add now: A Cymatic + Sonification module(canvas + WebAudio) — responds to market events.\ A Reality Capsule Mint UI (wallet-aware mint button) — works in two modes: real XION Dave SDK mint ( if you have it ) OR a secure mock/testnet mint endpoint for the hackathon demo. \ Accessibility & Mobile polish quick fixes — labels, focus states, larger targets, aria-live announcements, responsive CSS. 1 — Cymatics + Sonification Module (web) Goal: When market events happen (spike / dump / manual simulate), play harmonic tones (432Hz base + optional dual band) and animate a cymatic canvas. Copy these three files into your project. 1.1 Add cymatics.js Create src/cymatics.js (or paste into an appropriate script tag): // src/cymatics.js // Lightweight cymatic + sonification module. // Usage: import { initCymatics, triggerEvent } from './cymatics' // Call initCymatics(canvasElement) once. Call triggerEvent({type:'up'|'down'|'normal', strength:0.0-1.0}) let audioCtx = null let masterGain = null const oscNodes = [] let canvas, ctx, w, h, particles = [] let running = false const BASE_FREQ = 432 export function initCymatics(canvasEl) { canvas = canvasEl ctx = canvas.getContext("2d", { alpha: true }) resize() window.addEventListener("resize", resize) initAudio() initParticles() if (!running) { running = true requestAnimationFrame(loop) } } function initAudio() { if (audioCtx) return const AC = window.AudioContext || window.webkitAudioContext if (!AC) return audioCtx = new AC() masterGain = audioCtx.createGain() masterGain.gain.value = 0.08 masterGain.connect(audioCtx.destination) } function playHarmonic(base = BASE_FREQ, band = 0.0, duration = 0.45) { if (!audioCtx) initAudio() if (!audioCtx) return // create fundamental + a couple harmonics const freqs = [base, base * 2, base * 3] const nodes = freqs.map((f, i) => { const o = audioCtx.createOscillator() const g = audioCtx.createGain() o.type = i === 0 ? "sine" : "sawtooth" o.frequency.value = f * (1 + band * (i * 0.02)) g.gain.value = (i === 0 ? 1 : 0.25) * (1 - band * 0.5) * 0.6 o.connect(g) g.connect(masterGain) o.start() g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + duration) o.stop(audioCtx.currentTime + duration + 0.02) return { o, g } }) // cleanup setTimeout( () => nodes.forEach((n) => { try { n.o.disconnect() n.g.disconnect() } catch (e) {} }), (duration + 0.1) * 1000, ) } function resize() { if (!canvas) return const rect = canvas.getBoundingClientRect() canvas.width = Math.floor(rect.width * (window.devicePixelRatio || 1)) canvas.height = Math.floor(rect.height * (window.devicePixelRatio || 1)) canvas.style.width = rect.width + "px" canvas.style.height = rect.height + "px" ctx && ctx.setTransform(window.devicePixelRatio || 1, 0, 0, window.devicePixelRatio || 1, 0, 0) w = rect.width h = rect.height initParticles() } function initParticles() { particles = [] if (!w || !h) return const N = Math.min(900, Math.floor((w * h) / 3500)) for (let i = 0; i < N; i++) { particles.push({ x: Math.random() * w, y: Math.random() * h, size: 0.8 + Math.random() * 2.2, hue: 200 + Math.random() * 120, angle: Math.random() * Math.PI * 2, speed: 0.2 + Math.random() * 1.0, base: Math.random(), }) } } function loop(t) { if (!ctx) return ctx.fillStyle = "rgba(6,12,22,0.12)" ctx.fillRect(0, 0, w, h) const cx = w / 2, cy = h / 2, time = t * 0.001 particles.forEach((p) => { const dx = p.x - cx, dy = p.y - cy const dist = Math.sqrt(dx * dx + dy * dy) + 0.001 const wave = Math.sin(dist * 0.02 - time * (p.base * 2 + 1)) const accel = wave * 0.6 * p.speed p.x += Math.cos(p.angle) * accel * 0.6 p.y += Math.sin(p.angle) * accel * 0.6 p.angle += 0.001 * p.speed if (p.x < -20) p.x = w + 20 if (p.x > w + 20) p.x = -20 if (p.y < -20) p.y = h + 20 if (p.y > h + 20) p.y = -20 ctx.beginPath() const alpha = 0.4 + Math.max(0, 1 - dist / Math.max(w, h)) ctx.fillStyle = `hsla(${p.hue},85%,${40 + wave * 10}%,${alpha})` ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2) ctx.fill() }) requestAnimationFrame(loop) } /** * triggerEvent({type:'up'|'down'|'normal', strength:0-1}) */ export function triggerEvent(evt = { type: "normal", strength: 0.5 }) { // sonification mapping const band = Math.min(0.6, Math.max(0, evt.strength || 0.4)) if (evt.type === "up") { playHarmonic(BASE_FREQ * (1 + band * 0.06), band, 0.5) } else if (evt.type === "down") { // lower freq + distortion playHarmonic(BASE_FREQ * (1 - band * 0.12), band, 0.55) } else { playHarmonic(BASE_FREQ, band * 0.2, 0.28) } } 1.2 Hook it into your UI \ If your Manus page is a React component or plain HTML + JS, do this : Add a

to the place you want it to appear (demo header / map area). Import and initialize: // example for React effect or plain script run after DOM ready import { initCymatics } from "./cymatics" const canvas = document.getElementById("cymaticCanvas") if (canvas) initCymatics(canvas) // whenever you detect market up/down or simulateUp/simulateDown: triggerEvent({ type: "up", strength: Math.min(1, Math.abs(pct) / 5) }) // or triggerEvent({ type: "down", strength: 0.7 }) \ If you use plain HTML with script tags, paste cymatics.js code inside a module < script type=\ "module\"> and import accordingly. 2 — Reality Capsule Mint UI (mock + XION Dave real snippet) Goal: Add a mint button and two modes: Demo Mode (safe): post to a local mock endpoint or simulate mint (no keys).\ XION Mode (real): use Dave SDK snippet (works if you have @burnt ;-labs / abstraxion - react - native or web SDK ).\ 2.1 UI: Add the button to your page (HTML / React JSX)

Reality Capsule

Capture this harmonic market moment and mint a Reality Capsule NFT.

\ 2.2 Demo-mode JS: mint-demo.js\ Create src/mint-demo.js:\ // src/mint-demo.js // Demo mint: creates a local JSON "capsule" and returns a fake txn hash. // For hackathon we show "minted" UX without keys. \ export async function miniMintDemo({ ownerAddress = 'demo', payload = {} } = {}) { // payload could include timestamp, btcPrice, cymaticSnapshot (we'll store only metadata) const capsule = { id: 'capsule_' + Date.now(), owner: ownerAddress, timestamp: new Date().toISOString(), meta: payload }; // simulate network delay await new Promise(r => setTimeout(r, 900)); // store in localStorage for demo retrieval const list = JSON.parse(localStorage.getItem('reality_capsules') || '[]'); list.unshift(capsule); localStorage.setItem('reality_capsules', JSON.stringify(list.slice(0,50))); return { ok: true, txHash: 'demo_tx_' + Math.floor(Math.random()*1000000), capsule }; } \ 2.3 Hook Mint button to demo mint:\ Add to your main script:\ import { miniMintDemo } from ;("./mint-demo") \ import { triggerEvent } from "./cymatics" const mintBtn = document.getElementById("mintBtn") const mintStatus = document.getElementById("mintStatus") mintBtn.addEventListener("click", async () => { mintBtn.disabled = true mintStatus.textContent = "Minting Reality Capsule…" // capture a tiny payload: price + time const price = window.currentBtcPrice || null // set this in your market fetch const payload = { btcPrice: price, note: "Hackathon demo capsule" } // play celebratory harmonic + cymatic flash triggerEvent({ type: "up", strength: 0.8 }) try { const r = await miniMintDemo({ ownerAddress: "demo_user", payload }) if (r.ok) { mintStatus.textContent = `Minted demo: ${r.txHash}` } else { mintStatus.textContent = "Mint failed (demo)." } } catch (e) { mintStatus.textContent = "Error minting (demo)." console.error(e) } finally { mintBtn.disabled = false setTimeout(() => (mintStatus.textContent = ""), 6000) } }) \ 2.4 OPTIONAL: Real XION Dave snippet (web or RN)\ If you have XION Dave SDK/web package available, you can replace the demo mint call with a Dave sign + submit call.Example pseudo - code(web) : // PSEUDO - depends on actual XION web SDK package names import { useDave } from "@burnt-labs/dave-web" function MintWithDave() { const { connect, account, signAndSubmit } = useDave() async function mintOnChain(payload) { if (!account) await connect() const tx = { to: "0xYourContract", data: encodeCapsule(payload) } const res = await signAndSubmit(tx) // sdk handles gasless treasury if configured return res } } If you want, paste your SDK package name and I ’ll give a direct copy/paste implementation. 3 — Accessibility & Mobile polish patches Goal: Add aria attributes, focusable elements, larger tap targets, and an aria-live announcement for market events. 3.1 Add ARIA attributes & live announcements Where you display price and ledger add:

BTC • live

$—

When the market fetch updates set btcPriceEl.textContent AND update an announcement // after fetching price: region: window.currentBtcPrice = price const announce = document.getElementById("marketAnnounce") if (announce) { const direction = price - (state.lastPrice || price) >= 0 ? "up" : "down" announce.textContent = `Market ${direction}. Bitcoin is now ${price} dollars.` } Add an offscreen live region in your HTML:

3.2 Focus styles & larger targets(CSS) Add to your CSS: button, .btn { min - height :44px min - width :120px touch - action :manipulation } button:focus, .btn:focus { outline: 3px solid rgba(14,165,183,0.45) outline - offset :3px } .card[role="region"] { padding: 12px } 3.3 High - contrast toggle (optional but powerful) Add a small toggle: JS: document.getElementById("contrastToggle").addEventListener("click", (e) => { const on = document.body.classList.toggle("high-contrast") e.target.setAttribute("aria-pressed", on ? "true" : "false") }) CSS: body.high - contrast { background: # 000 color: #fff } body.high - contrast.cell.house { filter: saturate(1.6) } 4 — Mobile preview / screenshot automation To create phone mockups quickly: Add a media query optimized layout for small screens : @media (max-width:480px) { .main grid - template - columns : 1fr .map grid - template - columns : repeat(3, 1fr) .cell height: 56px font - size :11px .market-card font - size :14px padding: 8px } Use Chrome DevTools device toolbar to take screenshots(mobile) and export PNGs to upload to Devpost. 5 — Quick integration checklist (order to apply changes) Add src/cymatics.js and import it in your main page. Add a

right above the map. Include < script type = "module" src="./src/cymatics.js"> and OR paste the cymatics code inline inside a block. Replace simulateUp and simulateDown functions to call triggerEvent(...) where you currently call handleMarketEvent(...). Keep both: call handleMarketEvent then triggerEvent.Example : function simulateUp() { handleMarketEvent(2.5) triggerEvent({ type: "up", strength: 0.8 }) } function simulateDown() { handleMarketEvent(-3.8) triggerEvent({ type: "down", strength: 0.9 }) } Add to your market fetch after detecting if (Math.abs(pct) > 0.8) { const strength = Math.min(1, Math.abs(pct) / 6) triggerEvent({ type: pct > 0 ? "up" : "down", strength }) // optional: announce document.getElementById("marketAnnounce").textContent = `Market ${pct > 0 ? "up" : "down"} ${pct.toFixed(2)} percent` } Add mint area HTML snippet and mint JS hook as shown above. 7 — Final test instructions (5–10 minutes) Apply the JS files and HTML additions above. Save and reload. Open the demo in Chrome. Confirm canvas shows moving particles. If silent, interact (some browsers require a user gesture to start AudioContext — click on page). Click Simulate Up: you should see stronger particle motion + hear a rising harmonic tone. Ledger logs event. Click Simulate Down: lower tone + destructive log and potentially a shop removed. Click Mint Reality Capsule (Demo): UI should show “Minting…” then “Minted demo: demo_tx_XXXXX” and localStorage stores a capsule (inspect via Console: localStorage.getItem('reality_capsules')). Use Chrome DevTools device emulation to capture mobile screenshots. 8 — What I can deliver next (pick one) I’ll generate the exact patched golam_demo.html file with cymatics + mint demo embedded and return it ready to upload to your Manus preview — so no extra wiring on your side. I’ll create the XION Dave integration snippet tailored to the exact SDK you have (web or RN) so you can swap the demo mint to a real chain mint (requires your SDK name/credentials). I’ll produce a short screen capture video (MP4) of the updated demo flow so you can quickly attach to Devpost. Which one first? I recommend (1) — I’ll produce a fully patched golam_demo.html with everything inline for immediate upload to Manus, then optionally(2) to swap demo mint for real Xion later. [V0_FILE]typescriptreact:file="components/cymatic-visualizer.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Card } from "@/components/ui/card" interface CymaticVisualizerProps { frequency?: number intensity?: number marketEvent?: "up" | "down" | "normal" } export function CymaticVisualizer({ frequency = 432, intensity = 0.5, marketEvent = "normal", }: CymaticVisualizerProps) { const canvasRef = useRef(null) const [isInitialized, setIsInitialized] = useState(false) useEffect(() => { if (!canvasRef.current || isInitialized) return const initCymatics = async () => { try { // Import the cymatics module dynamically const { initCymatics: init, triggerEvent } = await import("@/lib/cymatics.js") if (canvasRef.current) { init(canvasRef.current) setIsInitialized(true) // Store triggerEvent function globally for market events ;(window as any).triggerCymaticEvent = triggerEvent } } catch (error) { console.error("[v0] Failed to initialize cymatics:", error) } } initCymatics() }, [isInitialized]) useEffect(() => { if (!isInitialized || !(window as any).triggerCymaticEvent) return const triggerEvent = (window as any).triggerCymaticEvent if (marketEvent !== "normal") { const strength = Math.min(1, Math.max(0.1, intensity)) triggerEvent({ type: marketEvent, strength }) } }, [marketEvent, intensity, isInitialized]) return (

Market Cymatics

{frequency}Hz Base

) } [V0_FILE]typescriptreact:file="components/xion-wallet.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Wallet, Copy, ExternalLink, Coins, TrendingUp, Send, Download, Shield, Zap, Volume2 } from "lucide-react" import toast from "react-hot-toast" import XionService from "../services/XionService" import SonificationEngine from "../services/SonificationEngine" const XionWallet = () => { const [xionService] = useState(new XionService()) const [sonificationEngine] = useState(new SonificationEngine()) const [isConnected, setIsConnected] = useState(false) const [isConnecting, setIsConnecting] = useState(false) const [walletData, setWalletData] = useState({ address: "", balance: [], rewards: [], delegations: [], transactions: [], }) const [networkStats, setNetworkStats] = useState(null) const [validators, setValidators] = useState([]) const [sendForm, setSendForm] = useState({ recipient: "", amount: "", denom: "uxion", }) useEffect(() => { // Initialize sonification engine sonificationEngine.initialize() return () => { sonificationEngine.dispose() } }, []) const connectWallet = async () => { setIsConnecting(true) try { const mnemonic = import.meta.env.VITE_COSMOSTATION_MNEMONIC if (!mnemonic) { throw new Error("Mnemonic not found in environment variables") } const result = await xionService.initializeWallet(mnemonic) if (result.success) { setIsConnected(true) setWalletData((prev) => ({ ...prev, address: result.address })) // Play connection success sound await sonificationEngine.playTone(432, 1000, 0.1) toast.success(`Connected to XION wallet: ${result.address.slice(0, 10)}...`) // Load wallet data await loadWalletData() await loadNetworkData() } else { throw new Error(result.error) } } catch (error) { console.error("Connection failed:", error) toast.error(`Connection failed: ${error.message}`) // Play error sound await sonificationEngine.playChord([400, 420], 500, 0.05) } finally { setIsConnecting(false) } } const loadWalletData = async () => { try { // Get balance const balanceResult = await xionService.getBalance() if (balanceResult.success) { setWalletData((prev) => ({ ...prev, balance: balanceResult.balance })) } // Get staking rewards const rewardsResult = await xionService.getStakingRewards() if (rewardsResult.success) { setWalletData((prev) => ({ ...prev, rewards: rewardsResult.rewards })) // Sonify rewards if any if (rewardsResult.total > 0) { await sonificationEngine.sonifyRewards(rewardsResult.total) } } // Get delegations const delegationsResult = await xionService.getDelegations() if (delegationsResult.success) { setWalletData((prev) => ({ ...prev, delegations: delegationsResult.delegations })) } // Get transaction history const txResult = await xionService.getTransactionHistory() if (txResult.success) { setWalletData((prev) => ({ ...prev, transactions: txResult.transactions })) } } catch (error) { console.error("Failed to load wallet data:", error) toast.error("Failed to load wallet data") } } const loadNetworkData = async () => { try { // Get network stats const statsResult = await xionService.getNetworkStats() if (statsResult.success) { setNetworkStats(statsResult.stats) // Sonify network activity await sonificationEngine.sonifyNetworkStats(statsResult.stats) } // Get validators const validatorsResult = await xionService.getValidators() if (validatorsResult.success) { setValidators(validatorsResult.validators) } } catch (error) { console.error("Failed to load network data:", error) } } const sendTokens = async () => { try { if (!sendForm.recipient || !sendForm.amount) { toast.error("Please fill in all fields") return } const result = await xionService.sendTokens(sendForm.recipient, sendForm.amount, sendForm.denom) if (result.success) { toast.success(`Transaction sent: ${result.transactionHash}`) // Sonify successful transaction await sonificationEngine.sonifyTransaction("send", sendForm.amount, true) // Reset form setSendForm({ recipient: "", amount: "", denom: "uxion" }) // Reload wallet data await loadWalletData() } else { throw new Error(result.error) } } catch (error) { console.error("Send failed:", error) toast.error(`Send failed: ${error.message}`) // Sonify failed transaction await sonificationEngine.sonifyTransaction("send", sendForm.amount, false) } } const claimRewards = async () => { try { const validatorAddresses = walletData.delegations.map((d) => d.validator_address) if (validatorAddresses.length === 0) { toast.error("No delegations found") return } const result = await xionService.claimRewards(validatorAddresses) if (result.success) { toast.success(`Rewards claimed: ${result.transactionHash}`) // Sonify reward claim const totalRewards = walletData.rewards.reduce((sum, r) => sum + Number.parseFloat(r.amount), 0) await sonificationEngine.sonifyRewards(totalRewards) // Reload wallet data await loadWalletData() } else { throw new Error(result.error) } } catch (error) { console.error("Claim failed:", error) toast.error(`Claim failed: ${error.message}`) } } const playReturnFrequency = async () => { await sonificationEngine.playReturnFrequency(3000) toast.success("Playing 111.11 Hz Return to Sender frequency") } const playBinauralBeats = async () => { await sonificationEngine.playBinauralBeats(432, 8, 10000) toast.success("Playing binaural beats for focus") } const copyToClipboard = (text) => { navigator.clipboard.writeText(text) toast.success("Copied to clipboard") } const formatAmount = (amount, denom) => { const value = Number.parseFloat(amount) / 1000000 // Convert from micro units return `${value.toFixed(6)} ${denom.replace("u", "").toUpperCase()}` } const formatAddress = (address) => { return `${address.slice(0, 10)}...${address.slice(-6)}` } if (!isConnected) { return ( XION Wallet Connect to XION testnet using Cosmostation wallet ) } return (

{/* Wallet Header */}

XION Wallet Connected

Live {formatAddress(walletData.address)}

Balance Staking Send Network History Account Balance {walletData.balance.length > 0 ? (

{walletData.balance.map((coin, index) => (

{coin.denom.replace("u", "").toUpperCase()} {formatAmount(coin.amount, coin.denom)}

))}

) : (

No balance found

)}

Staking Rewards

{walletData.rewards.length > 0 && ( )} {walletData.rewards.length > 0 ? (

{walletData.rewards.map((reward, index) => (

{formatAddress(reward.validator_address)} +{formatAmount(reward.amount, reward.denom)}

))}

) : (

No rewards available

)} Delegations {walletData.delegations.length > 0 ? (

{walletData.delegations.map((delegation, index) => (

{formatAddress(delegation.validator_address)} {formatAmount(delegation.balance.amount, delegation.balance.denom)}

))}

) : (

No delegations found

)} Send Tokens

Recipient Address setSendForm((prev) => ({ ...prev, recipient: e.target.value }))} />

Amount (in micro units) setSendForm((prev) => ({ ...prev, amount: e.target.value }))} />

Network Statistics {networkStats ? (

Block Height

{networkStats.latest_block_height}

Chain ID

{networkStats.node_info?.network}

Voting Power

{networkStats.validator_info?.voting_power}

Peers

{networkStats.sync_info?.peers || "N/A"}

) : (

Loading network stats...

)} Validators {validators.length > 0 ? (

{validators.slice(0, 10).map((validator, index) => (

{validator.description?.moniker || "Unknown"} {(Number.parseFloat(validator.commission?.commission_rates?.rate) * 100).toFixed(1)}%

))}

) : (

Loading validators...

)} Transaction History {walletData.transactions.length > 0 ? (

{walletData.transactions.map((tx, index) => (

{tx.tx?.body?.messages?.[0]?.["@type"]?.split(".").pop() || "Unknown"}

{new Date(tx.timestamp).toLocaleString()}

{tx.tx_response?.code === 0 ? "Success" : "Failed"}

))}

) : (

No transactions found

)}

) } export default XionWallet [V0_FILE]typescriptreact:file="components/dual-cymatics-display.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Waves, Vibrate, TrendingUp, Activity, Zap, Coins } from "lucide-react" interface CymaticsProps { frequency: number amplitude: number marketData: any isPlaying: boolean title: string type: "market" | "portfolio" } const CymaticsVisualizer = ({ frequency, amplitude, marketData, isPlaying, title, type }: CymaticsProps) => { const canvasRef = useRef(null) const animationRef = useRef() const [particles, setParticles] = useState([]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Initialize particles based on frequency const particleCount = Math.floor(frequency / 2) const newParticles = Array.from({ length: particleCount }, (_, i) => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2, size: Math.random() * 3 + 1, phase: Math.random() * Math.PI * 2, baseX: Math.random() * canvas.width, baseY: Math.random() * canvas.height, })) setParticles(newParticles) const animate = (time: number) => { ctx.clearRect(0, 0, canvas.width, canvas.height) // Create gradient background const gradient = ctx.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2, ) gradient.addColorStop(0, type === "market" ? "rgba(59, 130, 246, 0.1)" : "rgba(168, 85, 247, 0.1)") gradient.addColorStop(1, "rgba(0, 0, 0, 0.9)") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) if (isPlaying) { // Draw cymatic patterns newParticles.forEach((particle, i) => { // Calculate position based on frequency and time const waveX = Math.sin((time * 0.001 * frequency) / 100 + particle.phase) * amplitude * 50 const waveY = Math.cos((time * 0.001 * frequency) / 100 + particle.phase + Math.PI / 2) * amplitude * 30 particle.x = particle.baseX + waveX particle.y = particle.baseY + waveY // Draw particle with glow effect ctx.save() ctx.globalAlpha = 0.8 ctx.shadowBlur = 10 ctx.shadowColor = type === "market" ? "#3b82f6" : "#a855f7" ctx.fillStyle = type === "market" ? "#60a5fa" : "#c084fc" ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2) ctx.fill() ctx.restore() // Draw connecting lines for cymatic patterns if (i > 0) { const prevParticle = newParticles[i - 1] const distance = Math.sqrt( Math.pow(particle.x - prevParticle.x, 2) + Math.pow(particle.y - prevParticle.y, 2), ) if (distance < 100) { ctx.save() ctx.globalAlpha = 0.3 ctx.strokeStyle = type === "market" ? "#3b82f6" : "#a855f7" ctx.lineWidth = 1 ctx.beginPath() ctx.moveTo(prevParticle.x, prevParticle.y) ctx.lineTo(particle.x, particle.y) ctx.stroke() ctx.restore() } } }) // Draw frequency visualization ctx.save() ctx.globalAlpha = 0.6 ctx.strokeStyle = type === "market" ? "#60a5fa" : "#c084fc" ctx.lineWidth = 2 ctx.beginPath() for (let x = 0; x < canvas.width; x += 5) { const y = canvas.height / 2 + Math.sin(((x + time * 0.01) * frequency) / 1000) * amplitude * 100 + Math.sin(((x + time * 0.02) * frequency) / 500) * amplitude * 50 if (x === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } } ctx.stroke() ctx.restore() } animationRef.current = requestAnimationFrame(animate) } animationRef.current = requestAnimationFrame(animate) return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [frequency, amplitude, isPlaying, type]) return (

) } interface DualCymaticsDisplayProps { marketFrequency: number portfolioFrequency: number marketAmplitude: number portfolioAmplitude: number marketData: any portfolioData: any isPlaying: boolean } export default function DualCymaticsDisplay({ marketFrequency, portfolioFrequency, marketAmplitude, portfolioAmplitude, marketData, portfolioData, isPlaying, }: DualCymaticsDisplayProps) { const [activeTab, setActiveTab] = useState("dual") const [hapticEnabled, setHapticEnabled] = useState(false) useEffect(() => { // Trigger haptic feedback when frequencies change significantly if (hapticEnabled && "vibrate" in navigator) { const frequencyDiff = Math.abs(marketFrequency - portfolioFrequency) if (frequencyDiff > 10) { navigator.vibrate([100, 50, 100]) } } }, [marketFrequency, portfolioFrequency, hapticEnabled]) const toggleHaptic = () => { if ("vibrate" in navigator) { setHapticEnabled(!hapticEnabled) if (!hapticEnabled) { navigator.vibrate(200) // Test vibration } } } return (

Dual Cymatics Display World's First

{isPlaying ? "Live" : "Paused"}

Real-time cymatic visualization of market harmonics and portfolio resonance Dual View Market Only Portfolio Only

Market Harmonics

Global Market Pulse {marketData?.emotion || "Calm"}

Portfolio Resonance

Personal Holdings {portfolioData?.performance || "Stable"}

Harmonic Convergence

When frequencies align, your portfolio resonates with market harmony

Market: {marketFrequency.toFixed(2)} Hz • Portfolio: {portfolioFrequency.toFixed(2)} Hz • Δ: {Math.abs(marketFrequency - portfolioFrequency).toFixed(2)} Hz

) } [V0_FILE]png:file="public/images/rangis-heartbeat-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/rangis_heartbeat_banner-pvbS6yTYndlUchyvWADCTQERmG98xr.png" isMerged="true" [V0_FILE]typescriptreact:file="components/devpost-hackathon-presentation.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Trophy, Zap, Headphones, Smartphone, Eye, Wallet, Award, ExternalLink, Play, Github, Globe, Users, Target, Lightbulb, Code, Accessibility, } from "lucide-react" export function DevPostHackathonPresentation() { const [activeDemo, setActiveDemo] = useState(null) const features = [ { icon: , title: "Multi-Sensory Sonification", description: "Transform market data into harmonic frequencies (432Hz base) with emotional state detection", }, { icon: , title: "Dual Cymatics Visualization", description: "World's first real-time cymatic patterns synchronized with market movements", }, { icon: , title: "Haptic Feedback System", description: "Feel your investments through dynamic vibration patterns based on market emotions", }, { icon: , title: "XION Wallet Integration", description: "Connect your real portfolio and experience your investments through all senses", }, { icon: , title: "Reality Capsule NFTs", description: "Mint unique NFTs that capture harmonic market moments using XION blockchain", }, { icon: , title: "Accessibility First", description: "ADA-compliant design making financial data accessible through multiple sensory channels", }, ] const technicalHighlights = [ "Patent-pending market sonification algorithm", "Real-time WebAudio API integration with 432Hz harmonic base", "Canvas-based cymatic particle system with 900+ synchronized particles", "XION Dave SDK integration for gasless transactions", "Multi-crypto API with emotional state detection", "Responsive design optimized for mobile and desktop", "TypeScript + Next.js 15 with App Router", "Accessibility features including ARIA live regions and screen reader support", ] const demoScenarios = [ { id: "portfolio", title: "Portfolio Sonification", description: "Connect XION wallet → Experience your real investments as harmonic frequencies → Feel market movements through haptic feedback", icon: , }, { id: "cymatics", title: "Dual Cymatics Demo", description: "Watch market data transform into beautiful particle animations → See sound waves visualized in real-time → World's first implementation", icon: , }, { id: "nft", title: "Reality Capsule Minting", description: "Capture harmonic market moments → Mint unique NFTs on XION → Own pieces of financial history", icon: , }, ] return (

{/* Hero Section */}

Rangi's Heartbeat

The world's first multi-sensory market sonification platform. Experience your investments through sound, sight, and touch with patent-pending technology.

XION Proof of Concept Patent Pending ADA Compliant World's First

{/* Problem & Solution */}

The Problem

Financial markets are overwhelming and inaccessible:

• Visual-only interfaces exclude users with disabilities
• Complex data creates analysis paralysis
• Emotional trading decisions lead to losses
• No intuitive way to "feel" market movements
• Traditional charts don't capture market psychology

Our Solution

Multi-sensory market experience through:

• Harmonic sonification (432Hz base frequency)
• Real-time cymatic visualizations
• Emotional haptic feedback patterns
• XION wallet integration for real portfolios
• Accessibility-first design principles

{/* Features Grid */}

Revolutionary Features

{features.map((feature, index) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* Demo Scenarios */}

Interactive Demos

{demoScenarios.map((demo) => ( setActiveDemo(activeDemo === demo.id ? null : demo.id)} >

{demo.icon}

{demo.title}

{demo.description}

))}

{/* Technical Implementation */}


            Technical Implementation


        
          
            
              Architecture
              XION Integration
              Algorithms
              Accessibility
            

            
              
                
                  Frontend Stack
                  
                    • Next.js 15 with App Router
                    • TypeScript for type safety
                    • Tailwind CSS v4 for styling
                    • WebAudio API for sonification
                    • Canvas API for cymatics
                    • Vibration API for haptics
                  
                
                
                  Key Highlights
                  
                    {technicalHighlights.slice(0, 6).map((highlight, index) => (
                      • {highlight}
                    ))}
                  
                
              
            

            
              
                XION Blockchain Integration
                
                  
                    Wallet Connection
                    
                      • Cosmostation wallet integration
                      • Real-time balance monitoring
                      • Staking rewards sonification
                      • Transaction history analysis
                    
                  
                  
                    Reality Capsule NFTs
                    
                      • Capture harmonic market moments
                      • Gasless minting with Dave SDK
                      • Unique cymatic fingerprints
                      • On-chain market psychology data
                    
                  
                
              
            

            
              
                Patent-Pending Algorithms
                
                  
                    Rangi Heartbeat Algorithm
                    
                      Converts market volatility into emotional states (calm, anxious, euphoric, fearful) with
                      corresponding heartbeat patterns and harmonic frequencies.
                    
                  
                  
                    Cymatic Particle System
                    
                      900+ synchronized particles respond to market frequencies, creating real-time visual
                      representations of sound waves and market psychology.
                    
                  
                  
                    Haptic Emotion Mapping
                    
                      Dynamic vibration patterns that correspond to market emotions, allowing users to literally "feel"
                      market movements through their devices.
                    
                  
                
              
            

            
              
                Accessibility & Inclusion
                
                  
                    Visual Accessibility
                    
                      • High contrast mode toggle
                      • ARIA live regions for updates
                      • Screen reader optimized
                      • Keyboard navigation support
                    
                  
                  
                    Multi-Sensory Design
                    
                      • Audio-first market analysis
                      • Haptic feedback for mobile users
                      • Visual cymatics for deaf users
                      • Multiple input modalities



      {/* Links & Resources */}
      
        
          
            
              
              Live Demo
            
          
          
            
              Experience Rangi's Heartbeat live with real market data and XION wallet integration.
            
            
          
        

        
          
            
              
              Source Code
            
          
          
            
              Open source implementation with detailed documentation and setup instructions.
            
            
          
        

        
          
            
              
              About Creator
            
          
          
            
              Justin William McCrea - Sensory Finance Innovator with patent-pending market sonification technology.
            
            
          
        
      

      {/* Call to Action */}
      
        
          Ready to Hear Your Investments?
          
            Join the future of accessible finance. Experience your portfolio through sound, sight, and touch with the
            world's first multi-sensory market platform.


  )
}
[V0_FILE]typescriptreact:file="app/devpost/page.tsx" isMerged="true"
import { DevPostHackathonPresentation } from "@/components/devpost-hackathon-presentation"

export default function DevPostPage() {
  return 
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { AbstraxionProvider } from "@burnt-labs/abstraxion"
import { ThemeProvider } from "next-themes"
import { Suspense } from "react"
import "./globals.css"

const geistSans = GeistSans
const geistMono = GeistMono

export const metadata: Metadata = {
  title: "v0 App",
  description: "Created with v0",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        Loading...

}>
          
            
              {children}
            
          
        
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/xion-wallet-provider.tsx" isEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import { useAbstraxionAccount, useAbstraxionSigningClient, useModal } from "@burnt-labs/abstraxion"

interface XionWalletContextType {
  isConnected: boolean
  address: string | null
  balance: number
  connect: () => Promise
  disconnect: () => void
  sendTransaction: (to: string, amount: number) => Promise
  getBalance: () => Promise
}

const XionWalletContext = createContext(undefined)

export function useXionWallet() {
  const context = useContext(XionWalletContext)
  if (!context) {
    throw new Error("useXionWallet must be used within XionWalletProvider")
  }
  return context
}

interface XionWalletProviderProps {
  children: ReactNode
}

export function XionWalletProvider({ children }: XionWalletProviderProps) {
  const { data: account } = useAbstraxionAccount()
  const { client } = useAbstraxionSigningClient()
  const [, setShowModal] = useModal()

  const [balance, setBalance] = useState(0)

  const isConnected = !!account?.bech32Address
  const address = account?.bech32Address || null

  const connect = async () => {
    try {
      console.log("[v0] Opening Abstraxion connection modal...")
      setShowModal(true)

      // Balance will be fetched automatically when account connects
      if (account?.bech32Address) {
        await getBalance()
      }
    } catch (error) {
      console.error("[v0] Failed to connect to XION wallet:", error)
    }
  }

  const disconnect = () => {
    setShowModal(false)
    setBalance(0)
    console.log("[v0] Disconnected from XION wallet")
  }

  const sendTransaction = async (to: string, amount: number): Promise => {
    if (!client || !account?.bech32Address) {
      throw new Error("Wallet not connected")
    }

    try {
      console.log(`[v0] Sending ${amount} XION to ${to}`)

      const msg = {
        typeUrl: "/cosmos.bank.v1beta1.MsgSend",
        value: {
          fromAddress: account.bech32Address,
          toAddress: to,
          amount: [
            {
              denom: "uxion",
              amount: (amount * 1000000).toString(), // Convert to micro units
            },
          ],
        },
      }

      const fee = {
        amount: [{ denom: "uxion", amount: "5000" }],
        gas: "200000",
      }

      const result = await client.signAndBroadcast(account.bech32Address, [msg], fee)

      console.log("[v0] Transaction sent:", result.transactionHash)

      // Update balance after transaction
      await getBalance()

      return result.transactionHash
    } catch (error) {
      console.error("[v0] Transaction failed:", error)
      throw error
    }
  }

  const getBalance = async (): Promise => {
    if (!client || !account?.bech32Address) return 0

    try {
      const balances = await client.getAllBalances(account.bech32Address)
      const xionBalance = balances.find((b) => b.denom === "uxion")
      const balance = xionBalance ? Number.parseFloat(xionBalance.amount) / 1000000 : 0

      setBalance(balance)
      return balance
    } catch (error) {
      console.error("[v0] Failed to fetch balance:", error)
      return 0
    }
  }

  useEffect(() => {
    if (account?.bech32Address && client) {
      getBalance()
    }
  }, [account?.bech32Address, client])

  const value: XionWalletContextType = {
    isConnected,
    address,
    balance,
    connect,
    disconnect,
    sendTransaction,
    getBalance,
  }

  return {children}
}
[V0_FILE]typescriptreact:file="components/xion-wallet-integration.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Wallet, Copy, ExternalLink, Coins, TrendingUp, Send, Download, Shield, Zap, Volume2 } from "lucide-react"
import toast from "react-hot-toast"
import { useAbstraxionAccount, useAbstraxionSigningClient, useModal } from "@burnt-labs/abstraxion"

class SonificationEngine {
  initialize() {
    console.log("[v0] Sonification engine initialized")
  }

  dispose() {
    console.log("[v0] Sonification engine disposed")
  }

  async playTone(frequency: number, duration: number, volume: number) {
    console.log(`[v0] Playing tone: ${frequency}Hz for ${duration}ms at volume ${volume}`)
  }

  async playChord(frequencies: number[], duration: number, volume: number) {
    console.log(`[v0] Playing chord: ${frequencies.join(", ")}Hz for ${duration}ms at volume ${volume}`)
  }

  async sonifyRewards(total: number) {
    console.log(`[v0] Sonifying rewards: ${total}`)
  }

  async sonifyNetworkStats(stats: any) {
    console.log("[v0] Sonifying network stats:", stats)
  }

  async sonifyTransaction(type: string, amount: string, success: boolean) {
    console.log(`[v0] Sonifying transaction: ${type} ${amount} ${success ? "success" : "failed"}`)
  }

  async playReturnFrequency(duration: number) {
    console.log(`[v0] Playing return frequency for ${duration}ms`)
  }

  async playBinauralBeats(baseFreq: number, beatFreq: number, duration: number) {
    console.log(`[v0] Playing binaural beats: ${baseFreq}Hz + ${beatFreq}Hz for ${duration}ms`)
  }
}

const XionWallet = () => {
  const { data: account } = useAbstraxionAccount()
  const { client } = useAbstraxionSigningClient()
  const [, setShowModal] = useModal()

  const [sonificationEngine] = useState(new SonificationEngine())
  const [walletData, setWalletData] = useState({
    balance: [],
    rewards: [],
    delegations: [],
    transactions: [],
  })
  const [networkStats, setNetworkStats] = useState(null)
  const [validators, setValidators] = useState([])
  const [sendForm, setSendForm] = useState({
    recipient: "",
    amount: "",
    denom: "uxion",
  })

  const isConnected = !!account?.bech32Address
  const address = account?.bech32Address || ""

  useEffect(() => {
    sonificationEngine.initialize()
    return () => {
      sonificationEngine.dispose()
    }
  }, [])

  const connectWallet = async () => {
    try {
      console.log("[v0] Opening Abstraxion connection modal...")
      setShowModal(true)

      // Play connection success sound when connected
      if (account?.bech32Address) {
        await sonificationEngine.playTone(432, 1000, 0.1)
        toast.success(`Connected to XION wallet: ${account.bech32Address.slice(0, 10)}...`)
        await loadWalletData()
        await loadNetworkData()
      }
    } catch (error) {
      console.error("Connection failed:", error)
      toast.error(`Connection failed: ${error.message}`)
      await sonificationEngine.playChord([400, 420], 500, 0.05)
    }
  }

  const loadWalletData = async () => {
    if (!client || !account?.bech32Address) return

    try {
      const balances = await client.getAllBalances(account.bech32Address)
      setWalletData((prev) => ({ ...prev, balance: balances }))

      try {
        const delegations = (await client.getBalanceStaked?.(account.bech32Address)) || []
        setWalletData((prev) => ({ ...prev, delegations }))
      } catch (error) {
        console.log("[v0] Staking data not available:", error)
      }
    } catch (error) {
      console.error("Failed to load wallet data:", error)
      toast.error("Failed to load wallet data")
    }
  }

  const loadNetworkData = async () => {
    if (!client) return

    try {
      const height = await client.getHeight()
      const chainId = await client.getChainId()

      setNetworkStats({
        latest_block_height: height.toString(),
        node_info: { network: chainId },
        validator_info: { voting_power: "N/A" },
      })

      await sonificationEngine.sonifyNetworkStats({ height, chainId })
    } catch (error) {
      console.error("Failed to load network data:", error)
    }
  }

  const sendTokens = async () => {
    if (!client || !account?.bech32Address) {
      toast.error("Wallet not connected")
      return
    }

    try {
      if (!sendForm.recipient || !sendForm.amount) {
        toast.error("Please fill in all fields")
        return
      }

      const msg = {
        typeUrl: "/cosmos.bank.v1beta1.MsgSend",
        value: {
          fromAddress: account.bech32Address,
          toAddress: sendForm.recipient,
          amount: [
            {
              denom: sendForm.denom,
              amount: (Number.parseFloat(sendForm.amount) * 1000000).toString(),
            },
          ],
        },
      }

      const fee = {
        amount: [{ denom: "uxion", amount: "5000" }],
        gas: "200000",
      }

      const result = await client.signAndBroadcast(account.bech32Address, [msg], fee)

      if (result.code === 0) {
        toast.success(`Transaction sent: ${result.transactionHash}`)
        await sonificationEngine.sonifyTransaction("send", sendForm.amount, true)
        setSendForm({ recipient: "", amount: "", denom: "uxion" })
        await loadWalletData()
      } else {
        throw new Error(`Transaction failed: ${result.rawLog}`)
      }
    } catch (error) {
      console.error("Send failed:", error)
      toast.error(`Send failed: ${error.message}`)
      await sonificationEngine.sonifyTransaction("send", sendForm.amount, false)
    }
  }

  const claimRewards = async () => {
    if (!client || !account?.bech32Address) {
      toast.error("Wallet not connected")
      return
    }

    try {
      const validatorAddresses = walletData.delegations.map((d) => d.validator_address)

      if (validatorAddresses.length === 0) {
        toast.error("No delegations found")
        return
      }

      // Claim real rewards
      const msgs = validatorAddresses.map((validatorAddress) => ({
        typeUrl: "/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward",
        value: {
          delegatorAddress: account.bech32Address,
          validatorAddress,
        },
      }))

      const fee = {
        amount: [{ denom: "uxion", amount: "5000" }],
        gas: "200000",
      }

      const result = await client.signAndBroadcast(account.bech32Address, msgs, fee)

      if (result.code === 0) {
        toast.success(`Rewards claimed: ${result.transactionHash}`)

        // Sonify reward claim
        const totalRewards = walletData.rewards.reduce((sum, r) => sum + Number.parseFloat(r.amount), 0)
        await sonificationEngine.sonifyRewards(totalRewards)

        // Reload wallet data
        await loadWalletData()
      } else {
        throw new Error(`Claim failed: ${result.rawLog}`)
      }
    } catch (error) {
      console.error("Claim failed:", error)
      toast.error(`Claim failed: ${error.message}`)
    }
  }

  const playReturnFrequency = async () => {
    await sonificationEngine.playReturnFrequency(3000)
    toast.success("Playing 111.11 Hz Return to Sender frequency")
  }

  const playBinauralBeats = async () => {
    await sonificationEngine.playBinauralBeats(432, 8, 10000)
    toast.success("Playing binaural beats for focus")
  }

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    toast.success("Copied to clipboard")
  }

  const formatAmount = (amount: string, denom: string) => {
    const value = Number.parseFloat(amount) / 1000000
    return `${value.toFixed(6)} ${denom.replace("u", "").toUpperCase()}`
  }

  const formatAddress = (address: string) => {
    return `${address.slice(0, 10)}...${address.slice(-6)}`
  }

  if (!isConnected) {
    return (
      
        
          
            
            XION Wallet
          
          Connect to XION testnet using Abstraxion
        
        
          
        
      
    )
  }

  return (
    
      {/* Wallet Header */}
      
        
          
            
              
              XION Wallet Connected
            
            
              
              Live
            
          
          
            {formatAddress(address)}
            
          
        
        
          
            
            
          
        
      

      
        
          Balance
          Staking
          Send
          Network
          History
        

        
          
            
              
                
                Account Balance
              
            
            
              {walletData.balance.length > 0 ? (
                
                  {walletData.balance.map((coin: any, index: number) => (
                    
                      {coin.denom.replace("u", "").toUpperCase()}
                      {formatAmount(coin.amount, coin.denom)}
                    
                  ))}
                
              ) : (
                No balance found
              )}
            
          
        

        
          
            
              
                
                  
                  Staking Rewards
                
                {walletData.rewards.length > 0 && (
                  
                )}
              
            
            
              {walletData.rewards.length > 0 ? (
                
                  {walletData.rewards.map((reward: any, index: number) => (
                    
                      {formatAddress(reward.validator_address)}
                      +{formatAmount(reward.amount, reward.denom)}
                    
                  ))}
                
              ) : (
                No rewards available
              )}
            
          

          
            
              Delegations
            
            
              {walletData.delegations.length > 0 ? (
                
                  {walletData.delegations.map((delegation: any, index: number) => (
                    
                      {formatAddress(delegation.validator_address)}
                      
                        {formatAmount(delegation.balance.amount, delegation.balance.denom)}
                      
                    
                  ))}
                
              ) : (
                No delegations found
              )}
            
          
        

        
          
            
              
                
                Send Tokens
              
            
            
              
                Recipient Address
                 setSendForm((prev) => ({ ...prev, recipient: e.target.value }))}
                />
              

              
                Amount (XION)
                 setSendForm((prev) => ({ ...prev, amount: e.target.value }))}
                />
              

              
            
          
        

        
          
            
              
                
                Network Statistics
              
            
            
              {networkStats ? (
                
                  
                    Block Height
                    {networkStats.latest_block_height}
                  
                  
                    Chain ID
                    {networkStats.node_info?.network}
                  
                  
                    Voting Power
                    {networkStats.validator_info?.voting_power}
                  
                  
                    Peers
                    {networkStats.sync_info?.peers || "N/A"}
                  
                
              ) : (
                Loading network stats...
              )}
            
          

          
            
              Validators
            
            
              {validators.length > 0 ? (
                
                  {validators.slice(0, 10).map((validator: any, index: number) => (
                    
                      {validator.description?.moniker || "Unknown"}
                      
                        {(Number.parseFloat(validator.commission?.commission_rates?.rate) * 100).toFixed(1)}%
                      
                    
                  ))}
                
              ) : (
                Loading validators...
              )}
            
          
        

        
          
            
              
                
                Transaction History
              
            
            
              {walletData.transactions.length > 0 ? (
                
                  {walletData.transactions.map((tx: any, index: number) => (
                    
                      
                        
                          {tx.tx?.body?.messages?.[0]?.["@type"]?.split(".").pop() || "Unknown"}
                        
                        {new Date(tx.timestamp).toLocaleString()}
                      
                      
                        {tx.tx_response?.code === 0 ? "Success" : "Failed"}
                      
                    
                  ))}
                
              ) : (
                No transactions found
              )}
            
          
        
      
    
  )
}

export default XionWallet
[V0_FILE]typescriptreact:file="lib/sounds-of-rangi-core.ts"
/**
 * Sounds of Rangi - Core Algorithms
 * World's First ADA Live Financial Market Harmonic Haptic Phonics and Sonification
 * Based on the advanced architecture from https://github.com/Luckyspot0gold/SoundsofRangi
 */

export interface RangiCoreConfig {
  baseFrequency: number
  harmonicRatio: number
  emotionalModulation: number
  marketVolatility: number
  adaPrice?: number
}

export interface CymaticsPattern {
  nodes: number
  rings: number
  amplitude: number
  phase: number
  interference: number
  emotionalState: string
}

export interface HarmonicEngine {
  primaryFreq: number
  secondaryFreq: number
  tertiaryFreq: number
  resonanceField: number[]
  quantumCoherence: number
}

/**
 * Advanced Rangi Frequency Calculator
 * Implements the patent-pending algorithms from SoundsofRangi
 */
export class RangiFrequencyEngine {
  private static readonly GOLDEN_RATIO = 1.618033988749
  private static readonly SACRED_FREQUENCIES = [111.11, 222.22, 333.33, 432, 528, 741, 852, 963]
  private static readonly ADA_HARMONIC_BASE = 111.11

  static calculateRangiFrequency(config: RangiCoreConfig): number {
    const { baseFrequency, harmonicRatio, emotionalModulation, marketVolatility } = config

    // Apply golden ratio modulation
    const goldenModulation = baseFrequency * (this.GOLDEN_RATIO - 1)

    // Market volatility affects frequency stability
    const volatilityFactor = 1 + marketVolatility * 0.1

    // Emotional state modulation
    const emotionalFactor = 1 + emotionalModulation * 0.2

    // Calculate final frequency with ADA price influence
    let finalFreq = (baseFrequency + goldenModulation) * harmonicRatio * volatilityFactor * emotionalFactor

    // Snap to nearest sacred frequency if close enough
    const nearestSacred = this.findNearestSacredFrequency(finalFreq)
    if (Math.abs(finalFreq - nearestSacred) < 5) {
      finalFreq = nearestSacred
    }

    return Math.max(20, Math.min(2000, finalFreq)) // Human hearing range
  }

  static findNearestSacredFrequency(frequency: number): number {
    return this.SACRED_FREQUENCIES.reduce((prev, curr) =>
      Math.abs(curr - frequency) < Math.abs(prev - frequency) ? curr : prev,
    )
  }

  static generateHarmonicSeries(fundamental: number, count = 7): number[] {
    const harmonics: number[] = []
    for (let i = 1; i <= count; i++) {
      harmonics.push(fundamental * i)
    }
    return harmonics
  }

  static calculateQuantumCoherence(frequencies: number[]): number {
    // Calculate coherence based on frequency relationships
    let coherence = 0
    for (let i = 0; i < frequencies.length - 1; i++) {
      const ratio = frequencies[i + 1] / frequencies[i]
      const goldenDistance = Math.abs(ratio - this.GOLDEN_RATIO)
      coherence += 1 / (1 + goldenDistance)
    }
    return coherence / (frequencies.length - 1)
  }
}

/**
 * Advanced Cymatics Pattern Generator
 * Implements the world-first cymatics algorithms
 */
export class CymaticsPatternEngine {
  static generatePattern(frequency: number, emotionalState: string, energyLevel: number): CymaticsPattern {
    const baseNodes = Math.floor(frequency / 15)
    const baseRings = Math.floor(frequency / 50) + 3

    // Emotional state modulations
    const emotionalModifiers = {
      euphoric: { nodesMult: 1.5, ringsMult: 1.3, amplitudeMult: 1.8, phaseMult: 2.0 },
      excited: { nodesMult: 1.3, ringsMult: 1.2, amplitudeMult: 1.4, phaseMult: 1.5 },
      calm: { nodesMult: 0.8, ringsMult: 0.9, amplitudeMult: 1.0, phaseMult: 0.8 },
      anxious: { nodesMult: 1.2, ringsMult: 0.7, amplitudeMult: 0.8, phaseMult: 3.0 },
      fearful: { nodesMult: 0.6, ringsMult: 0.5, amplitudeMult: 0.5, phaseMult: 0.5 },
      neutral: { nodesMult: 1.0, ringsMult: 1.0, amplitudeMult: 1.0, phaseMult: 1.0 },
    }

    const modifier = emotionalModifiers[emotionalState as keyof typeof emotionalModifiers] || emotionalModifiers.neutral

    return {
      nodes: Math.max(3, Math.floor(baseNodes * modifier.nodesMult)),
      rings: Math.max(2, Math.floor(baseRings * modifier.ringsMult)),
      amplitude: 20 * modifier.amplitudeMult * (0.5 + energyLevel * 0.5),
      phase: Date.now() * 0.001 * modifier.phaseMult,
      interference: this.calculateInterference(frequency, 432),
      emotionalState,
    }
  }

  static calculateInterference(freq1: number, freq2: number): number {
    const beatFrequency = Math.abs(freq1 - freq2)
    return Math.sin(beatFrequency * 0.01) * 0.5 + 0.5
  }

  static generateQuantumField(pattern: CymaticsPattern, width: number, height: number): number[][] {
    const field: number[][] = []
    const centerX = width / 2
    const centerY = height / 2

    for (let x = 0; x < width; x += 4) {
      const row: number[] = []
      for (let y = 0; y < height; y += 4) {
        const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2)
        const angle = Math.atan2(y - centerY, x - centerX)

        // Generate quantum interference pattern
        const wave1 = Math.sin(distance * 0.02 + pattern.phase)
        const wave2 = Math.cos(pattern.nodes * angle + pattern.phase * 0.7)
        const wave3 = Math.sin(distance * 0.01 + angle * pattern.rings + pattern.phase * 1.3)

        const interference = (wave1 + wave2 + wave3) / 3
        const amplitude = pattern.amplitude * (1 - distance / Math.max(width, height))

        row.push(interference * amplitude)
      }
      field.push(row)
    }

    return field
  }
}

/**
 * Advanced Harmonic Engine
 * Implements multi-dimensional harmonic calculations
 */
export class AdvancedHarmonicEngine {
  static generateHarmonicEngine(config: RangiCoreConfig): HarmonicEngine {
    const primaryFreq = RangiFrequencyEngine.calculateRangiFrequency(config)
    const harmonics = RangiFrequencyEngine.generateHarmonicSeries(primaryFreq, 7)

    return {
      primaryFreq,
      secondaryFreq: harmonics[2], // Third harmonic
      tertiaryFreq: harmonics[4], // Fifth harmonic
      resonanceField: harmonics,
      quantumCoherence: RangiFrequencyEngine.calculateQuantumCoherence(harmonics),
    }
  }

  static calculateResonanceMatrix(engine: HarmonicEngine): number[][] {
    const matrix: number[][] = []
    const size = 8

    for (let i = 0; i < size; i++) {
      const row: number[] = []
      for (let j = 0; j < size; j++) {
        const freq1 = engine.resonanceField[i % engine.resonanceField.length]
        const freq2 = engine.resonanceField[j % engine.resonanceField.length]
        const resonance = Math.sin((freq1 / freq2) * Math.PI) * engine.quantumCoherence
        row.push(resonance)
      }
      matrix.push(row)
    }

    return matrix
  }

  static generateBinauralBeats(leftFreq: number, rightFreq: number): number {
    return Math.abs(leftFreq - rightFreq)
  }
}

/**
 * Market Sonification Engine
 * Converts market data to harmonic frequencies
 */
export class MarketSonificationEngine {
  static sonifyMarketData(marketData: {
    price: number
    volume: number
    change24h: number
    marketCap: number
  }): RangiCoreConfig {
    const { price, volume, change24h, marketCap } = marketData

    // Base frequency from price (logarithmic scaling)
    const baseFrequency = 111.11 + Math.log10(price) * 50

    // Harmonic ratio from volume
    const harmonicRatio = 1 + Math.log10(volume) * 0.1

    // Emotional modulation from price change
    const emotionalModulation = Math.tanh(change24h / 10) // Sigmoid function

    // Market volatility from price change magnitude
    const marketVolatility = Math.abs(change24h) / 100

    return {
      baseFrequency,
      harmonicRatio,
      emotionalModulation,
      marketVolatility,
      adaPrice: price,
    }
  }

  static calculateEmotionalState(change24h: number, volume: number): string {
    const volatility = Math.abs(change24h)
    const volumeNormalized = Math.log10(volume) / 10

    if (change24h > 10 && volumeNormalized > 0.8) return "euphoric"
    if (change24h > 5 && volumeNormalized > 0.6) return "excited"
    if (change24h < -10 && volumeNormalized > 0.7) return "fearful"
    if (volatility > 5 && volumeNormalized > 0.5) return "anxious"
    if (Math.abs(change24h) < 2 && volumeNormalized < 0.4) return "calm"

    return "neutral"
  }
}

/**
 * Reality Capsule NFT Integration
 * Connects harmonic data to blockchain
 */
export class RealityCapsuleEngine {
  static generateCapsuleMetadata(harmonicEngine: HarmonicEngine, timestamp: number) {
    return {
      name: `Rangi's Heartbeat Capsule #${timestamp}`,
      description: "A unique harmonic frequency snapshot of market consciousness",
      attributes: [
        { trait_type: "Primary Frequency", value: harmonicEngine.primaryFreq.toFixed(2) },
        { trait_type: "Quantum Coherence", value: (harmonicEngine.quantumCoherence * 100).toFixed(1) },
        { trait_type: "Harmonic Series", value: harmonicEngine.resonanceField.length },
        { trait_type: "Resonance Level", value: this.calculateResonanceLevel(harmonicEngine) },
        { trait_type: "Sacred Alignment", value: this.calculateSacredAlignment(harmonicEngine.primaryFreq) },
      ],
      harmonicData: {
        frequencies: harmonicEngine.resonanceField,
        coherence: harmonicEngine.quantumCoherence,
        timestamp,
      },
    }
  }

  private static calculateResonanceLevel(engine: HarmonicEngine): string {
    const level = engine.quantumCoherence
    if (level > 0.8) return "Transcendent"
    if (level > 0.6) return "Harmonic"
    if (level > 0.4) return "Resonant"
    if (level > 0.2) return "Emerging"
    return "Foundational"
  }

  private static calculateSacredAlignment(frequency: number): string {
    const sacredFreqs = [111.11, 222.22, 333.33, 432, 528, 741, 852, 963]
    const nearest = sacredFreqs.reduce((prev, curr) =>
      Math.abs(curr - frequency) < Math.abs(prev - frequency) ? curr : prev,
    )
    const alignment = 1 - Math.abs(frequency - nearest) / nearest

    if (alignment > 0.95) return "Perfect"
    if (alignment > 0.85) return "Strong"
    if (alignment > 0.7) return "Moderate"
    return "Weak"
  }
}
[V0_FILE]typescriptreact:file="components/enhanced-frequency-generator.tsx"
"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Slider } from "@/components/ui/slider"
import { Badge } from "@/components/ui/badge"
import { Play, Pause, Volume2, VolumeX, Zap, Waves } from "lucide-react"
import {
  AdvancedHarmonicEngine,
  MarketSonificationEngine,
  type RangiCoreConfig,
  type HarmonicEngine,
} from "@/lib/sounds-of-rangi-core"

interface EnhancedFrequencyGeneratorProps {
  btcPrice: number
  isConnected: boolean
  heartbeatMetrics: any
  onPlayStateChange: (isPlaying: boolean) => void
  marketData?: {
    price: number
    volume: number
    change24h: number
    marketCap: number
  }
}

export function EnhancedFrequencyGenerator({
  btcPrice,
  isConnected,
  heartbeatMetrics,
  onPlayStateChange,
  marketData,
}: EnhancedFrequencyGeneratorProps) {
  const [isPlaying, setIsPlaying] = useState(false)
  const [volume, setVolume] = useState([0.3])
  const [isMuted, setIsMuted] = useState(false)
  const [harmonicEngine, setHarmonicEngine] = useState(null)
  const [quantumCoherence, setQuantumCoherence] = useState(0)

  // Audio context and oscillators
  const audioContextRef = useRef(null)
  const oscillatorsRef = useRef([])
  const gainNodesRef = useRef([])
  const masterGainRef = useRef(null)

  // Calculate advanced harmonic configuration
  const calculateHarmonicConfig = useCallback((): RangiCoreConfig => {
    if (marketData) {
      return MarketSonificationEngine.sonifyMarketData(marketData)
    }

    // Fallback to heartbeat-based calculation
    return {
      baseFrequency: heartbeatMetrics?.baseFrequency || 111.11,
      harmonicRatio: 1.618, // Golden ratio
      emotionalModulation: heartbeatMetrics?.energyLevel || 0.5,
      marketVolatility: Math.abs(marketData?.change24h || 0) / 100,
      adaPrice: btcPrice,
    }
  }, [marketData, heartbeatMetrics, btcPrice])

  // Initialize advanced audio system
  const initializeAdvancedAudio = useCallback(() => {
    if (audioContextRef.current) return

    try {
      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()

      // Create master gain
      masterGainRef.current = audioContextRef.current.createGain()
      masterGainRef.current.connect(audioContextRef.current.destination)
      masterGainRef.current.gain.setValueAtTime(volume[0], audioContextRef.current.currentTime)

      // Generate harmonic engine
      const config = calculateHarmonicConfig()
      const engine = AdvancedHarmonicEngine.generateHarmonicEngine(config)
      setHarmonicEngine(engine)
      setQuantumCoherence(engine.quantumCoherence)

      // Create oscillators for harmonic series
      oscillatorsRef.current = []
      gainNodesRef.current = []

      engine.resonanceField.slice(0, 5).forEach((frequency, index) => {
        const oscillator = audioContextRef.current!.createOscillator()
        const gainNode = audioContextRef.current!.createGain()

        oscillator.type = index === 0 ? "sine" : index === 1 ? "triangle" : "sawtooth"
        oscillator.frequency.setValueAtTime(frequency, audioContextRef.current!.currentTime)

        // Set gain based on harmonic position (fundamental is loudest)
        const harmonicGain = index === 0 ? 0.6 : 0.3 / (index + 1)
        gainNode.gain.setValueAtTime(harmonicGain, audioContextRef.current!.currentTime)

        oscillator.connect(gainNode)
        gainNode.connect(masterGainRef.current!)

        oscillatorsRef.current.push(oscillator)
        gainNodesRef.current.push(gainNode)
      })

      console.log("[v0] Advanced harmonic audio system initialized with", engine.resonanceField.length, "frequencies")
    } catch (error) {
      console.error("[v0] Failed to initialize advanced audio:", error)
    }
  }, [volume, calculateHarmonicConfig])

  // Start advanced audio playback
  const startAdvancedAudio = useCallback(() => {
    if (!audioContextRef.current || oscillatorsRef.current.length === 0) {
      initializeAdvancedAudio()
      return
    }

    try {
      if (audioContextRef.current.state === "suspended") {
        audioContextRef.current.resume()
      }

      oscillatorsRef.current.forEach((oscillator) => {
        oscillator.start()
      })

      setIsPlaying(true)
      console.log("[v0] Advanced harmonic playback started with quantum coherence:", quantumCoherence)
    } catch (error) {
      console.error("[v0] Failed to start advanced audio:", error)
      initializeAdvancedAudio()
    }
  }, [initializeAdvancedAudio, quantumCoherence])

  // Stop audio playback
  const stopAdvancedAudio = useCallback(() => {
    try {
      oscillatorsRef.current.forEach((oscillator) => {
        oscillator.stop()
        oscillator.disconnect()
      })

      gainNodesRef.current.forEach((gainNode) => {
        gainNode.disconnect()
      })

      oscillatorsRef.current = []
      gainNodesRef.current = []
      setIsPlaying(false)

      console.log("[v0] Advanced audio playback stopped")
    } catch (error) {
      console.error("[v0] Failed to stop advanced audio:", error)
    }
  }, [])

  // Toggle playback
  const togglePlayback = () => {
    const newPlayState = !isPlaying
    if (newPlayState) {
      initializeAdvancedAudio()
      setTimeout(startAdvancedAudio, 100)
    } else {
      stopAdvancedAudio()
    }
    onPlayStateChange(newPlayState)
  }

  // Update volume
  useEffect(() => {
    if (masterGainRef.current && audioContextRef.current) {
      const gainValue = isMuted ? 0 : Math.max(0.1, volume[0])
      masterGainRef.current.gain.setValueAtTime(gainValue, audioContextRef.current.currentTime)
    }
  }, [volume, isMuted])

  // Update frequencies based on market changes
  useEffect(() => {
    if (isPlaying && audioContextRef.current && oscillatorsRef.current.length > 0) {
      const config = calculateHarmonicConfig()
      const newEngine = AdvancedHarmonicEngine.generateHarmonicEngine(config)

      // Update oscillator frequencies smoothly
      newEngine.resonanceField.slice(0, oscillatorsRef.current.length).forEach((frequency, index) => {
        if (oscillatorsRef.current[index]) {
          oscillatorsRef.current[index].frequency.setValueAtTime(frequency, audioContextRef.current!.currentTime)
        }
      })

      setHarmonicEngine(newEngine)
      setQuantumCoherence(newEngine.quantumCoherence)
    }
  }, [marketData, heartbeatMetrics, isPlaying, calculateHarmonicConfig])

  // Cleanup
  useEffect(() => {
    return () => {
      stopAdvancedAudio()
      if (audioContextRef.current) {
        audioContextRef.current.close()
      }
    }
  }, [stopAdvancedAudio])

  const emotionalState = marketData
    ? MarketSonificationEngine.calculateEmotionalState(marketData.change24h, marketData.volume)
    : heartbeatMetrics?.emotionalState || "neutral"

  return (
    
      
        
          
            
            Advanced Harmonic Engine
          
          
            {isConnected ? "LIVE" : "OFFLINE"}
            {quantumCoherence > 0.7 && (
              
                
                COHERENT
              
            )}
          
        
      
      
        {/* Advanced Frequency Display */}
        
          
            Primary
            {harmonicEngine?.primaryFreq.toFixed(2) || "111.11"}Hz
            {emotionalState}
          
          
            Secondary
            
              {harmonicEngine?.secondaryFreq.toFixed(2) || "333.33"}Hz
            
            3rd Harmonic
          
          
            Tertiary
            
              {harmonicEngine?.tertiaryFreq.toFixed(2) || "555.55"}Hz
            
            5th Harmonic
          
        

        {/* Quantum Coherence Display */}
        
          
            Quantum Coherence
            {(quantumCoherence * 100).toFixed(1)}%
          
          
            
          
          Harmonic alignment with sacred frequencies
        

        {/* Controls */}
        
          

          
            
            
              
            
          
        

        {/* Status */}
        
          {isPlaying ? (
            
              {harmonicEngine?.resonanceField.length || 0} harmonics resonating • Coherence:{" "}
              {(quantumCoherence * 100).toFixed(0)}% • State: {emotionalState}
            
          ) : (
            "Click play to start advanced harmonic frequency generation"
          )}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/enhanced-cymatics-visualization.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Eye, EyeOff, Atom, Zap } from "lucide-react"
import { CymaticsPatternEngine, MarketSonificationEngine, type CymaticsPattern } from "@/lib/sounds-of-rangi-core"

interface EnhancedCymaticsVisualizationProps {
  rangiFrequency: number
  harmonicFrequency: number
  isPlaying: boolean
  btcPrice: number
  heartbeatMetrics: any
  marketData?: {
    price: number
    volume: number
    change24h: number
    marketCap: number
  }
}

export function EnhancedCymaticsVisualization({
  rangiFrequency,
  harmonicFrequency,
  isPlaying,
  btcPrice,
  heartbeatMetrics,
  marketData,
}: EnhancedCymaticsVisualizationProps) {
  const canvasRef = useRef(null)
  const animationRef = useRef()
  const [isVisible, setIsVisible] = useState(true)
  const [currentPattern, setCurrentPattern] = useState(null)
  const [quantumField, setQuantumField] = useState([])
  const maxRadius = 100 // Declare maxRadius variable

  const emotionalState = marketData
    ? MarketSonificationEngine.calculateEmotionalState(marketData.change24h, marketData.volume)
    : heartbeatMetrics?.emotionalState || "neutral"

  const energyLevel = heartbeatMetrics?.energyLevel || 0.5

  // Generate advanced cymatics pattern
  const generateAdvancedPattern = (frequency: number): CymaticsPattern => {
    return CymaticsPatternEngine.generatePattern(frequency, emotionalState, energyLevel)
  }

  // Draw quantum field visualization
  const drawQuantumField = (
    ctx: CanvasRenderingContext2D,
    width: number,
    height: number,
    field: number[][],
    pattern: CymaticsPattern,
  ) => {
    const cellSize = 4

    for (let x = 0; x < field.length; x++) {
      for (let y = 0; y < field[x].length; y++) {
        const intensity = Math.abs(field[x][y])
        const hue = 180 + field[x][y] * 60 // Cyan to blue spectrum
        const saturation = 70 + intensity * 30
        const lightness = 30 + intensity * 40

        ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${intensity * 0.8})`
        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize)
      }
    }
  }

  // Draw advanced cymatics pattern with quantum effects
  const drawAdvancedCymaticsPattern = (
    ctx: CanvasRenderingContext2D,
    width: number,
    height: number,
    pattern: CymaticsPattern,
  ) => {
    const centerX = width / 2
    const centerY = height / 2
    const maxRadius = Math.min(width, height) / 3

    // Set line properties based on emotional state
    const lineWidth = pattern.emotionalState === "euphoric" ? 3 : pattern.emotionalState === "fearful" ? 1 : 2

    ctx.lineWidth = lineWidth
    ctx.globalCompositeOperation = "screen" // Additive blending for quantum effects

    // Draw multiple interference patterns
    for (let ring = 1; ring <= pattern.rings; ring++) {
      const radius = (maxRadius * ring) / pattern.rings
      const ringIntensity = 1 - (ring / pattern.rings) * 0.7

      // Primary pattern
      ctx.strokeStyle = `hsla(180, 70%, ${50 + ringIntensity * 30}%, ${ringIntensity})`
      ctx.beginPath()

      for (let angle = 0; angle < Math.PI * 2; angle += 0.005) {
        // Advanced wave calculation with quantum interference
        const baseWave = Math.sin(pattern.nodes * angle + pattern.phase)
        const harmonicWave = Math.cos(ring * 0.5 + pattern.phase * 0.3)
        const quantumInterference = Math.sin(angle * pattern.nodes * 2 + pattern.phase * 2) * pattern.interference

        let waveAmplitude = (baseWave * harmonicWave + quantumInterference) * pattern.amplitude * ringIntensity

        // Emotional state modulation
        switch (pattern.emotionalState) {
          case "euphoric":
            waveAmplitude *= 1.5 + Math.sin(pattern.phase * 3) * 0.5
            break
          case "fearful":
            waveAmplitude *= 0.5 + Math.random() * 0.3
            break
          case "anxious":
            waveAmplitude *= 0.8 + Math.sin(pattern.phase * 7) * 0.6
            break
          case "excited":
            waveAmplitude *= 1.3 + Math.sin(pattern.phase * 4) * 0.4
            break
        }

        const x = centerX + (radius + waveAmplitude) * Math.cos(angle)
        const y = centerY + (radius + waveAmplitude) * Math.sin(angle)

        if (angle === 0) {
          ctx.moveTo(x, y)
        } else {
          ctx.lineTo(x, y)
        }
      }

      ctx.closePath()
      ctx.stroke()

      // Add quantum resonance rings
      if (ring % 2 === 0) {
        ctx.strokeStyle = `hsla(200, 60%, ${40 + ringIntensity * 20}%, ${ringIntensity * 0.5})`
        ctx.beginPath()
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2)
        ctx.stroke()
      }
    }

    // Add quantum particle effects for high energy states
    if (energyLevel > 0.7) {
      ctx.fillStyle = `hsla(180, 80%, 70%, 0.6)`
      for (let i = 0; i < pattern.nodes * 2; i++) {
        const angle = (i / (pattern.nodes * 2)) * Math.PI * 2
        const particleRadius = maxRadius * 0.8 + Math.sin(pattern.phase * 2 + i) * 20
        const x = centerX + particleRadius * Math.cos(angle + pattern.phase * 0.5)
        const y = centerY + particleRadius * Math.sin(angle + pattern.phase * 0.5)

        ctx.beginPath()
        ctx.arc(x, y, 2, 0, Math.PI * 2)
        ctx.fill()
      }
    }

    ctx.globalCompositeOperation = "source-over" // Reset blending mode
  }

  // Animation loop
  useEffect(() => {
    if (!isVisible || !canvasRef.current) return

    const canvas = canvasRef.current
    const ctx = canvas.getContext("2d")
    if (!ctx) return

    const animate = () => {
      const width = canvas.width
      const height = canvas.height

      // Clear with quantum field background
      ctx.fillStyle = "rgba(5, 5, 15, 0.1)"
      ctx.fillRect(0, 0, width, height)

      if (isPlaying) {
        // Generate current pattern
        const pattern = generateAdvancedPattern(rangiFrequency)
        setCurrentPattern(pattern)

        // Generate quantum field
        const field = CymaticsPatternEngine.generateQuantumField(pattern, Math.floor(width / 4), Math.floor(height / 4))
        setQuantumField(field)

        // Draw quantum field background
        drawQuantumField(ctx, width, height, field, pattern)

        // Draw primary cymatics pattern
        drawAdvancedCymaticsPattern(ctx, width, height, pattern)

        // Draw harmonic interference pattern
        const harmonicPattern = generateAdvancedPattern(harmonicFrequency)
        ctx.save()
        ctx.globalAlpha = 0.6
        ctx.translate(width * 0.1, height * 0.1)
        ctx.scale(0.8, 0.8)
        drawAdvancedCymaticsPattern(ctx, width, height, harmonicPattern)
        ctx.restore()

        // Add market volatility visualization
        if (marketData && Math.abs(marketData.change24h) > 5) {
          const volatilityIntensity = Math.min(Math.abs(marketData.change24h) / 20, 1)
          ctx.strokeStyle =
            marketData.change24h > 0
              ? `hsla(120, 70%, 50%, ${volatilityIntensity})`
              : `hsla(0, 70%, 50%, ${volatilityIntensity})`
          ctx.lineWidth = volatilityIntensity * 4
          ctx.beginPath()
          ctx.arc(width / 2, height / 2, maxRadius * 1.2, 0, Math.PI * 2)
          ctx.stroke()
        }
      }

      animationRef.current = requestAnimationFrame(animate)
    }

    animate()

    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
    }
  }, [isVisible, isPlaying, rangiFrequency, harmonicFrequency, emotionalState, energyLevel, marketData])

  // Set canvas size
  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current
      const rect = canvas.getBoundingClientRect()
      canvas.width = rect.width * window.devicePixelRatio
      canvas.height = rect.height * window.devicePixelRatio

      const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio)
      }
    }
  }, [])

  return (
    
      
        
          
            
            Quantum Cymatics Field
          
          
            {isPlaying ? "ACTIVE" : "PAUSED"}
            {currentPattern && (
              
                {currentPattern.emotionalState}
              
            )}
            {energyLevel > 0.8 && (
              
                
                HIGH ENERGY
              
            )}
            
          
        
      
      
        
          

        {/* Enhanced Pattern Info */}
        
          
            Nodes
            {currentPattern?.nodes || 0}
          
          
            Rings
            {currentPattern?.rings || 0}
          
          
            Interference
            
              {currentPattern ? (currentPattern.interference * 100).toFixed(0) : 0}%
            
          
        

        {isPlaying && currentPattern && (
          
            Quantum Field: {quantumField.length}×{quantumField[0]?.length || 0} • Energy:{" "}
            {(energyLevel * 100).toFixed(0)}% • Pattern: {currentPattern.emotionalState} • Amplitude:{" "}
            {currentPattern.amplitude.toFixed(1)}
          
        )}
      
    
  )
}