Reveal

A thin Blade wrapper that animates its slot content into view using one of 11 presets. Drives the underlying wirekitAnimate Alpine helper. Honors prefers-reduced-motion: reduce (snaps to final state, no motion).

#Basic Usage

<x-wirekit::reveal preset="slide-up-in" duration="slow" style="--wk-stagger-step: 0ms; animation-duration: 1200ms;">
    <x-wirekit::card>
        <x-wirekit::card.body>I slide into view on first viewport intersection. Click the replay button at the top-right of the preview to re-trigger the animation.</x-wirekit::card.body>
    </x-wirekit::card>
</x-wirekit::reveal>

#All 11 Presets

Pick a preset from the matrix. Each has both an -in and -out variant; the Reveal component defaults to -in if you omit the suffix.

<x-wirekit::reveal preset="fade-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>fade-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

<x-wirekit::reveal preset="slide-up-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>slide-up-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

<x-wirekit::reveal preset="scale-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>scale-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

<x-wirekit::reveal preset="zoom-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>zoom-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

<x-wirekit::reveal preset="flip-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>flip-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

<x-wirekit::reveal preset="bounce-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>bounce-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

<x-wirekit::reveal preset="spring-in" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>spring-in</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

#Preset Aliases

Four short-form aliases map to the canonical directional slide presets — handy when porting from fade-up / fade-down style conventions used in other UI libraries:

{{-- These two reveals render identically: --}}
<x-wirekit::reveal preset="fade-up">...</x-wirekit::reveal>
<x-wirekit::reveal preset="slide-up-in">...</x-wirekit::reveal>

The aliases are resolved at component-render time; the underlying Alpine helper still sees the canonical slide-*-in preset name.

#Triggers

The trigger prop controls when the animation fires:

<x-wirekit::reveal preset="bounce-in" trigger="click" duration="slow" :once="false" style="--wk-stagger-step: 0ms; width: fit-content;">
    <x-wirekit::card><x-wirekit::card.body>Click me to bounce</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

#Duration

Three duration tokens — fast (150ms), normal (300ms, default), slow (600ms). Override via the duration prop:

<x-wirekit::reveal preset="fade" duration="slow">…</x-wirekit::reveal>

#Delay

Hold the entrance for a beat before it begins. Useful for sequencing cards or letting a hero-section heading land before the supporting copy follows. Five tokens map to themeable CSS variables:

<x-wirekit::reveal preset="slide-up" delay="md">…</x-wirekit::reveal>

Pass an integer for a one-off custom rhythm (raw milliseconds):

<x-wirekit::reveal preset="fade" :delay="125">…</x-wirekit::reveal>

The delay collapses to 0ms under prefers-reduced-motion: reduce so users with the OS preference set never wait through the rhythm before the snap-to-final.

<x-wirekit::reveal preset="slide-up" delay="lg" duration="slow" style="--wk-stagger-step: 0ms">
    <x-wirekit::card><x-wirekit::card.body>I land 300ms after the page settles.</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::reveal>

#Direct Alpine helper

For non-Blade contexts or finer control, use the wirekitAnimate helper directly:

<div x-data="wirekitAnimate('slide-up-in', { trigger: 'click', once: false })" data-replayable="true">
    Click me to re-animate
</div>

The helper is registered automatically by the full WireKit JS bundle; for the core bundle, import resources/js/components/animate.js manually.

#Props

#Slots

#Accessibility

• Reduced motion: when prefers-reduced-motion: reduce is set at the OS level, the global @media block in wirekit.css snaps animation-duration to 0.01ms — element appears in final state immediately, no motion.
• No focus stealing: the helper does NOT focus() the element on reveal. Focus management stays in developer control.
• Reveal-on-scroll does not auto-announce: SR users hear the slot content normally as they navigate; the visual reveal is purely sighted-user enhancement.
• Pass aria-live on the wrapper if your slot content carries dynamic announcements:

<x-wirekit::reveal preset="slide-up" aria-live="polite">
    <p>{{ $statusMessage }}</p>
</x-wirekit::reveal>

• WCAG 2.3.3 (Animation from Interactions): all animations are opt-in via this component or the wk-animate-* utility classes. Developers who don't use them see no animations.

#Keyboard Interaction

This component is purely structural. Keyboard interaction is delegated to its slot content.

When trigger="click", the host <div> becomes the click target — wrap interactive content (buttons, links) inside the slot rather than relying on the wrapper for activation.

#Pitfalls

• Don't animate above-the-fold content with viewport trigger. It's intersecting from page load, so there's no "scroll into view" event — the animation fires immediately with no perceived motion. Use trigger="manual" + dispatch on DOMContentLoaded if you want a hero-section reveal.
• Don't combine with components that own their own transitions. <x-wirekit::modal>, <x-wirekit::drawer>, <x-wirekit::toast-region>, <x-wirekit::tooltip>, <x-wirekit::dropdown>, <x-wirekit::popover> all have built-in entrance transitions; wrapping them in Reveal causes a double-motion conflict.
• Don't use preset="fade-out" as a default. Out-presets fade content TO opacity 0 — the element is invisible at the end. Use them only when you intend to remove the element after the animation (e.g. via Livewire wire:replace or x-show).

#Design Tokens

#See Also

• Animations reference — full token table + preset gallery
• <x-wirekit::stat animate> — value count-up animation (separate plugin)
• WAI-ARIA APG: Animation from Interactions (WCAG 2.3.3)