Capsule Hero
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.
One of 69 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The problem that shaped the whole build is the window and the letters colliding. The first version animated them separately, same speed, same easing, and the window still clipped through the A on some screens, because the two never actually knew about each other. So I tied the letters to the edge of the window itself: each one always sits a fixed distance outside it, and when the window opens it physically pushes them out to the sides. When you click play and it grows to fill the screen, it shoves them off the edge the same way. They can't overlap on any screen or with any words, because only one thing is really moving.
The play button doubles as your cursor. It's hidden until you move over the video, then it scales in under your mouse and follows it around, and the label rolls from Play to Close when the video is open. On a phone it just sits in place inside the window.
The rest is yours. Set your own two words, they come in character by character before the window opens and you can give that moment a longer or shorter pause, drop in your video, and size the window however you want. The video only starts playing when someone opens it, so the page stays light, or you can flip it to an ambient loop that runs from the start.
What you'll need.
Install
- GSAP
- ScrollTrigger
- CustomEase
- SplitText
Concepts
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Capsule Hero work with React and Vue?
- Capsule Hero ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Capsule Hero?
- Yes. Capsule Hero is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Capsule Hero without editing code?
- Capsule Hero exposes 6 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Capsule Hero free?
- Capsule Hero is part of the Annnimate Library, a paid subscription (from EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- Can I use Capsule Hero in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Capsule Hero on as many projects as you build, with no attribution required.
- Does Capsule Hero respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
