UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Hero Video Modal Walkthrough

blockmarketing
Boilerplate repo

Product walkthrough hero section with interactive video modal player, chapter timestamps navigation, playback speed controls, and social proof.

Installation

$npx uipkge-ng@latest add hero-video-modal-walkthrough
Manifest:https://uipkge.dev/r/angular/hero-video-modal-walkthrough.jsonInstalls to:src/app/components/blocks/hero-video-modal-walkthrough/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

HeroVideoChapter
interface HeroVideoChapter {
  id: string
  title: string
  timestamp: string
  description: string
}

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/hero-video-modal-walkthrough/hero-video-modal-walkthrough.component.ts16.3 kB
    // Product walkthrough hero with an interactive video modal player: chapter
// timestamps, playback speed controls, mute/play toggles and social proof.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
import { BookOpen, LucideAngularModule, Maximize2, Pause, Play, Star, Volume2, VolumeX, X } from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent } from '@/ui/card/card.component'

export interface HeroVideoChapter {
  id: string
  title: string
  timestamp: string
  description: string
}

const chapters: HeroVideoChapter[] = [
  {
    id: 'intro',
    title: '1. Architecture & Registry Engine',
    timestamp: '0:45',
    description: 'Learn how unbundled components provide 100% source ownership without npm dependencies.',
  },
  {
    id: 'tokens',
    title: '2. OKLCH Theme & Token System',
    timestamp: '1:30',
    description: 'Explore the fluid color space engine and dynamic contrast balancing in Tailwind v4.',
  },
  {
    id: 'parity',
    title: '3. Dual-Framework Parity Model',
    timestamp: '2:15',
    description: 'Deep dive into mirror synchronization between Vue 3.5 SFC and React 19 TSX.',
  },
]

