Parallax Zoom Background code

@props([
    'image',
    'alt' => '',
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'overlayClass' => 'bg-gradient-to-b from-gray-950/35 via-gray-950/10 to-gray-950/85',
])

@php
    /*
    | Zoom-on-scroll parallax. The image scales up as the section enters the
    | viewport, while the copy subtly rises into place.
    */
@endphp

<section
    x-data="{
        zoom: 1.04, lift: 24,
        reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
        update() {
            if (this.reduced) {
                this.zoom = 1;
                this.lift = 0;

                return;
            }

            const rect = $el.getBoundingClientRect();
            const progress = Math.max(0, Math.min(1, 1 - Math.abs(rect.top) / window.innerHeight));
            this.zoom = 1.04 + (progress * 0.16);
            this.lift = 24 - (progress * 24);
        },
    }"
    x-init="update()"
    @scroll.window.passive="update()"
    {{ $attributes->merge(['class' => 'relative isolate flex min-h-screen overflow-hidden bg-gray-950']) }}
>
    <img
        src="{{ $image }}"
        alt="{{ $alt }}"
        @if ($alt === '') aria-hidden="true" @endif
        class="pointer-events-none absolute inset-0 -z-20 h-full w-full object-cover will-change-transform motion-reduce:transform-none"
        style="transform: scale(1.04);"
        :style="`transform: scale(${zoom});`"
    >

    <div class="absolute inset-0 -z-10 {{ $overlayClass }}" aria-hidden="true"></div>

    <div class="mx-auto flex w-full max-w-7xl items-end justify-center px-6 py-20 sm:px-8 lg:px-10">
        <div
            class="max-w-3xl text-center will-change-transform motion-reduce:transform-none"
            :style="`transform: translate3d(0, ${lift}px, 0); opacity: ${reduced ? 1 : Math.max(0.72, 1 - (lift / 120))};`"
        >
            @if ($eyebrow)
                <x-ui.badge variant="brand" icon="magnifying-glass-plus" class="bg-white/12 text-white ring-1 ring-white/20 backdrop-blur dark:bg-white/12 dark:text-white">
                    {{ $eyebrow }}
                </x-ui.badge>
            @endif

            @if ($title)
                <h2 class="mt-5 text-4xl font-semibold tracking-tight text-white text-balance sm:text-6xl">{{ $title }}</h2>
            @endif

            @if ($description)
                <p class="mx-auto mt-5 max-w-2xl text-base leading-7 text-gray-100/85 text-pretty sm:text-lg">{{ $description }}</p>
            @endif

            @isset($actions)
                <div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">{{ $actions }}</div>
            @endisset
        </div>
    </div>
</section>