Cloak

The Cloak utility manages page initialization visibility, resolving Flash of Unstyled Content (FOUC) and providing elegant, smooth 1-second fade-in/fade-out transitions for any HTML element.

1. Automatic Page Load Cloak

This element started with class="cloak". It automatically faded in smoothly after the framework booted.

🎉 FOUC Prevented! This container remained hidden until all styles and assets were completely loaded, then faded in automatically.

2. Manual JavaScript Triggering

Click the actions below to trigger smooth transitions manually using the Cloak.show() and Cloak.hide() methods.

💡 Manual Control Box: I fade in and out smoothly over 1.0 second using JavaScript triggers!

<!-- 1. Automatic FOUC Prevention -->
<div class="cloak">
    This will fade-in automatically when the page loads.
</div>

<!-- 2. Manual JavaScript Triggering -->
<!-- Add data-cloak-manual="true" to prevent automatic load-time fade-in -->
<div id="myElement" class="cloak" data-cloak-manual="true">
    Interactive container content...
</div>

<!-- Control Buttons -->
<button class="btn success" onclick="Cloak.show(document.getElementById('myElement'))">
    Fade In
</button>
<button class="btn alert" onclick="Cloak.hide(document.getElementById('myElement'))">
    Fade Out
</button>

CSS Class Specifications

Class Name	Applied Style / Behavior
`cloak`	Sets `opacity: 0` and disables pointer interaction. Useful to set initially in HTML to hide layout shifts.
`remove-cloak`	Transitions opacity from 0 to 1 over 1.0s, turning pointer interactions back on.
`add-cloak`	Transitions opacity from 1 to 0 over 1.0s, disabling pointer interactions.

JavaScript API Reference

Cloak.show(element): Removes add-cloak class, appends remove-cloak, and registers a listener to safely strip cloak classes when opacity reaches 1.
Cloak.hide(element): Removes remove-cloak class, appends add-cloak, and registers a listener to lock elements inside a cloak state after fading out.