Reveal

reveal is a utility class for animating elements from a hidden state into their final state.

By default, the utility sets opacity: 0 and keeps transform-related properties ready for transition. When the element receives the data-in attribute, it becomes fully visible and all transform overrides are cleared.

This utility does not control visibility on its own. It is usually paired with the Reveal component, which adds data-in when the element enters the viewport.

How It Works

1. Add the reveal class to the element.
2. Optionally combine it with transform utilities such as translate-y-*, scale-*, or rotate-*.
3. Once data-in is present, the element transitions into its final visible state.

Notes

• CSS fully handles the animation.
• The utility includes a reduced-motion, no-scripting, and print fallback, where content stays visible.
• The usual trigger for data-in is the Reveal component.
• You can customize the transition with utilities such as ease-*, duration-*, or delay-*.

Source

• utils/reveal.css

Example

<section class="grid grid-cols-container" data-controller="x-reveal">
    <h1
        class="x-heading lg translate-y-8 ease-[cubic-bezier(1,-0.4,0.35,0.95)] reveal"
        data-x-reveal-target="item"
    >
        Hello world!
    </h1>

    <div
        class="x-text mb-4 translate-y-5 ease-[cubic-bezier(1,-0.4,0.35,0.95)] reveal"
        data-x-reveal-target="item"
    >
        Want to dig deeper into Newlogic UI?
    </div>
</section>