Does Testimonial Globe work in Next.js App Router?

Yes. The component includes the `'use client'` directive and uses `useGSAP` for proper cleanup across Server Component re-renders. Drop it into any page or component inside `app/`.

Does Testimonial Globe work with Server Components?

The component itself runs on the client (it needs the DOM for GSAP), but the parent page can be a Server Component. Import the component normally; React's "use client" boundary handles the rest. No additional configuration needed.

Does Testimonial Globe work in React 18 and React 19?

Yes. The component uses `useGSAP` which is React-version-agnostic. It also handles Strict Mode double-invocation correctly via `gsap.context` scoping.

Will the animation flash before hydration?

Brief flash is possible on first paint because GSAP needs the client to initialize. The component sets the parked ("starting") state via `gsap.set` on mount before the first frame, so any visible jump is sub-frame and rarely perceived. For above-the-fold use, pair with a CSS opacity:0 default that the component clears on mount.

GSAP component for React

Testimonial Globe in React.

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.

Built for annnimate.com.

Framework guides

Install

Install Testimonial Globe in your React project

Testimonial Globe ships as a copy-paste React component. The only dependencies are GSAP and the official @gsap/react adapter for the useGSAP hook. Both work in Next.js (App Router and Pages), Vite, Remix, and Create React App.

BASH

Integrate

Where it goes in your React app

Testimonial Globe is a leaf-level interactive component, so it needs to render on the client. In a Next.js App Router project, add the 'use client' directive at the top of the file (it's already there in the component you copy).

The component is self-contained: it manages its own refs, useGSAP scope, and cleanup. Mount it inside any Server Component, Client Component, or page. It does not require a provider or wrapper.

If your project uses TypeScript, the component is typed - the props it accepts match the data-anm-* attributes documented on the main detail page.

Gotchas

React-specific gotchas

Always use the useGSAP hook, not useEffect

useGSAP (from @gsap/react) handles cleanup automatically: kills tweens and ScrollTriggers on unmount, and uses gsap.context scoping so selectors only match inside your component. Plain useEffect works but leaks animations on hot-reload and Strict Mode double-invocations.

Refs over className selectors

When passing targets to gsap.to / gsap.from, use refs (elementRef.current) instead of class selectors. Refs survive Strict Mode double-renders and don't accidentally match sibling components that share class names.

gsap.registerPlugin(ScrollTrigger, SplitText, ...) must run client-side only. Wrap in if (typeof window !== 'undefined') or place inside the component body - never at module top level in SSR contexts.

FAQ

Common questions

Does Testimonial Globe work in Next.js App Router?: Yes. The component includes the 'use client' directive and uses useGSAP for proper cleanup across Server Component re-renders. Drop it into any page or component inside app/.
Does Testimonial Globe work with Server Components?: The component itself runs on the client (it needs the DOM for GSAP), but the parent page can be a Server Component. Import the component normally; React's "use client" boundary handles the rest. No additional configuration needed.
Does Testimonial Globe work in React 18 and React 19?: Yes. The component uses useGSAP which is React-version-agnostic. It also handles Strict Mode double-invocation correctly via gsap.context scoping.
Will the animation flash before hydration?: Brief flash is possible on first paint because GSAP needs the client to initialize. The component sets the parked ("starting") state via gsap.set on mount before the first frame, so any visible jump is sub-frame and rarely perceived. For above-the-fold use, pair with a CSS opacity:0 default that the component clears on mount.

Copy the React code

The full React implementation lives on the component page, with the live demo, every format side by side, and the ability to edit and re-run it in the browser.

Open Testimonial Globe