Gradient Footer in Vue.
A full drop-in footer section with a CSS/SVG gradient glow anchored to the bottom edge. The glow is a shallow arch - a full-width band that hugs the bottom and reaches both bottom corners, rising to a taller peak in the centre (height tunable via data-anm-arch) - built entirely from layered CSS gradients (no WebGL, no canvas). It slowly drifts, reacts to scroll, and rises in with a slow power3.out fade on scroll-enter (slightly delayed on scroll-down). A giant brand wordmark sits above it, split into characters with GSAP SplitText and revealed as a masked per-letter rise (yPercent 110 -> 0, expo.out, staggered) on the same ScrollTrigger; the font-size auto-fits so the tight word fills the full container width for any brand name. The letters use a mix-blend overlay so they take on the glow's light. Above the wordmark: a 4-column link grid (Grok-footer alignment on the 12-col skeleton) with a slide-through underline hover (the Annnimate text-underline mechanic, signal yellow) and a slim legal row. Grain overlay via a static SVG feTurbulence (rendered once, GPU-composited - cheap). Responsive 320-1920: 2x2 link grid on mobile. VANTA editorial-sports demo brand.
Install Gradient Footer in your Vue project
Gradient Footer ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.
Where it goes in your Vue app
Gradient Footer is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.
In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.
The component uses the <script setup> composition API and TypeScript-friendly defineProps.
Vue-specific gotchas
GSAP cleanup in onUnmounted, not onBeforeUnmount
onUnmounted to kill tweens and ScrollTriggers. onBeforeUnmount fires while the DOM is still mounted, but onUnmounted is the more idiomatic place for animation cleanup in Vue 3.Template refs are .value, not .current
const el = ref(null); access as el.value (not el.current like React). Pass el.value into gsap.to / gsap.from targets.Register plugins once, outside setup
gsap.registerPlugin(ScrollTrigger, ...)) can run at module top level in Vue 3 + Vite because the build is client-first. In Nuxt with SSR, wrap in if (process.client) or place inside onMounted.Common questions
- Does Gradient Footer work in Nuxt 3?
- Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in
- Does Gradient Footer work with Vue 2?
- No - the component uses the Vue 3 Composition API and