Carousels

# Brok UI: Phone Showcase (`phone-showcase`)

A center-emphasis coverflow carousel that showcases app screens inside iPhone frames, with the active phone scaled up and neighbours dimmed.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add phone-showcase
```

## Usage

```blade
<div class="px-4 py-8">
    <x-ui.phone-showcase />
</div>
```

## Props

- `screens` (mixed|null, default `null`) — App screens to show; each is {image, alt}, falling back to a built-in faux app UI when image is omitted.
- `autoplay` (bool, default `false`) — Advances automatically on a timer when true, gated behind reduced motion.
- `interval` (int, default `5000`) — Milliseconds between automatic advances when autoplay is true.
- `loop` (bool, default `true`) — Wraps from the last screen back to the first and vice versa when true.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Showcasing app screens or mobile UI as a marketing/product feature, framed inside a realistic iPhone mockup.
- Wanting a center-emphasis coverflow specifically tuned for portrait phone screens rather than generic cards.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- The content is not phone/app screenshots; use carousel, card-carousel-3d or collection-surfer for general content.
- A full 360-degree ring effect is wanted; use carousel-cylinder instead.

## Anti-patterns

- Heavy effects in forms or task-dense workflows
- Motion that interferes with reading or focus

## Rules

- Use the `<brok:phone-showcase>` tag (or `<x-ui.phone-showcase>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/phone-showcase
- Registry JSON (files, props, contract): https://brokui.dev/r/open/phone-showcase.json

@props([
    'screens' => null,
    'autoplay' => false,
    'interval' => 5000,
    'loop' => true,
])

@php
    // Default to three faux app screens so the component renders with zero args.
    $screens = $screens ?: [
        ['image' => null, 'alt' => 'App home screen'],
        ['image' => null, 'alt' => 'App activity screen'],
        ['image' => null, 'alt' => 'App profile screen'],
    ];
@endphp

{{--
    Phone showcase — a center-emphasis ("coverflow") carousel of app screens
    inside iPhone frames. The active phone is centered and full-scale; its
    neighbours are scaled down and dimmed for depth. Prev/next buttons, dot
    indicators and arrow keys drive it; RTL-aware. Optional autoplay is disabled
    under prefers-reduced-motion (handled in phone-showcase.js).
--}}
<div
    x-data="uiPhoneShowcase({
        loop: @js((bool) $loop),
        autoplay: @js((bool) $autoplay),
        interval: @js((int) $interval),
    })"
    data-slot="phone-showcase"
    role="region"
    aria-roledescription="carousel"
    aria-label="{{ __('App screen showcase') }}"
    tabindex="0"
    @keydown="onKey($event)"
    {{ $attributes->merge(['class' => 'relative flex flex-col items-center gap-6 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring']) }}
