nuxt-hero 0.1.0

package/dist/runtime/components/navigation/HeroNavigation.vue.d.ts

@@ -0,0 +1,18 @@
+import type { HeroSlide } from '#hero/types';
+interface NavigationProps {
+    slides: HeroSlide[];
+    activeIndex: number;
+    /** When true, prev is on top and next is on bottom */
+    vertical?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<NavigationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: () => any;
+    prev: () => any;
+}, string, import("vue").PublicProps, Readonly<NavigationProps> & Readonly<{
+    onNext?: (() => any) | undefined;
+    onPrev?: (() => any) | undefined;
+}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/navigation/HeroPagination.d.vue.ts

@@ -0,0 +1,22 @@
+import type { HeroSlide } from '#hero/types';
+interface PaginationProps {
+    slides: HeroSlide[];
+    activeIndex: number;
+    /** Snap-based active index (accounts for slidesPerView) */
+    snapIndex: number;
+    /** Total number of snap points (pagination dots to show) */
+    totalSnaps: number;
+    /** Autoplay progress 0-1 */
+    progress: number;
+    /** When true, renders vertically on the side (RTL/LTR aware) */
+    vertical?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    slideTo: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    onSlideTo?: ((index: number) => any) | undefined;
+}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/navigation/HeroPagination.vue