const avatarTiles = [
  { initials: 'RF', tone: 'bg-primary/20 text-primary' },
  { initials: 'PC', tone: 'bg-success/20 text-success' },
  { initials: 'EK', tone: 'bg-info/20 text-info' },
  { initials: 'SH', tone: 'bg-warning/20 text-warning' },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-hero-video-modal-walkthrough, [ui-hero-video-modal-walkthrough]',
  standalone: true,
  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],
  template: `
    <section data-slot="hero-video-modal-walkthrough" [class]="rootClass">
      <!-- Ambient Glow Background -->
      <div
        class="bg-primary/10 pointer-events-none absolute top-12 left-1/2 -z-10 h-72 w-full max-w-5xl -translate-x-1/2 rounded-full blur-xl"
      ></div>

      <div class="mx-auto max-w-6xl space-y-12 text-center">
        <!-- Headline & Subtitle -->
        <div class="mx-auto max-w-3xl space-y-5">
          <span ui-badge variant="secondary" class="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
            <lucide-icon [img]="Play" class="text-primary fill-primary/20 size-3.5" />
            Interactive 3-Minute Architecture Walkthrough
          </span>

          <h1 class="text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl">
            See how top engineering teams build with UIPKGE.
          </h1>

          <p class="text-muted-foreground text-base leading-relaxed sm:text-lg">
            Watch a full walkthrough of our design engineering principles, OKLCH token engine, and dual-framework
            component architecture.
          </p>

          <!-- CTA Action Buttons -->
          <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
            <button ui-button size="lg" class="gap-2 font-semibold shadow-xs" (click)="openModal(0)">
              <lucide-icon [img]="Play" class="size-4 fill-current" />
              <span>Watch Product Tour (3:30)</span>
            </button>

            <a ui-button href="#docs" variant="outline" size="lg" class="gap-2 font-medium">
              <lucide-icon [img]="BookOpen" class="text-muted-foreground size-4" />
              <span>Read Architecture RFC</span>
            </a>
          </div>

          <!-- Social Proof Avatars & Stars -->
          <div class="text-muted-foreground flex flex-wrap items-center justify-center gap-6 pt-3 text-xs">
            <div class="flex -space-x-2 overflow-hidden">
              @for (avatar of avatars; track avatar.initials) {
                <div
                  [class]="
                    'ring-background flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2 ' +
                    avatar.tone
                  "
                >
                  {{ avatar.initials }}
                </div>
              }
            </div>
            <div class="text-warning flex items-center gap-1">
              @for (star of stars; track star) {
                <lucide-icon [img]="Star" class="size-3.5 fill-current" />
              }
              <span class="text-foreground ml-1 font-mono text-xs font-medium">4.9/5 by 1,400+ Design Engineers</span>
            </div>
          </div>
        </div>

        <!-- Video Preview Card & Chapter Trigger Grid -->
        <div class="mx-auto max-w-4xl">
          <div
            ui-card
            class="border-border bg-card group focus-visible:ring-ring cursor-pointer overflow-hidden rounded-2xl p-2 shadow-sm transition-[box-shadow,transform] duration-150 focus-visible:ring-2 focus-visible:outline-none active:scale-[0.99]"
            role="button"
            tabindex="0"
            aria-label="Launch interactive video player"
            (click)="openModal(0)"
            (keydown.enter)="openModal(0)"
            (keydown.space)="$event.preventDefault(); openModal(0)"
          >
            <!-- Video Thumbnail Frame -->
            <div
              class="bg-muted/60 border-border/80 relative flex aspect-video flex-col justify-between overflow-hidden rounded-lg border p-6 text-left"
            >
              <!-- Overlay Backdrop Texture -->
              <div
                class="from-background/95 via-background/40 absolute inset-0 z-0 bg-gradient-to-t to-transparent"
              ></div>

              <!-- Top Row: Badge & Length -->
              <div class="relative z-10 flex items-center justify-between">
                <span
                  class="bg-background/80 border-border text-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium backdrop-blur-md"
                >
                  <span class="bg-success size-2 animate-pulse rounded-full"></span>
                  <span>Full HD &bull; 60 FPS</span>
                </span>
                <span
                  class="bg-background/80 border-border text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs backdrop-blur-md"
                >
                  Total runtime: 3m 30s
                </span>
              </div>

              <!-- Center: Play Button Beacon -->
              <div class="relative z-10 flex flex-col items-center justify-center py-8">
                <div
                  class="bg-primary text-primary-foreground shadow-primary/25 flex size-16 items-center justify-center rounded-full shadow-lg transition-transform duration-300 group-hover:scale-110 sm:size-20"
                >
                  <lucide-icon [img]="Play" class="ml-1 size-7 fill-current sm:size-8" />
                </div>
                <p class="text-foreground mt-4 text-sm font-semibold tracking-tight">
                  Click to Launch Interactive Player
                </p>
              </div>

              <!-- Bottom: Chapter Navigation Strip -->
              <div class="border-border/60 relative z-10 grid grid-cols-1 gap-2 border-t pt-2 sm:grid-cols-3">
                @for (chapter of chapterList; track chapter.id; let idx = $index) {
                  <div
                    class="bg-background/60 border-border/50 hover:bg-background/90 focus-visible:ring-ring rounded-lg border p-2 text-left backdrop-blur-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
                    role="button"
                    tabindex="0"
                    [attr.aria-label]="'Play chapter: ' + chapter.title"
                    (click)="openModalFromStrip($event, idx)"
                    (keydown.enter)="openModalFromStrip($event, idx)"
                    (keydown.space)="$event.preventDefault(); openModalFromStrip($event, idx)"
                  >
                    <div class="text-muted-foreground flex items-center justify-between font-mono text-xs">
                      <span class="truncate">{{ chapterShortTitle(chapter.title) }}</span>
                      <span class="text-primary font-bold">{{ chapter.timestamp }}</span>
                    </div>
                  </div>
                }
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Interactive Video Dialog Modal -->
      @if (isModalOpen()) {
        <div class="bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md sm:p-6">
          <div
            class="bg-card border-border relative w-full max-w-4xl overflow-hidden rounded-2xl border text-left shadow-sm"
            role="dialog"
            aria-modal="true"
            aria-label="Product walkthrough video player"
          >
            <!-- Modal Top Bar -->
            <div class="border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3">
              <div class="flex items-center gap-2">
                <span class="bg-primary size-2.5 rounded-full"></span>
                <span class="text-foreground font-mono text-xs font-semibold">{{ currentChapter().title }}</span>
              </div>
              <button
                type="button"
                aria-label="Close video player"
                class="text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                (click)="closeModal()"
              >
                <lucide-icon [img]="X" class="size-4" />
              </button>
            </div>

            <!-- Simulated Video Playback Viewport -->
            <div class="relative flex aspect-video flex-col justify-between bg-neutral-950 p-6 text-white select-none">
              <div class="flex items-center justify-between font-mono text-xs opacity-80">
                <span>UIPKGE Architecture Masterclass</span>
                <span>OKLCH Engine v2.4</span>
              </div>

              <!-- Video Mock Graphic -->
              <div class="flex flex-col items-center justify-center space-y-3">
                <div
                  class="flex size-16 items-center justify-center rounded-full border border-white/20 bg-white/10 backdrop-blur-md"
                >
                  @if (!isPlaying()) {
                    <lucide-icon [img]="Play" class="ml-1 size-7 fill-current" />
                  } @else {
                    <lucide-icon [img]="Pause" class="size-7" />
                  }
                </div>
                <p class="max-w-md text-center font-mono text-xs text-neutral-400">
                  {{ currentChapter().description }}
                </p>
              </div>

              <!-- Timeline Scrubber & Controls -->
              <div class="space-y-2">
                <!-- Progress Bar -->
                <div class="h-1.5 w-full cursor-pointer overflow-hidden rounded-full bg-white/20">
                  <div
                    class="bg-primary h-full transition-[width] duration-200"
                    [style.width]="progressPercent() + '%'"
                  ></div>
                </div>

                <!-- Controls Row -->
                <div class="flex items-center justify-between font-mono text-xs">
                  <div class="flex items-center gap-3">
                    <button
                      type="button"
                      [attr.aria-label]="isPlaying() ? 'Pause video' : 'Play video'"
                      class="hover:text-primary focus-visible:ring-ring rounded-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                      (click)="togglePlay()"
                    >
                      @if (isPlaying()) {
                        <lucide-icon [img]="Pause" class="size-4" />
                      } @else {
                        <lucide-icon [img]="Play" class="size-4 fill-current" />
                      }
                    </button>
                    <button
                      type="button"
                      [attr.aria-label]="isMuted() ? 'Unmute video' : 'Mute video'"
                      class="hover:text-primary focus-visible:ring-ring rounded-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                      (click)="toggleMuted()"
                    >
                      @if (isMuted()) {
                        <lucide-icon [img]="VolumeX" class="size-4" />
                      } @else {
                        <lucide-icon [img]="Volume2" class="size-4" />
                      }
                    </button>
                    <span class="text-neutral-400">{{ currentChapter().timestamp }} / 3:30</span>
                  </div>

                  <div class="flex items-center gap-2">
                    <button
                      type="button"
                      aria-label="Cycle playback speed"
                      class="focus-visible:ring-ring rounded bg-white/10 px-2 py-0.5 transition-colors hover:bg-white/20 focus-visible:ring-2 focus-visible:outline-none"
                      (click)="cyclePlaybackSpeed()"
                    >
                      {{ playbackSpeed() }}x
                    </button>
                    <button
                      type="button"
                      aria-label="Enter fullscreen"
                      class="hover:text-primary focus-visible:ring-ring rounded-xs p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
                    >
                      <lucide-icon [img]="Maximize2" class="size-3.5" />
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Modal Chapter Selector Footer -->
            <div class="border-border bg-muted/20 grid grid-cols-3 border-t">
              @for (ch of chapterList; track ch.id; let idx = $index) {
                <button type="button" [class]="chapterFooterClass(idx)" (click)="activeChapterIndex.set(idx)">
                  <div class="truncate">{{ ch.title }}</div>
                  <div class="text-muted-foreground mt-0.5 text-xs">{{ ch.timestamp }}</div>
                </button>
              }
            </div>
          </div>
        </div>
      }
    </section>
  `,
})
export class UiHeroVideoModalWalkthroughComponent {
  protected readonly BookOpen = BookOpen
  protected readonly Maximize2 = Maximize2
  protected readonly Pause = Pause
  protected readonly Play = Play
  protected readonly Star = Star
  protected readonly Volume2 = Volume2
  protected readonly VolumeX = VolumeX
  protected readonly X = X

