Extended Module

Composite

Multi-property animations that animate opacity, transform, filter, and letter-spacing simultaneously. Premium cinematic effects for hero content. Click any card to replay.

gleam-composite.css 5 effects multi-property hero-grade 
<!-- Dramatic entrance for hero headings -->
<h1 class="gleam entrance-cinematic">Big moment</h1>

<!-- Slap-in for bold UI elements -->
<div class="gleam entrance-slap">BOOM</div>

<!-- Dramatic exit before page transition -->
gleam.animate('#hero', 'exit-dramatic')
  .then(() => router.push('/next'));

Composite Entrances — click to replay

entrance-cinematic — scale + blur + letter-spacing

Cinematic

entrance-dramatic — scale + rotate + blur
Dramatic
entrance-slap — scale 3× → bounce to 1×
SLAP

Composite Exits — click to replay

exit-cinematic — expand + blur out

Farewell

exit-dramatic — scale up + rotate + blur
Explosion

Page Transition Pattern

Chain composite exit + entrance for cinematic page-to-page transitions.

async function navigate(url) {
  // Dramatic exit of current page
  await gleam.animate('main', 'exit-dramatic');

  // Load new content, then cinematic entrance
  await loadPage(url);
  gleam.animate('main', 'entrance-cinematic');
}