Does Capsule Hero 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 Capsule Hero work with Vue 2?

No - the component uses the Vue 3 Composition API and ` ` syntax. Vue 2 support is not planned. If you need Vue 2, the HTML/CSS/JS variant works in any context.

Does Capsule Hero work with TypeScript in Vue?

Yes. The component is typed and works with both `vue-tsc` and Volar. Props match the `data-anm-*` attributes documented on the main detail page.

Will the animation flash before hydration in Nuxt SSR?

Brief flash is possible because GSAP needs the client to initialize. The component sets the parked state via `gsap.set` on `onMounted` before the first paintable frame. For above-the-fold use in SSR contexts, add a CSS opacity:0 default that the component clears.

GSAP component for Vue

Capsule Hero in Vue.

A full-screen hero where two giant letters split apart to reveal a video framed inside a rounded capsule window. Click the capsule to expand the video to fill the whole screen, click again to shrink it back.

Install

Install Capsule Hero in your Vue project

Capsule Hero 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.

BASH

Integrate

Where it goes in your Vue app

Capsule Hero 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.

Gotchas

Same slaved-glyph geometry as the vanilla source

The clipGeo object is the single source of truth: every tween writes it, applyClip() pushes the CSS vars and slaves the glyph positions to the live clip edge. Do not replace it with independent glyph tweens - the non-overlap guarantee lives there.

Fonts gate + kept splits

The entrance waits for document.fonts.ready because glyph widths drive the geometry, and the SplitText splits stay in the DOM until unmount (reverting reflows the negative letter-spacing and the letters jump).

FAQ

Common questions

Does Capsule Hero 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 Capsule Hero work with Vue 2?: No - the component uses the Vue 3 Composition API and