AnimatedBackground

ekilie · Nov 26, 2024 · 68ca39a · 68ca39a
1 parent f7eadfe
commit 68ca39a
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 39 deletions.
diff --git a/website/components/AnimatedBackground.tsx b/website/components/AnimatedBackground.tsx
@@ -0,0 +1,38 @@
+import { motion, useAnimation, useInView } from 'motion/react'
+
+export const AnimatedBackground = () => {
+    return (
+      <div className="absolute inset-0 overflow-hidden opacity-20 dark:opacity-30">
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <filter id="goo">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
+            </filter>
+          </defs>
+          <g filter="url(#goo)">
+            {[...Array(20)].map((_, i) => (
+              <motion.circle
+                key={i}
+                cx={Math.random() * 100 + '%'}
+                cy={Math.random() * 100 + '%'}
+                r={Math.random() * 50 + 10}
+                fill={`hsl(${Math.random() * 360}, 70%, 50%)`}
+                initial={{ scale: 0 }}
+                animate={{
+                  scale: [1, 1.2, 1],
+                  x: [0, Math.random() * 100 - 50, 0],
+                  y: [0, Math.random() * 100 - 50, 0],
+                }}
+                transition={{
+                  duration: Math.random() * 5 + 5,
+                  repeat: Infinity,
+                  ease: 'easeInOut',
+                }}
+              />
+            ))}
+          </g>
+        </svg>
+      </div>
+    )
+}
diff --git a/website/components/Feature.tsx b/website/components/Feature.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { ForwardRefExoticComponent, RefAttributes } from "react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { LucideProps } from "lucide-react";
 
 interface VintLangFeature {

diff --git a/website/components/header.tsx b/website/components/header.tsx
@@ -15,8 +15,8 @@ export default function Header() {
   if (!mounted) return null
 
   return (
-    <header className="sticky max-w-screen-xl mx-auto top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container flex h-14 items-center px-4 sm:px-6 lg:px-8">
+    <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container max-w-screen-xl mx-auto flex h-14 items-center px-4 sm:px-6 lg:px-8">
         <div className="mr-4 hidden md:flex">
           <Link className="mr-6 flex items-center space-x-2" href="/">
             <span className="hidden font-bold sm:inline-block">VintLang</span>

diff --git a/website/components/hero.tsx b/website/components/hero.tsx
@@ -4,43 +4,9 @@ import { useEffect, useRef } from 'react'
 import { motion, useAnimation, useInView } from 'motion/react'
 import { Button } from '@/components/ui/button'
 import { ArrowRight, Code2 } from 'lucide-react'
+import { AnimatedBackground } from './AnimatedBackground'
+
 
-export const AnimatedBackground = () => {
-  return (
-    <div className="absolute inset-0 overflow-hidden opacity-20 dark:opacity-30">
-      <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <filter id="goo">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
-            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
-          </filter>
-        </defs>
-        <g filter="url(#goo)">
-          {[...Array(20)].map((_, i) => (
-            <motion.circle
-              key={i}
-              cx={Math.random() * 100 + '%'}
-              cy={Math.random() * 100 + '%'}
-              r={Math.random() * 50 + 10}
-              fill={`hsl(${Math.random() * 360}, 70%, 50%)`}
-              initial={{ scale: 0 }}
-              animate={{
-                scale: [1, 1.2, 1],
-                x: [0, Math.random() * 100 - 50, 0],
-                y: [0, Math.random() * 100 - 50, 0],
-              }}
-              transition={{
-                duration: Math.random() * 5 + 5,
-                repeat: Infinity,
-                ease: 'easeInOut',
-              }}
-            />
-          ))}
-        </g>
-      </svg>
-    </div>
-  )
-}
 
 export default function Hero() {
   const controls = useAnimation()