Bolt Design System

Layout Mask

This property adds a mask in the shape of a chess piece that animates and reveals interior content when scrolled to.

Demo

Scroll down to reveal the animation

A history of
AI innovation

Over 40 years ago, Alan Trefler developed some of the first AI agents capable of playing chess at an elite level.

He applied the same principles to tech and business to unlock radical agility as never before.

Twig

{% include '@bolt-layouts-layout/layout.twig' with {
  mask: true,
  ...
} only %}

HTML

<bolt-layout mask>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>