@@ -0,0 +1,50 @@
+<script setup>
+const props = defineProps({
+  slides: { type: Array, required: true },
+  activeIndex: { type: Number, required: true },
+  snapIndex: { type: Number, required: true },
+  totalSnaps: { type: Number, required: true },
+  progress: { type: Number, required: true },
+  vertical: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["slideTo"]);
+</script>
+
+<template>
+  <!--
+    Horizontal (default): centered at bottom
+    Vertical: on the side — ltr:right, rtl:left — centered vertically
+  -->
+  <nav role="navigation" aria-label="Slide pagination"
+    class="hero-pagination swiper-pagination pointer-events-auto absolute z-10 flex items-center gap-1 rounded-full p-1 px-1.5 ring-2 ring-white bg-black/35 backdrop-blur-sm"
+    :class="vertical ? 'flex-col top-1/2 -translate-y-1/2 ltr:right-6 rtl:left-6' : 'bottom-6 left-1/2 -translate-x-1/2'">
+    <button v-for="i in totalSnaps" :key="i - 1" type="button"
+      class="group relative flex size-4 shrink-0 items-center justify-center rounded-full"
+      :class="{ active: snapIndex === i - 1 }" :aria-label="`Go to slide ${i}`"
+      :aria-current="snapIndex === i - 1 ? 'step' : void 0" @click="emit('slideTo', i - 1)">
+      <!-- Inactive dot -->
+      <span v-if="snapIndex !== i - 1"
+        class="hero-dot bg-white size-2.5 cursor-pointer rounded-full transition-colors" />
+
+      <!-- Active: progress circle -->
+      <template v-else>
+        <div class="hero-radial-progress text-white "
+          :style="{ '--hero-progress-value': Math.round(progress * 100), '--hero-progress-size': '0.75rem', '--hero-progress-thickness': '0.15rem' }"
+          :aria-valuenow="Math.round(progress * 100)" role="progressbar" />
+        <div class="hero-radial-progress absolute text-white  opacity-25"
+          :style="{ '--hero-progress-value': 100, '--hero-progress-size': '0.75rem', '--hero-progress-thickness': '0.15rem' }"
+          aria-valuenow="100" role="progressbar" />
+      </template>
+
+      <!-- Thumbnail tooltip on hover (show first slide of the snap group) -->
+      <div v-if="slides[i - 1]?.thumbSrc" class="tooltip-content border-white">
+        <div class="tooltip-text border-inherit">
+          <div class="tooltip-inner overflow-hidden rounded-sm bg-black">
+            <img :src="slides[i - 1]?.thumbSrc" :alt="slides[i - 1]?.title ?? `Slide ${i}`"
+              class="size-full object-cover opacity-65" loading="lazy" />
+          </div>
+        </div>
+      </div>
+    </button>
+  </nav>
+</template>

package/dist/runtime/components/navigation/HeroPagination.vue.d.ts

@@ -0,0 +1,22 @@
+import type { HeroSlide } from '#hero/types';
+interface PaginationProps {
+    slides: HeroSlide[];
+    activeIndex: number;
+    /** Snap-based active index (accounts for slidesPerView) */
+    snapIndex: number;
+    /** Total number of snap points (pagination dots to show) */
+    totalSnaps: number;
+    /** Autoplay progress 0-1 */
+    progress: number;
+    /** When true, renders vertically on the side (RTL/LTR aware) */
+    vertical?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<PaginationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    slideTo: (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
+    onSlideTo?: ((index: number) => any) | undefined;
+}>, {
+    vertical: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/slider/HeroSlide.d.vue.ts

@@ -0,0 +1,66 @@
+import type { MediaControlsOptions, VideoMediaControls } from '#hero/types';
+interface SlideProps {
+    bgSrc: string;
+    bgDarkSrc?: string;
+    poster?: string;
+    imagePreset?: string;
+    eager?: boolean;
+    isActive?: boolean;
+    animationClass?: string;
+    slideIndex?: number;
+    onVideoReady?: (index: number, controls: VideoMediaControls) => void;
+    onVideoRemoved?: (index: number) => void;
+    mediaControlsOptions?: MediaControlsOptions;
+    showVideoControls?: boolean;
+    videoLoop?: boolean;
+    /** Whether video should auto-play when slide becomes active */
+    autoPlay?: boolean;
+    containerClass?: string;
+    bgClass?: string;
+}
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {
+    playing: import("vue").ShallowRef<boolean>;
+    togglePlay: () => void;
+    currentTime: import("vue").ShallowRef<number>;
+    duration: import("vue").ShallowRef<number>;
+    buffered: import("vue").Ref<[number, number][], [number, number][]>;
+    volume: import("vue").ShallowRef<number>;
+    muted: import("vue").ShallowRef<boolean>;
+    waiting: import("vue").ShallowRef<boolean>;
+    hls: {
+        loading: import("vue").Ref<boolean, boolean>;
+        error: import("vue").Ref<string | null, string | null>;
+        qualities: import("vue").Ref<number[], number[]>;
+        setQuality: (height: number) => void;
+    } | null;
+};
+type __VLS_Slots = {} & {
+    overlay?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    'video-controls'?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SlideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SlideProps> & Readonly<{}>, {
+    showVideoControls: boolean;
+    isActive: boolean;
+    slideIndex: number;
+    onVideoReady: (index: number, controls: VideoMediaControls) => void;
+    onVideoRemoved: (index: number) => void;
+    mediaControlsOptions: MediaControlsOptions;
+    videoLoop: boolean;
+    autoPlay: boolean;
+    imagePreset: string;
+    eager: boolean;
+    animationClass: string;
+    containerClass: string;
+    bgClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/slider/HeroSlide.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { useMounted } from "@vueuse/core";
+import { useColorMode, useRuntimeConfig } from "#imports";
+import { isVideoUrl, getHeroConfig } from "#hero/utils";
+import HeroSlideVideo from "../video/HeroSlideVideo.vue";
+const props = defineProps({
+  bgSrc: { type: String, required: true },
+  bgDarkSrc: { type: String, required: false },
+  poster: { type: String, required: false },
+  imagePreset: { type: String, required: false, default: "" },
+  eager: { type: Boolean, required: false, default: false },
+  isActive: { type: Boolean, required: false, default: false },
+  animationClass: { type: String, required: false, default: "" },
+  slideIndex: { type: Number, required: false, default: 0 },
+  onVideoReady: { type: Function, required: false, default: void 0 },
+  onVideoRemoved: { type: Function, required: false, default: void 0 },
+  mediaControlsOptions: { type: null, required: false, default: void 0 },
+  showVideoControls: { type: Boolean, required: false, default: false },
+  videoLoop: { type: Boolean, required: false, default: false },
+  autoPlay: { type: Boolean, required: false, default: true },
+  containerClass: { type: String, required: false, default: "" },
+  bgClass: { type: String, required: false, default: "" }
+});
+const colorMode = useColorMode();
+const isDark = computed(() => colorMode.value === "dark");
+const isMounted = useMounted();
+const heroConfig = getHeroConfig(useRuntimeConfig());
+const hasNuxtImage = !!heroConfig.hasNuxtImage;
+const videoEnabled = !!heroConfig.features?.video;
+const activeBgSrc = computed(
+  () => isMounted.value && isDark.value && props.bgDarkSrc ? props.bgDarkSrc : props.bgSrc
+);
+const isBgVideo = computed(() => videoEnabled && isVideoUrl(activeBgSrc.value));
+const videoComponentRef = useTemplateRef("videoComponentRef");
+const contentVisible = ref(props.isActive || !props.animationClass);
+const contentAnimClass = ref(props.animationClass);
+watch(
+  () => props.isActive,
+  (active) => {
+    if (active) {
+      contentVisible.value = true;
+      contentAnimClass.value = props.animationClass;
+    }
+  }
+);
+watch(
+  () => props.animationClass,
+  (cls) => {
+    contentAnimClass.value = cls;
+    if (!props.isActive && cls) contentVisible.value = true;
+    else if (!props.isActive && !cls) contentVisible.value = false;
+  }
+);
+function onAnimationEnd() {
+  if (!props.isActive) contentVisible.value = false;
+}
+const shouldShowVideoControls = computed(
+  () => isBgVideo.value && props.showVideoControls && !!videoComponentRef.value?.mediaControls
+);
+const hlsSlotData = computed(() => {
+  const hls = videoComponentRef.value?.hlsState;
+  if (!hls) return null;
+  return {
+    loading: hls.loading,
+    error: hls.error,
+    qualities: hls.qualities,
+    setQuality: hls.setQuality
+  };
+});
+</script>
+
+<template>
+  <div class="hero-slide relative flex size-full" :class="containerClass">
+    <!-- Background layer (GSAP targets .hero-slide-bg) -->
+    <div class="hero-slide-bg absolute inset-0 z-0 flex items-center justify-center overflow-hidden" :class="bgClass">
+      <!-- Video background (lazy loaded) -->
+      <HeroSlideVideo v-if="isBgVideo" ref="videoComponentRef" :src="activeBgSrc" :poster="poster" :is-active="isActive"
+        :slide-index="slideIndex" :on-video-ready="onVideoReady" :on-video-removed="onVideoRemoved"
+        :media-controls-options="mediaControlsOptions" :video-loop="videoLoop" :auto-play="autoPlay" />
+      <!-- Image background -->
+      <NuxtImg v-else-if="hasNuxtImage" :src="activeBgSrc" :preset="imagePreset || void 0"
+        :loading="eager ? 'eager' : 'lazy'" alt="" class="size-full object-cover will-change-transform" />
+      <img v-else :src="activeBgSrc" :loading="eager ? 'eager' : 'lazy'" alt=""
+        class="size-full object-cover will-change-transform" />
+    </div>
+
+    <!-- Inset shadow overlay -->
+    <span class="pointer-events-none absolute inset-0 z-1 [box-shadow:0rem_-8rem_8rem_-6rem_#000000_inset]" />
+
+    <!-- Overlay patterns (delegated from parent via slot) -->
+    <slot name="overlay" />
+
+    <!-- Content container (GSAP targets .hero-slide-content) -->
+    <div class="hero-slide-content relative z-5 flex size-full flex-col">
+      <div v-show="contentVisible" :class="contentAnimClass" class="size-full" @animationend="onAnimationEnd">
+        <slot />
+      </div>
+    </div>
+
+    <!-- Video controls: rendered outside bg/content layers so parallax doesn't affect them -->
+    <template v-if="shouldShowVideoControls">
+      <slot name="video-controls" v-bind="{
+  playing: videoComponentRef.mediaControls.playing,
+  togglePlay: () => {
+    videoComponentRef.mediaControls.playing.value = !videoComponentRef.mediaControls.playing.value;
+  },
+  currentTime: videoComponentRef.mediaControls.currentTime,
+  duration: videoComponentRef.mediaControls.duration,
+  buffered: videoComponentRef.mediaControls.buffered,
+  volume: videoComponentRef.mediaControls.volume,
+  muted: videoComponentRef.mediaControls.muted,
+  waiting: videoComponentRef.mediaControls.waiting,
+  hls: hlsSlotData
+}">
+        <HeroVideoControls :playing="videoComponentRef.mediaControls.playing"
+          :waiting="videoComponentRef.mediaControls.waiting"
+          :current-time="videoComponentRef.mediaControls.currentTime"
+          :duration="videoComponentRef.mediaControls.duration" :volume="videoComponentRef.mediaControls.volume"
+          :muted="videoComponentRef.mediaControls.muted" />
+      </slot>
+    </template>
+  </div>
+</template>

package/dist/runtime/components/slider/HeroSlide.vue.d.ts

@@ -0,0 +1,66 @@
+import type { MediaControlsOptions, VideoMediaControls } from '#hero/types';
+interface SlideProps {
+    bgSrc: string;
+    bgDarkSrc?: string;
+    poster?: string;
+    imagePreset?: string;
+    eager?: boolean;
+    isActive?: boolean;
+    animationClass?: string;
+    slideIndex?: number;
+    onVideoReady?: (index: number, controls: VideoMediaControls) => void;
+    onVideoRemoved?: (index: number) => void;
+    mediaControlsOptions?: MediaControlsOptions;
+    showVideoControls?: boolean;
+    videoLoop?: boolean;
+    /** Whether video should auto-play when slide becomes active */
+    autoPlay?: boolean;
+    containerClass?: string;
+    bgClass?: string;
+}
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {
+    playing: import("vue").ShallowRef<boolean>;
+    togglePlay: () => void;
+    currentTime: import("vue").ShallowRef<number>;
+    duration: import("vue").ShallowRef<number>;
+    buffered: import("vue").Ref<[number, number][], [number, number][]>;
+    volume: import("vue").ShallowRef<number>;
+    muted: import("vue").ShallowRef<boolean>;
+    waiting: import("vue").ShallowRef<boolean>;
+    hls: {
+        loading: import("vue").Ref<boolean, boolean>;
+        error: import("vue").Ref<string | null, string | null>;
+        qualities: import("vue").Ref<number[], number[]>;
+        setQuality: (height: number) => void;
+    } | null;
+};
+type __VLS_Slots = {} & {
+    overlay?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+} & {
+    'video-controls'?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SlideProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SlideProps> & Readonly<{}>, {
+    showVideoControls: boolean;
+    isActive: boolean;
+    slideIndex: number;
+    onVideoReady: (index: number, controls: VideoMediaControls) => void;
+    onVideoRemoved: (index: number) => void;
+    mediaControlsOptions: MediaControlsOptions;
+    videoLoop: boolean;
+    autoPlay: boolean;
+    imagePreset: string;
+    eager: boolean;
+    animationClass: string;
+    containerClass: string;
+    bgClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/slider/index.d.vue.ts

@@ -0,0 +1,69 @@
+import type { HeroSliderProps } from '#hero/types';
+import { patternCSS, patternSize } from '#hero/utils';
+declare var __VLS_30: {
+    slide: import("#hero/types").HeroSlide;
+    index: number;
+    isActive: boolean;
+    animationClass: string;
+    isVideo: boolean;
+    videoPlaying: boolean;
+    videoDuration: number;
+    videoCurrentTime: number;
+    videoWaiting: boolean;
+    videoEnded: boolean;
+    videoMuted: boolean;
+    videoVolume: number;
+    videoToggle: () => void;
+    videoSeek: (time: number) => void;
+    videoSetVolume: (v: number) => void;
+    videoToggleMute: () => void;
+}, __VLS_33: any, __VLS_36: {
+    patterns: import("#hero/types").OverlayPattern[];
+    index: number;
+    isActive: boolean;
+    patternCSS: typeof patternCSS;
+    patternSize: typeof patternSize;
+}, __VLS_38: {
+    activeIndex: number;
+    snapIndex: number;
+    totalSnaps: number;
+    total: number;
+    progress: number;
+    goTo: (index: number) => void;
+    vertical: boolean;
+    autoplayEnabled: boolean;
+}, __VLS_47: {
+    prev: () => void;
+    next: () => void;
+    activeIndex: number;
+    slides: import("#hero/types").HeroSlide[];
+    vertical: boolean;
+};
+type __VLS_Slots = {} & {
+    slide?: (props: typeof __VLS_30) => any;
+} & {
+    'video-controls'?: (props: typeof __VLS_33) => any;
+} & {
+    overlay?: (props: typeof __VLS_36) => any;
+} & {
+    pagination?: (props: typeof __VLS_38) => any;
+} & {
+    navigation?: (props: typeof __VLS_47) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeroSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeroSliderProps> & Readonly<{}>, {
+    enterAnimation: string;
+    leaveAnimation: string;
+    imagePreset: string;
+    overlayPatterns: import("#hero/types").OverlayPattern[];
+    parallax: import("vue").MaybeRefOrGetter<boolean | import("#hero/types").ParallaxConfig>;
+    as: string;
+    ui: import("#hero/types").HeroSliderUI;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/slider/index.vue

@@ -0,0 +1,200 @@
+<script setup>
+import { computed, toValue, useTemplateRef, watchEffect } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { useElementBounding, useWindowSize } from "@vueuse/core";
+import { useRuntimeConfig } from "#imports";
+import { swiperModules } from "#hero/swiper-modules";
+import { resolveParallaxConfig, formatTime, isVideoUrl, patternCSS, patternSize, getHeroConfig } from "#hero/utils";
+import { useGSAP } from "#hero/composables/_gsap";
+const props = defineProps({
+  slides: { type: Array, required: true },
+  slider: { type: Object, required: true },
+  enterAnimation: { type: String, required: false, default: "" },
+  leaveAnimation: { type: String, required: false, default: "" },
+  overlayPatterns: { type: Array, required: false, default: () => [{ type: "lines", opacity: 0.1 }] },
+  parallax: { type: null, required: false, default: true },
+  imagePreset: { type: String, required: false, default: "" },
+  as: { type: String, required: false, default: "div" },
+  ui: { type: Object, required: false, default: () => ({}) }
+});
+const heroConfig = getHeroConfig(useRuntimeConfig());
+const features = heroConfig.features ?? {};
+const containerRef = useTemplateRef("containerRef");
+const {
+  activeIndex,
+  snapIndex,
+  totalSnaps,
+  isActiveSlideVideo,
+  next,
+  prev,
+  goTo,
+  onSwiper,
+  onSlideChange,
+  animationClass,
+  registerSlideVideo,
+  unregisterSlideVideo,
+  activeSlideConfig,
+  autoplayEnabled,
+  autoplayProgress,
+  videoPlaying,
+  videoCurrentTime,
+  videoDuration,
+  videoBuffered,
+  videoVolume,
+  videoMuted,
+  videoWaiting,
+  videoEnded,
+  videoToggle,
+  videoSeek,
+  videoScrubStart,
+  videoScrubEnd,
+  videoSetVolume,
+  videoToggleMute,
+  mergedSwiperOptions,
+  isMultiSlide
+} = props.slider;
+const isVertical = computed(() => mergedSwiperOptions.value.direction === "vertical");
+function isVideo(index) {
+  const slide = props.slides[index];
+  if (!slide) return false;
+  return isVideoUrl(slide.bgSrc) || !!slide.bgDarkSrc && isVideoUrl(slide.bgDarkSrc);
+}
+const shouldShowPagination = computed(
+  () => features.pagination && totalSnaps.value > 1 && activeSlideConfig.value.showPagination
+);
+const shouldShowNavigation = computed(
+  () => features.navigation && props.slides.length > 1 && activeSlideConfig.value.showNavigation
+);
+const shouldShowVideoScrubber = computed(
+  () => features.video && activeSlideConfig.value.showProgress && isActiveSlideVideo.value && videoDuration.value > 0 && !isMultiSlide.value
+);
+const shouldShowAutoplayProgress = computed(
+  () => !shouldShowVideoScrubber.value && autoplayEnabled && activeSlideConfig.value.showProgress
+);
+const parallaxConfig = computed(() => resolveParallaxConfig(toValue(props.parallax)));
+if (features.parallax) {
+  const { top: elTop, height: elHeight } = useElementBounding(containerRef);
+  const { height: winHeight } = useWindowSize();
+  watchEffect(() => {
+    const cfg = parallaxConfig.value;
+    if (!cfg.bg) return;
+    const el = containerRef.value;
+    if (!el) return;
+    const wh = winHeight.value;
+    const eh = elHeight.value;
+    if (!wh || !eh) return;
+    const bgs = el.querySelectorAll(".hero-slide-bg");
+    const totalScroll = wh + eh;
+    const progress = Math.min(Math.max((wh - elTop.value) / totalScroll, 0), 1);
+    const maxTravel = eh * cfg.speed * 0.4;
+    const offset = (progress - 0.5) * 2 * maxTravel;
+    for (const bg of bgs) {
+      bg.style.height = `calc(100% + ${maxTravel * 2}px)`;
+      bg.style.top = `${-maxTravel}px`;
+      bg.style.transform = `translate3d(0, ${offset}px, 0)`;
+    }
+  });
+  useGSAP(({ gsap }) => {
+    const cfg = parallaxConfig.value;
+    if (!cfg.content) return;
+    const el = containerRef.value;
+    if (!el) return;
+    gsap.to(el.querySelectorAll(".hero-slide-content"), {
+      yPercent: 35 * cfg.speed,
+      opacity: cfg.minOpacity,
+      ease: "none",
+      scrollTrigger: {
+        trigger: el,
+        start: "top top",
+        end: "bottom top",
+        scrub: true
+      }
+    });
+  }, { scope: containerRef });
+}
+</script>
+
+<template>
+  <component :is="as" ref="containerRef" class="hero-slider group/slider relative size-full" :class="ui.root">
+    <Swiper v-bind="mergedSwiperOptions" :parallax="true" :modules="swiperModules" class="size-full" :class="ui.swiper"
+      @swiper="onSwiper" @slide-change="onSlideChange">
+      <SwiperSlide v-for="(slide, index) in slides" :key="index" class="size-full overflow-hidden" :class="ui.slide">
+        <HeroSlide :bg-src="slide.bgSrc" :bg-dark-src="slide.bgDarkSrc" :poster="slide.poster"
+          :image-preset="imagePreset" :eager="index === 0" :is-active="index === activeIndex || isMultiSlide"
+          :animation-class="animationClass(index)" :slide-index="index" :on-video-ready="registerSlideVideo"
+          :on-video-removed="unregisterSlideVideo" :media-controls-options="slide.config?.mediaControlsOptions"
+          :show-video-controls="index === activeIndex || isMultiSlide ? slide.config?.showVideoControls ?? activeSlideConfig.showVideoControls : false"
+          :video-loop="slide.config?.videoLoop ?? false" :auto-play="!isMultiSlide" :container-class="ui.container"
+          :bg-class="ui.bg">
+          <slot name="slide" v-bind="{
+  slide,
+  index,
+  isActive: index === activeIndex,
+  animationClass: animationClass(index),
+  isVideo: isVideo(index),
+  videoPlaying,
+  videoDuration,
+  videoCurrentTime,
+  videoWaiting,
+  videoEnded,
+  videoMuted,
+  videoVolume,
+  videoToggle,
+  videoSeek,
+  videoSetVolume,
+  videoToggleMute
+}" />
+          <template #video-controls="videoProps">
+            <slot name="video-controls" v-bind="videoProps" />
+          </template>
+          <template #overlay>
+            <slot name="overlay"
+              v-bind="{ patterns: overlayPatterns, index, isActive: index === activeIndex, patternCSS, patternSize }">
+              <!-- Default overlay rendering -->
+              <div v-for="(pattern, i) in overlayPatterns" :key="i" class="pointer-events-none absolute inset-0 z-2"
+                :style="{
+  backgroundImage: patternCSS(pattern),
+  backgroundSize: patternSize(pattern),
+  opacity: pattern.opacity ?? 0.15
+}" />
+            </slot>
+          </template>
+        </HeroSlide>
+      </SwiperSlide>
+    </Swiper>
+
+    <!-- UI controls layer -->
+    <div class="pointer-events-none absolute inset-0 z-50 overflow-hidden" :class="ui.controls">
+      <slot v-if="shouldShowPagination" name="pagination"
+        v-bind="{ activeIndex, snapIndex, totalSnaps, total: slides.length, progress: autoplayProgress, goTo, vertical: isVertical, autoplayEnabled }">
+        <HeroPagination :slides="slides" :active-index="activeIndex" :snap-index="snapIndex" :total-snaps="totalSnaps"
+          :progress="autoplayEnabled ? autoplayProgress : 1" :vertical="isVertical" @slide-to="goTo" />
+      </slot>
+
+      <slot v-if="shouldShowNavigation" name="navigation"
+        v-bind="{ prev, next, activeIndex, slides, vertical: isVertical }">
+        <HeroNavigation :slides="slides" :active-index="activeIndex" :vertical="isVertical" @prev="prev" @next="next" />
+      </slot>
+
+      <!-- Video scrubber (replaces progress bar when active slide is video) -->
+      <HeroVideoScrubber v-if="shouldShowVideoScrubber" :model-value="videoCurrentTime" :max="videoDuration"
+        class="pointer-events-auto absolute z-11" :class="isVertical ? 'top-0 ltr:right-0 rtl:left-0 h-full w-1' : 'bottom-0 left-0 h-1 hover:h-2 w-full'" @update:model-value="(v) => videoSeek(v)"
+        @scrubber-mousedown="videoScrubStart" @scrubber-mouseup="videoScrubEnd">
+        <template #default="{ position, pendingValue }">
+          <div
+            class="text-white mb-2 pointer-events-none px-2 py-1 rounded-sm bg-black/85 backdrop-blur-sm transform bottom-0 absolute z-99 -translate-x-1/2"
+            :style="{ left: position }">
+            <div
+              class="size-2 rotate-45 left-1/2 top-3.5 absolute overflow-hidden after:bg-white after:size-2 after:content-[''] -translate-x-1/2 after:rotate-45 after:left-1/2 after:top-1/2 after:absolute" />
+            {{ formatTime(pendingValue) }}
+          </div>
+        </template>
+      </HeroVideoScrubber>
+
+      <!-- Autoplay progress bar: horizontal at bottom, vertical on the side -->
+      <div v-if="shouldShowAutoplayProgress" class="pointer-events-none absolute z-4 bg-white/50" :class="[isVertical ? 'top-0 ltr:right-0 rtl:left-0 h-full w-1' : 'bottom-0 left-0 w-full h-1', ui.progress]">
+        <div class="bg-white transition-all duration-50 rounded-e-sm" :class="isVertical ? 'w-full' : 'h-full'" :style="isVertical ? { height: `${autoplayProgress * 100}%` } : { width: `${autoplayProgress * 100}%` }" />
+      </div>
+    </div>
+  </component>
+</template>