/web--gsap-hero-cinematic

/web--gsap-hero-cinematic is a Claude Code skill in the Web & Design section. Builds a website hero section with GSAP: layered reveals, 3D parallax, animated typography and video backgrounds, with a reduced-motion fallback.

Author's description

GSAP cinematic hero sections — layered reveals, 3D parallax, animated typography, video backgrounds, and immersive landing experiences

How to ask for it

/web--gsap-hero-cinematic create a cinematic hero with a video background
/web--gsap-hero-cinematic add 3D parallax to my landing page hero
/web--gsap-hero-cinematic animate the headline with a layered reveal effect

Install

curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash

After installing with the script, type /web--gsap-hero-cinematic. Using Cursor, Windsurf or Codex? Platform guides

Demo coming soon

/web--gsap-micro-interactionsMicro-interactions with GSAP
Implements micro-interactions in React with GSAP: custom cursors, magnetic buttons, tilt cards, spotlight effects and scroll indicators.
Built here
/web--gsap-page-transitionsPage transitions with GSAP
Builds page transitions for React and Next.js with GSAP: overlay wipes, shared-element transitions and coordinated route animations.
Built here
/web--gsap-preloaderAnimated preloaders with GSAP
Builds animated loading screens with GSAP: progress bars, percentage counters, animated logos, skeleton screens and cinematic intro sequences.
Built here
/web--gsap-scroll-experienceScroll animations with GSAP
Builds scroll-driven experiences with GSAP ScrollTrigger: parallax layers, pinned sections, horizontal scroll and timelines scrubbed by scroll position.
Built here
/web--gsap-svg-morphingSVG animation with GSAP
Animates SVG shapes with GSAP: path drawing, shape morphing, animated icons, blob shapes, wave dividers and motion along a path.
Built here
/web--gsap-text-fxKinetic text effects with GSAP
Builds kinetic typography with GSAP in React: split text by character or word, scramble, glitch, 3D rotation, gradient sweep and text on a curved path.
Built here

How to ask for it

Install

More from this section