Layers & typography

Any element inside a slide can animate when the slide becomes active. No editor, no timeline UI: one attribute.

<style>
  body { padding: 0; }
  .copy { position: absolute; left: 7%; bottom: 14%; right: 7%; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
  .copy small { font: 600 12px/1 system-ui; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
  .copy h2 { font-size: clamp(30px, 6vw, 62px); line-height: 1.02; letter-spacing: -.03em; margin: 12px 0; }
  .copy p { margin: 0 0 18px; max-width: 520px; opacity: .9; }
  .copy a { display: inline-block; background: #fff; color: #111; padding: 10px 18px; border-radius: 99px; text-decoration: none; font-weight: 600; text-shadow: none; }
</style>
<insigne-slider effect="fade" autoplay="6000" ken-burns="alternate">
  <div>
    <img data-bg src="https://picsum.photos/id/1039/1800/1100" alt="Waterfall in a forest">
    <div class="copy">
      <small data-in="fade">Chapter one</small>
      <h2 data-in="chars-up">Headlines letter by letter</h2>
      <p data-in="rise" data-delay="500">Paragraphs rise as a block, after the title.</p>
      <a href="#" data-in="rise" data-delay="700">Read more</a>
    </div>
  </div>
  <div>
    <img data-bg src="https://picsum.photos/id/1044/1800/1100" alt="Rocky coast">
    <div class="copy">
      <small data-in="fade">Chapter two</small>
      <h2 data-in="lines-up">Or line by line, revealed from a mask</h2>
      <p data-in="words-blur" data-split="words">Each word comes into focus on its own.</p>
    </div>
  </div>
</insigne-slider>

Loading preview…

Live previewEdit in playground →

Attributes

Attribute	Meaning
data-in="recipe"	Entrance. Empty value = the layerIn option (default rise).
data-out="exit"	Exit when the slide leaves: reverse (default: the entrance backwards, faster), fade, up, down, left, blur, or none.
data-delay="ms"	Start time. Without it, layers follow each other by 110 ms in DOM order.
data-split="lines | words | chars | none"	Override how the text is split. Headings use the recipe's split; other elements animate as a block unless you set this.

Recipes

Kind	Recipes
Rise & drop	rise, drop, slide-left, slide-right, float
Masks	mask, lines-up, chars-up
Focus	fade, blur, words-blur, chars-blur
3D & skew	flip, chars-flip, skew, zoom, chars-scale
Expressive	stagger, tracking, typewriter, glitch-text, chars-wave

The full list with timings is in the recipes reference. Images have their own recipes for the background of the entering slide (imageIn): develop, focus, spotlight, rise, tint, flicker, depth-zoom, breathe.

Your own recipes

A recipe is data: a start frame, an end frame, how to split and how much to stagger.

new InsigneSlider(el, {
  recipes: {
    'soft-rise': {
      split: 'words', mask: true, stagger: 45,
      in: [{ y: '110%', o: 0 }, { y: 0, o: 1, d: 900, e: 'expo.out' }],
      hover: [{ y: 0 }, { y: '-8%', d: 260, e: 'power2.out' }],
    },
  },
});

<h2 data-in="soft-rise">Your own timing</h2>

Frame fields: o opacity · x y z (px, % or em) · s sx sy scale · r rx ry rotate (deg) · skx sky · blur · gray contrast bright sepia sat hue · clip: [top, right, bottom, left] (%) · d duration (ms) · e ease. Any number can be { "base": 30, "phone": 12 }.

How it stays smooth

• Only transform, opacity, filter and clip-path animate, on the compositor, via the Web Animations API.
• will-change is set only while an animation runs.
• Inactive slides are parked with plain styles — no running animations off screen.
• Split text keeps an aria-label with the full sentence; the pieces are hidden from screen readers.
• The layer engine (~9 KB) loads only when a slide contains data-in.