Testimonial Globe in Vue.
A full drop-in testimonial section with a draggable WebGL sphere of image planes as the section's visual layer. The headline sits in its own block above the globe stage; three frosted-glass testimonial cards float in a staggered diagonal 12-col grid inside the stage, letting the globe blur through them. Globe fills the stage absolutely behind the cards; pointer-events on the globe stays active in the negative space between cards. Light canvas, frosted-glass cards (rgba white + backdrop-filter blur), slow autoplay drift, drag-plus-inertia model, golden-angle plane placement, cover-fit UV for any image aspect ratio. Card layer rises and fades in on scroll-enter with a stagger. Globe images are configurable from a hidden HTML list (default: 16 landscape 1456x816 sports files). On mobile the globe becomes a lightweight CSS 3D sphere (no WebGL canvas) with a swipe-able scroll-snap card row over it; set data-anm-mobile-globe to false to skip the globe and stack the cards. VANTA editorial-sports demo brand.
Install Testimonial Globe in your Vue project
Testimonial Globe 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
Testimonial Globe 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 Testimonial Globe 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 Testimonial Globe work with Vue 2?
- No - the component uses the Vue 3 Composition API and