Extended Module

Layout

Container-level entrance effects that animate entire sections, grids, and panels into view. Apply to wrappers to reveal blocks of UI as cohesive units — click any card to replay.

gleam-layout.css container-level clip-path + scale 
<!-- Animate an entire section in -->
<section class="gleam layout-stack">
  <!-- all children animate in as one unit -->
</section>

<!-- Reveal a grid of cards -->
<div class="gleam layout-grid">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Cinematic split reveal -->
<div class="gleam layout-split">Content</div>

<!-- Dropdown/accordion expand -->
<div class="gleam layout-expand">Panel content</div>

Layout Effects — click to replay

layout-stack
Scale + rise entrance
layout-grid
Gentle scale fade-in
layout-split
Clip from center outward
layout-expand
ScaleY from top

Real-World Usage

Page Section Reveal

Use layout effects on scroll with data-gleam-scroll to reveal entire page sections as users scroll down — each section appears as a unified block.

<!-- Each section reveals as user scrolls -->
<section class="gleam layout-stack" data-gleam-scroll>
  <h2>Features</h2>
  <div class="card-grid">...</div>
</section>

<section class="gleam layout-split util-delay-200" data-gleam-scroll>
  <h2>Pricing</h2>
  ...
</section>

Accordion / Dropdown Panel

layout-expand is perfect for accordion panels and dropdown content. Add the class when the panel becomes visible, and it will smoothly expand from the top.

/* Trigger expand when accordion opens */
function openPanel(panel) {
  panel.classList.add('gleam', 'layout-expand');
  panel.style.display = 'block';

  // Remove classes after animation so it stays open
  panel.addEventListener('animationend', () => {
    panel.classList.remove('gleam', 'layout-expand');
  }, { once: true });
}

CSS Variable Reference

Timing
--duration600ms
--delay0ms
--easingcubic-bezier(0.34,1.1,0.64,1)
Fill Mode
--fillboth

Set --fill: none to allow element to return to original state after animation.