Parallax Reveal Text code

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

@php
    /*
    | Scroll-reveal text parallax. The image has a light scroll drift while the
    | foreground copy and stat chips reveal in a stagger.
    */
@endphp

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

                return;
            }

            const rect = $el.getBoundingClientRect();
            this.y = rect.top * -0.06;
        },
    }"
    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 scale-[1.08] object-cover will-change-transform motion-reduce:scale-100 motion-reduce:transform-none"
        style="transform: translate3d(0, 0, 0) scale(1.08);"
        :style="reduced ? 'transform: translate3d(0, 0, 0) scale(1);' : `transform: translate3d(0, ${y}px, 0) scale(1.08);`"
    >

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

    <div class="mx-auto grid w-full max-w-7xl items-center gap-10 px-6 py-16 sm:px-8 lg:grid-cols-[0.9fr_1.1fr] lg:px-10">
        <div>
            @if ($eyebrow)
                <div data-reveal="down">
                    <x-ui.badge variant="brand" icon="text-aa" class="bg-white/12 text-white ring-1 ring-white/20 backdrop-blur dark:bg-white/12 dark:text-white">
                        {{ $eyebrow }}
                    </x-ui.badge>
                </div>
            @endif

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

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

            @isset($actions)
                <div class="mt-8 flex flex-col gap-3 sm:flex-row" data-reveal="up" data-reveal-delay="300">{{ $actions }}</div>
            @endisset
        </div>

        <div class="grid gap-4 sm:grid-cols-3">
            @foreach ([
                ['label' => '01', 'copy' => 'Badge enters first'],
                ['label' => '02', 'copy' => 'Headline follows'],
                ['label' => '03', 'copy' => 'Actions settle last'],
            ] as $index => $item)
                <div
                    class="rounded-2xl border border-white/15 bg-white/10 p-5 text-white shadow-2xl shadow-gray-950/30 backdrop-blur"
                    data-reveal="up"
                    data-reveal-delay="{{ 150 + ($index * 100) }}"
                >
                    <p class="text-sm font-semibold">{{ $item['label'] }}</p>
                    <p class="mt-2 text-sm leading-6 text-white/72">{{ $item['copy'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>