Merge pull request #106 from ssdeanx/develop

feat: enhance public page animations and improve component structure

Author: ssdeanx

.github/skills/browser/package-lock.json

@@ -1,5 +1,5 @@
 {
-    "dependencies": {
-        "ws": "^8.18.3"
-    }
-}
+  "dependencies": {
+    "ws": "^8.19.0"
+  }
+}

.github/skills/browser/package.json

@@ -1,4 +1,4 @@
-<!-- AGENTS-META {"title":"Next.js App Directory","version":"1.0.0","applies_to":"app/","last_updated":"2025-11-27T00:00:00Z","status":"stable"} -->
+<!-- AGENTS-META {"title":"Next.js App Directory","version":"1.0.1","applies_to":"app/","last_updated":"2026-02-15T00:00:00Z","status":"stable"} -->
 
 # Next.js App Directory
 
@@ -56,6 +56,15 @@ From `components.json`:
 - `src/mastra/`: Backend agents and tools
 - `next.config.ts`: Next.js configuration
 
+## Recent Updates
+
+- 2026-02-15: Added reusable GSAP-powered custom SVG brand animation component at `app/components/gsap/animated-orbital-logo.tsx`.
+- 2026-02-15: Integrated animated SVG branding into shared public UI components:
+    - `app/components/navbar.tsx`
+    - `app/components/landing-hero.tsx`
+    - `app/components/footer.tsx`
+- Accessibility/perf: each animation path respects `prefers-reduced-motion` behavior.
+
 ---
 
-Last updated: 2025-11-27
+Last updated: 2026-02-15

app/AGENTS.md

@@ -1,9 +1,14 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
+import { useRef } from 'react'
 import Link from 'next/link'
+import { useGSAP } from '@gsap/react'
+import { gsap } from 'gsap'
 import { Button } from '@/ui/button'
 import { Input } from '@/ui/input'
