Add animation keyframes for grid and shimmer effects, implement mouse position tracking for dynamic background, and create direct download API for video/audio files. Update types for download requests and responses.

app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -19,6 +19,18 @@ export default function Home() {
   const [formatType, setFormatType] = useState<'video' | 'audio'>('video');
   const [downloadResult, setDownloadResult] = useState<DownloadResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const x = (e.clientX / window.innerWidth) * 2 - 1;
+      const y = (e.clientY / window.innerHeight) * 2 - 1;
+      setMousePos({ x, y });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
 
   const handleGetInfo = async () => {
     if (!url.trim()) {
@@ -110,6 +122,16 @@ export default function Home() {
     <div className="min-h-screen relative">
       {/* Animated background */}
       <div className="animated-bg" />
+      
+      <div 
+        className="fixed inset-0 z-[-2] pointer-events-none transition-transform duration-1000 cubic-bezier(0.1, 0.8, 0.2, 1)"
+        style={{
+          transform: `perspective(100vh) rotateX(${mousePos.y * -3}deg) rotateY(${mousePos.x * 3}deg) translateX(${mousePos.x * -10}px) translateY(${mousePos.y * -10}px)`
+        }}
+      >
+        <div className="background-grid" />
+      </div>
+
       <div className="floating-orb floating-orb-1" />
       <div className="floating-orb floating-orb-2" />
       <div className="floating-orb floating-orb-3" />
@@ -121,7 +143,7 @@ export default function Home() {
             <Sparkles className="w-4 h-4" />
             Fast & Free Downloads
           </div>
-          <h1 className="text-4xl md:text-6xl font-bold mb-4 gradient-text tracking-tight">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 gradient-text tracking-tight" data-text="Downlink">
             Downlink
           </h1>
           <p className="text-muted-foreground text-base md:text-lg max-w-md mx-auto">