Hero Scroll Video Pin Reveal

Heroes 1K

About

A cinematic hero section with GSAP SplitText kinetic word reveal, clip-path badges, and an expanding full-screen drone video pin animation across mobile, tablet, and desktop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Scroll Video Pin Reveal to your project and fits it to your theme.

Code

How Hero Scroll Video Pin Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import React from 'react';
import HeroScrollVideoReveal from '@/components/ui/hero-scroll-video-pin-reveal';

export default function HeroScrollVideoRevealDemo() {
  return (
    <div
      className="min-h-screen w-full bg-[#0d0f0d] text-white overflow-x-hidden"
      style={{ backgroundColor: '#0d0f0d', color: '#ffffff', minHeight: '100vh', width: '100%' }}
    >
      <HeroScrollVideoReveal
        videoSrc="https://res.cloudinary.com/dsuwzuaxp/video/upload/856381-hd_1920_1080_30fps_gsq11b.mp4"
      />
    </div>
  );
}