+import { ensureGsapRegistered } from '@/app/components/gsap/registry'
+import { AnimatedOrbitalLogo } from '@/app/components/gsap/animated-orbital-logo'
 import { ArrowRightIcon, CheckIcon, LoaderIcon } from 'lucide-react'
 
 const FOOTER_LINKS = {
@@ -64,6 +69,7 @@ const SOCIAL_LINKS = [
 ]
 
 export function Footer() {
+    const footerRef = useRef<HTMLElement>(null)
     const [email, setEmail] = useState('')
     const [status, setStatus] = useState<
         'idle' | 'loading' | 'success' | 'error'
@@ -83,16 +89,52 @@ export function Footer() {
         setTimeout(() => setStatus('idle'), 3000)
     }
 
-    const [year, setYear] = useState<number | null>(null)
+    const year = new Date().getFullYear()
 
-    useEffect(() => {
-        setYear(new Date().getFullYear())
-    }, [])
+    useGSAP(
+        () => {
+            ensureGsapRegistered()
+
+            const targets = gsap.utils.toArray<HTMLElement>(
+                '[data-footer-reveal]'
+            )
+
+            if (targets.length === 0) {
+                return
+            }
+
+            const prefersReducedMotion = window.matchMedia(
+                '(prefers-reduced-motion: reduce)'
+            ).matches
+
+            if (prefersReducedMotion) {
+                gsap.set(targets, { autoAlpha: 1, y: 0 })
+                return
+            }
+
+            gsap.set(targets, { autoAlpha: 0, y: 18 })
+            targets.forEach((target, index) => {
+                gsap.to(target, {
+                    autoAlpha: 1,
+                    y: 0,
+                    duration: 0.45,
+                    ease: 'power2.out',
+                    delay: index * 0.04,
+                    scrollTrigger: {
+                        trigger: target,
+                        start: 'top 92%',
+                        once: true,
+                    },
+                })
+            })
+        },
+        { scope: footerRef }
+    )
 
     return (
-        <footer className="border-t border-border bg-background">
+        <footer ref={footerRef} className="border-t border-border bg-background">
             {/* Newsletter section */}
-            <div className="border-b border-border">
+            <div className="border-b border-border" data-footer-reveal>
                 <div className="container mx-auto px-4 py-12">
                     <div className="mx-auto max-w-2xl text-center">
                         <h3 className="mb-2 text-2xl font-bold text-foreground">
@@ -103,7 +145,9 @@ export function Footer() {
                             practices, and AI agent development tips.
                         </p>
                         <form
-                            onSubmit={handleSubscribe}
+                            onSubmit={(event) => {
+                                void handleSubscribe(event)
+                            }}
                             className="flex flex-col gap-3 sm:flex-row sm:gap-2"
                         >
                             <div className="relative flex-1">
@@ -122,7 +166,7 @@ export function Footer() {
                             <Button
                                 type="submit"
                                 size="lg"
-                                className="h-12 min-w-[140px] transition-all duration-200 ease-spring hover:-translate-y-px"
+                                className="h-12 min-w-35 transition-all duration-200 ease-spring hover:-translate-y-px"
                                 disabled={
                                     status === 'loading' || status === 'success'
                                 }
@@ -154,18 +198,19 @@ export function Footer() {
             </div>
 
             {/* Main footer content */}
-            <div className="container mx-auto px-4 py-12 lg:py-16">
+            <div className="container mx-auto px-4 py-12 lg:py-16" data-footer-reveal>
                 <div className="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
                     {/* Brand column */}
                     <div className="col-span-2 md:col-span-3 lg:col-span-2">
                         <Link
                             href="/"
                             className="group flex items-center gap-2 transition-opacity duration-200 hover:opacity-80"
                         >
-                            <div className="flex size-10 items-center justify-center rounded-lg bg-linear-to-br from-primary to-primary/80 shadow-lg transition-all duration-200 ease-spring group-hover:scale-105 group-hover:shadow-xl">
-                                <span className="font-bold text-primary-foreground text-lg">
-                                    A
-                                </span>
+                            <div className="flex size-10 items-center justify-center rounded-lg bg-linear-to-br from-primary/15 to-primary/5 shadow-lg transition-all duration-200 ease-spring group-hover:scale-105 group-hover:shadow-xl">
+                                <AnimatedOrbitalLogo
+                                    size={26}
+                                    className="text-primary"
+                                />
                             </div>
                             <span className="text-xl font-bold text-foreground">
                                 AgentStack
@@ -271,10 +316,10 @@ export function Footer() {
             </div>
 
             {/* Bottom bar */}
-            <div className="border-t border-border">
+            <div className="border-t border-border" data-footer-reveal>
                 <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 py-6 md:flex-row">
                     <div className="flex flex-col items-center gap-2 text-sm text-muted-foreground md:flex-row md:gap-4">
-                        <p>© {year ?? ''} AgentStack. All rights reserved.</p>
+                        <p>© {year} AgentStack. All rights reserved.</p>
                         <span className="hidden md:inline">•</span>
                         <p>Built with ❤️ for developers</p>
                     </div>

app/components/footer.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { useRef } from 'react'
+import { useGSAP } from '@gsap/react'
+import { gsap } from 'gsap'
+import { ensureGsapRegistered } from '@/app/components/gsap/registry'
+import { cn } from '@/lib/utils'
+
+interface AnimatedOrbitalLogoProps {
+    className?: string
+    size?: number
+    pulseNodes?: boolean
+    rotate?: boolean
+}
+
+export function AnimatedOrbitalLogo({
+    className,
+    size = 48,
+    pulseNodes = true,
+    rotate = true,
+}: AnimatedOrbitalLogoProps) {
+    const svgRef = useRef<SVGSVGElement>(null)
+
+    useGSAP(
+        () => {
+            ensureGsapRegistered()
+
+            if (!svgRef.current) {
+                return
+            }
+
+            const prefersReducedMotion = window.matchMedia(
+                '(prefers-reduced-motion: reduce)'
+            ).matches
+
+            if (prefersReducedMotion) {
+                gsap.set('[data-orbit-group]', { rotation: 0 })
+                gsap.set('[data-node]', { scale: 1, opacity: 1 })
+                gsap.set('[data-core]', { scale: 1, opacity: 1 })
+                return
+            }
+
+            gsap.fromTo(
+                '[data-core]',
+                { scale: 0.85, autoAlpha: 0.75 },
+                {
+                    scale: 1,
+                    autoAlpha: 1,
+                    duration: 0.6,
+                    ease: 'power2.out',
+                }
+            )
+
+            if (rotate) {
+                gsap.to('[data-orbit-a]', {
+                    rotation: 360,
+                    transformOrigin: '50% 50%',
+                    duration: 10,
+                    ease: 'none',
+                    repeat: -1,
+                })
+
+                gsap.to('[data-orbit-b]', {
+                    rotation: -360,
+                    transformOrigin: '50% 50%',
+                    duration: 14,
+                    ease: 'none',
+                    repeat: -1,
+                })
+            }
+
+            if (pulseNodes) {
+                gsap.to('[data-node]', {
+                    scale: 1.12,
+                    autoAlpha: 0.75,
+                    duration: 1.2,
+                    ease: 'sine.inOut',
+                    repeat: -1,
+                    yoyo: true,
+                    stagger: {
+                        each: 0.15,
+                        repeat: -1,
+                        yoyo: true,
+                    },
+                })
+            }
+        },
+        { scope: svgRef }
+    )
+
+    return (
+        <svg
+            ref={svgRef}
+            className={cn('text-primary', className)}
+            width={size}
+            height={size}
+            viewBox="0 0 100 100"
+            fill="none"
+            role="img"
+            aria-label="AgentStack animated orbital logo"
+        >
+            <g data-orbit-group data-orbit-a>
+                <circle
+                    cx="50"
+                    cy="50"
+                    r="34"
+                    stroke="currentColor"
+                    strokeOpacity="0.28"
+                    strokeWidth="2"
+                />
+                <circle data-node cx="84" cy="50" r="4" fill="currentColor" />
+                <circle
+                    data-node
+                    cx="50"
+                    cy="16"
+                    r="3"
+                    fill="currentColor"
+                    fillOpacity="0.9"
+                />
+            </g>
+
+            <g data-orbit-group data-orbit-b>
+                <ellipse
+                    cx="50"
+                    cy="50"
+                    rx="25"
+                    ry="15"
+                    stroke="currentColor"
+                    strokeOpacity="0.2"
+                    strokeWidth="2"
+                    transform="rotate(35 50 50)"
+                />
+                <circle
+                    data-node
+                    cx="72"
+                    cy="35"
+                    r="3"
+                    fill="currentColor"
+                    fillOpacity="0.85"
+                />
+            </g>
+
+            <circle
+                data-core
+                cx="50"
+                cy="50"
+                r="12"
+                fill="currentColor"
+                fillOpacity="0.18"
+            />
+            <circle cx="50" cy="50" r="7" fill="currentColor" />
+        </svg>
+    )
+}

app/components/gsap/animated-orbital-logo.tsx

@@ -0,0 +1,14 @@
+import { useGSAP } from '@gsap/react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+
+let hasRegisteredGsap = false
+
+export function ensureGsapRegistered() {
+    if (hasRegisteredGsap || typeof window === 'undefined') {
+        return
+    }
+
+    gsap.registerPlugin(useGSAP, ScrollTrigger)
+    hasRegisteredGsap = true
+}