Scroll Split Card

# Brok UI: Scroll Split Card (`scroll-split-card`)

A card whose two halves split apart as it scrolls through the viewport, revealing inner content between them. Driven purely by CSS scroll-timeline (view()).

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

## Install

```bash
php artisan ui:add scroll-split-card
```

## Usage

```blade
{{-- The split rides a view() timeline, so the card needs to travel through a
     scrollport: this stage scrolls on its own. --}}
<div class="relative mx-auto h-96 w-full max-w-md overflow-y-auto rounded-lg border border-border bg-background p-4 [scrollbar-width:thin]">
    <p class="mb-4 text-center text-xs text-muted-foreground">{{ __('Scroll inside this box') }}</p>
    <div class="h-72" aria-hidden="true"></div>
    <x-ui.scroll-split-card>
        <x-slot:top>
            <p class="text-sm font-medium uppercase tracking-wide text-muted-foreground">Scroll</p>
        </x-slot:top>

        <div class="space-y-1">
            <p class="text-lg font-semibold text-foreground">Built for the scroll.</p>
            <p class="text-sm text-muted-foreground">The halves drift apart as this card moves through the viewport, framing the message in the middle.</p>
        </div>

        <x-slot:bottom>
            <p class="text-sm font-medium uppercase tracking-wide text-muted-foreground">to reveal</p>
        </x-slot:bottom>
    </x-ui.scroll-split-card>
    <div class="h-80" aria-hidden="true"></div>
</div>
```

## Props

- `split` (string, default `40%`) — CSS length or percentage each half slides away from the seam.
- `as` (string, default `div`) — Tag rendered for the root: div, article, or section.
- `top` (mixed|null, default `null`) — Content rendered in the top panel.
- `bottom` (mixed|null, default `null`) — Content rendered in the bottom panel.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Revealing content between two card halves that slide apart as the element scrolls through the viewport, using pure CSS scroll-driven animation.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- Browser support for CSS scroll-driven animation is required everywhere; confirm the static-split fallback is acceptable before relying on the reveal.
- Needing the reveal to be user-controlled rather than scroll-driven; use sticky-cards or tilt-card instead.

## Anti-patterns

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

## Rules

- Use the `<brok:scroll-split-card>` tag (or `<x-ui.scroll-split-card>`) 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/scroll-split-card
- Registry JSON (files, props, contract): https://brokui.dev/r/open/scroll-split-card.json

@props([
    'split' => '40%',
    'as' => 'div',
    'top' => null,
    'bottom' => null,
])

@php
    // Pure CSS scroll-driven split. The two panels (top + bottom) ride an
    // `animation-timeline: view()` so their travel is tied to the element's
    // progress through the viewport — no JS, no scroll listeners.
    //
    // Keyframes (`ui-split-top`/`ui-split-bottom`) and the @supports +
    // prefers-reduced-motion gating live in ui.css, keyed on this data-slot.
    // `--split` is how far each half slides away from the seam.
    //
    // Regions: `top` + `bottom` props are the two panels (token bg-card);
    // the default slot is the revealed centre content that sits between them.
    $allowedTags = ['div', 'article', 'section'];
    $tag = in_array($as, $allowedTags, true) ? $as : 'div';
@endphp

<{{ $tag }}
    data-slot="scroll-split-card"
    style="--split: {{ $split }};"
    {{ $attributes->merge(['class' => 'relative isolate flex flex-col items-stretch rounded-lg']) }}
>
    <div data-slot="scroll-split-card-top" class="z-10 rounded-t-lg border border-b-0 border-border bg-card px-6 py-6 text-center text-card-foreground shadow-sm">
        {{ $top }}
    </div>

    <div data-slot="scroll-split-card-reveal" class="-my-px flex items-center justify-center px-6 py-4 text-center">
        {{ $slot }}
    </div>

    <div data-slot="scroll-split-card-bottom" class="z-10 rounded-b-lg border border-t-0 border-border bg-card px-6 py-6 text-center text-card-foreground shadow-sm">
        {{ $bottom }}
    </div>
</{{ $tag }}>