  protected readonly chapterList = chapters
  protected readonly avatars = avatarTiles
  protected readonly stars = [1, 2, 3, 4, 5]

  @Input('class') className?: string

  readonly isModalOpen = signal(false)
  readonly isPlaying = signal(true)
  readonly isMuted = signal(false)
  readonly playbackSpeed = signal<1 | 1.5 | 2>(1)
  readonly activeChapterIndex = signal(0)
  readonly progressPercent = signal(38)

  currentChapter(): HeroVideoChapter {
    return chapters[this.activeChapterIndex()] ?? chapters[0]!
  }

  get rootClass(): string {
    return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)
  }

  chapterShortTitle(title: string): string {
    return title.split('.')[1] ?? title
  }

  chapterFooterClass(idx: number): string {
    return cn(
      'border-border border-r p-3 text-left font-mono text-xs transition-colors last:border-r-0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset',
      this.activeChapterIndex() === idx
        ? 'bg-background text-foreground font-semibold'
        : 'text-muted-foreground hover:text-foreground',
    )
  }

  openModal(index = 0): void {
    this.activeChapterIndex.set(index)
    this.isModalOpen.set(true)
    this.isPlaying.set(true)
  }

  openModalFromStrip(event: Event, index: number): void {
    event.stopPropagation()
    this.openModal(index)
  }

  closeModal(): void {
    this.isModalOpen.set(false)
    this.isPlaying.set(false)
  }

  togglePlay(): void {
    this.isPlaying.update((v) => !v)
  }

  toggleMuted(): void {
    this.isMuted.update((v) => !v)
  }

  cyclePlaybackSpeed(): void {
    this.playbackSpeed.update((s) => (s === 1 ? 1.5 : s === 1.5 ? 2 : 1))
  }
}
  • src/app/components/blocks/hero-video-modal-walkthrough/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/hero-video-modal-walkthrough.json