>
    {{-- Coverflow viewport: the track is centered, slides translate by active index. --}}
    <div class="relative w-full overflow-hidden">
        <div
            x-ref="track"
            class="flex items-center justify-center"
            :style="`transform: translateX(calc(${(getComputedStyle($el).direction === 'rtl' ? 1 : -1) * index} * 16rem))`"
            style="transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1)"
        >
            @foreach ($screens as $i => $screen)
                <div
                    class="shrink-0 px-2 transition-all duration-500 ease-out motion-reduce:transition-none"
                    :class="isActive(@js($i)) ? 'scale-100 opacity-100 z-10' : 'scale-90 opacity-60'"
                    :aria-hidden="isActive(@js($i)) ? 'false' : 'true'"
                    role="group"
                    aria-roledescription="{{ __('slide') }}"
                    aria-label="{{ __('Screen :n of :total', ['n' => $i + 1, 'total' => count($screens)]) }}"
                >
                    <x-ui.iphone-mockup :label="__('App screen')">
                        @if (!empty($screen['image']))
                            <img
                                src="{{ $screen['image'] }}"
                                alt="{{ __($screen['alt'] ?? 'App screen') }}"
                                class="size-full object-cover"
                                loading="lazy"
                                decoding="async"
                            />
                        @else
                            {{-- Faux app screen built from tokens so it reads as a real app. --}}
                            <div class="flex size-full flex-col gap-3 bg-background p-4" aria-hidden="true">
                                {{-- Header bar --}}
                                <div class="flex items-center justify-between rounded-md bg-card p-3 shadow-sm">
                                    <span class="h-2 w-12 rounded-full bg-muted"></span>
                                    <span class="size-6 rounded-full bg-muted"></span>
                                </div>
                                {{-- Hero block --}}
                                <div class="flex h-24 flex-col justify-end gap-2 rounded-md bg-primary/10 p-3">
                                    <span class="h-2 w-2/3 rounded-full bg-primary/30"></span>
                                    <span class="h-2 w-1/2 rounded-full bg-primary/20"></span>
                                </div>
                                {{-- Content rows --}}
                                <div class="flex flex-1 flex-col gap-3">
                                    <div class="flex items-center gap-3 rounded-md bg-card p-2">
                                        <span class="size-8 shrink-0 rounded-md bg-muted"></span>
                                        <span class="flex flex-1 flex-col gap-2">
                                            <span class="h-2 w-3/4 rounded-full bg-muted"></span>
                                            <span class="h-2 w-1/2 rounded-full bg-muted"></span>
                                        </span>
                                    </div>
                                    <div class="flex items-center gap-3 rounded-md bg-card p-2">
                                        <span class="size-8 shrink-0 rounded-md bg-muted"></span>
                                        <span class="flex flex-1 flex-col gap-2">
                                            <span class="h-2 w-2/3 rounded-full bg-muted"></span>
                                            <span class="h-2 w-2/5 rounded-full bg-muted"></span>
                                        </span>
                                    </div>
                                </div>
                                {{-- CTA bar --}}
                                <div class="flex h-10 items-center justify-center rounded-md bg-primary">
                                    <span class="h-2 w-1/3 rounded-full bg-primary-foreground/80"></span>
                                </div>
                            </div>
                        @endif
                    </x-ui.iphone-mockup>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Controls: prev/next + dot indicators. phone-showcase's Alpine scope
         already uses carousel.previous/next/dots' own defaults (prev()/next()/
         canPrev()/canNext()/index/goTo), so only the visual classes need
         overriding to keep this control bar's inline (not overlay) look. --}}
    <div class="flex items-center gap-4">
        <x-ui.carousel.previous
            aria-label="{{ __('Previous screen') }}"
            class="!static !size-10 !bg-card hover:!bg-accent hover:!text-accent-foreground"
        />

        <x-ui.carousel.dots :count="count($screens)" class="gap-1" />

        <x-ui.carousel.next
            aria-label="{{ __('Next screen') }}"
            class="!static !size-10 !bg-card hover:!bg-accent hover:!text-accent-foreground"
        />
    </div>
</div>

/**
 * Phone showcase behavior — a center-emphasis ("coverflow") carousel of phones.
 *
 * Tracks the active index on the root component; the Blade scales/dims each
 * slide by comparing its position to `index`. Direction-aware: in RTL the track
 * shifts the opposite way and ArrowLeft/ArrowRight are swapped so navigation
 * always follows reading order. `loop` wraps past either end. Optional autoplay
 * runs only when the user has not requested reduced motion, and its timer is
 * cleared on teardown so unmounting mid-cycle never leaks.
 *
 * Self-registers on `alpine:init` so import order does not matter — import this
 * file once from your bundle (e.g. resources/js/ui/index.js).
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiPhoneShowcase', (config = {}) => ({
        index: 0,
        loop: config.loop ?? true,
        autoplay: config.autoplay ?? false,
        interval: config.interval ?? 5000,
        timer: null,

        init() {
            const reduced =
                window.matchMedia &&
                window.matchMedia('(prefers-reduced-motion: reduce)').matches;

            if (this.autoplay && !reduced && this.count() > 1) {
                this.timer = window.setInterval(() => {
                    this.next();
                }, this.interval);
            }
        },

        destroy() {
            if (this.timer !== null) {
                window.clearInterval(this.timer);
                this.timer = null;
            }
        },

        count() {
            return this.$refs.track ? this.$refs.track.children.length : 0;
        },

        isActive(i) {
            return this.index === i;
        },

        goTo(i) {
            const total = this.count();
            if (total === 0) {
                return;
            }
            this.index = Math.max(0, Math.min(i, total - 1));
        },

        next() {
            if (this.index < this.count() - 1) {
                this.index++;
            } else if (this.loop) {
                this.index = 0;
            }
        },

        prev() {
            if (this.index > 0) {
                this.index--;
            } else if (this.loop) {
                this.index = this.count() - 1;
            }
        },

        canPrev() {
            return this.loop || this.index > 0;
        },

        canNext() {
            return this.loop || this.index < this.count() - 1;
        },

        onKey(e) {
            const rtl = getComputedStyle(this.$el).direction === 'rtl';
            if (e.key === 'ArrowRight') {
                e.preventDefault();
                rtl ? this.prev() : this.next();
            } else if (e.key === 'ArrowLeft') {
                e.preventDefault();
                rtl ? this.next() : this.prev();
            }
        },
    }));
});