Footer

Installation

Usage

import Footer from '@/components/odysseyui/footer';

export default function Page() {
  return (
    <Footer
      theme="dia-browser"
      copyrightText={`copyright © ${new Date().getFullYear()} — Odyssey UI`}
    />
  );
}

Available theme presets: dia-browser, ocean, amber, emerald, violet, rose.

How It Works

• Uses GSAP + ScrollTrigger to animate the footer on scroll.
• Uses SplitText to animate the copyright text line-by-line.
• Dynamically injects gradient colors into SVG <linearGradient> stops.
• Animates the SVG spectrum bars with scale and transform effects.
• Supports both preset themes and fully custom color overrides.

Scroll Animation Flow

• Footer enters viewport.
• SVG container fades in.
• Spectrum bars scale vertically (scaleY) and settle.
• Copyright text animates upward with blur fade-in.
• Uses scrub: 1 for smooth scroll-linked animation.

API Reference

Footer

Examples

Using a Theme Preset

<Footer theme="ocean" />

Custom Colors Override

<Footer
  colors={{
    text: '#111827',
    gradient: [
      '#111827',
      '#1F2937',
      '#374151',
      '#4B5563',
      '#6B7280',
      '#9CA3AF',
      '#D1D5DB',
      '#F3F4F6',
    ],
  }}
/>

Custom text

<Footer
  theme="emerald"
  copyrightText={`copyright © ${new Date().getFullYear()} — Odyssey UI`}
/>