Layout Mask

The Layout component supports an animated mask reveal effect that uses an SVG shape to dramatically reveal content as the user scrolls. This animation is powered by the Motion library and provides smooth, performant transitions.

Usage

Add the data-bolt-animation attribute and choose one of the mask specification methods:

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  background: background,
  attributes: {
    'data-bolt-animation': 'layout-mask-animation',
    'data-bolt-mask-icon': 'chess-piece-solid',
  }
} only %}

Or in HTML:

<bolt-layout data-bolt-animation="layout-mask-animation" data-bolt-mask-icon="chess-piece-solid">
  <bolt-layout-item>
    <!-- Your content -->
  </bolt-layout-item>
</bolt-layout>

Note: Not every icon from the Bolt library works well as a mask – generally, solid, monomorphic icons are safest. Icons with internal fill areas (like calendar-solid) may reduce the reveal effect.
Important Notes: Animation Trigger: Use data-bolt-animation="layout-mask-animation" to enable the mask animation plugin. Mask Icons Options: You can specify a custom mask icon using one of three methods: Icon Slug (from @bolt/elements-icon): data-bolt-mask-icon="chess-piece-solid"
Available icon slugs: chess-piece-solid, heart-solid, cloud-solid, etc.
Note: Solid, monomorphic icons work best. Avoid icons with internal fill areas. External SVG File: data-bolt-mask-src="/path/to/custom-icon.svg"
Load an SVG from an external URL or file path. Inline SVG Markup: data-bolt-mask-svg='<svg>...</svg>'
Embed SVG markup directly in the attribute. Animation Behavior: Scroll Enter: Animation triggers when the layout is fully visible in the viewport Mask Expansion: The SVG mask expands from 10% to full viewport width using Motion library's requestAnimationFrame Content Reveal: Layout items fade in and slide up with a spring-based bounce blur effect and stagger delay Video Button: If present, the video toggle button appears near the end of the mask animation Scroll Exit: Animation reverses when the bottom of the section reaches the bottom of the viewport (scrolling down) Stays Open: Animation stays open while scrolling down through the section Reduced Motion: Respects prefers-reduced-motion user preference for accessibility Responsive: Different animation timings for mobile (faster) and desktop (slower) Technical Details: Built with Motion library (not GSAP) Uses smooth requestAnimationFrame-based mask animation Spring-based bounce blur effect for layout items Automatic initialization via animation framework Mobile breakpoint: < 500px (faster animations) Desktop: slower, more dramatic animations Complete Example: 
{% set background %}
  {% include '@bolt-components-background/background.twig' with {
    opacity: 'heavy',
    fill: 'gradient',
    items: [background_image]
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Your headline here'
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Your body content here'
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  background: background,
  padding_top: 'large',
  padding_bottom: 'large',
  align_items: 'center',
  attributes: {
    class: 't-bolt-dark u-bolt-text-align-center',
    'data-bolt-animation': 'layout-mask-animation',
    'data-bolt-mask-icon': 'chess-piece-solid',
  }
} only %}
 Features: Flexible layout container Animated mask reveal effect with Motion library Support for custom SVG masks (icon slug, external file, or inline) Background integration with video support Responsive design (optimized for mobile and desktop) Accessibility support (reduced motion) Scroll-triggered animations Spring-based bounce blur effects
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.

Scroll up to reveal the animation

Twig
{% include '@bolt-layouts-layout/layout.twig' with {
  background: background,
  content: layout_items,
  attributes: {
    'data-bolt-animation': 'layout-mask-animation',
    'data-bolt-mask-icon': 'chess-piece-solid',
    // Or use external SVG:
    // 'data-bolt-mask-src': '/path/to/icon.svg',
    // Or use inline SVG:
    // 'data-bolt-mask-svg': '<svg>...</svg>',
  }
} only %}
HTML
<bolt-layout data-bolt-animation="layout-mask-animation" data-bolt-mask-icon="chess-piece-solid">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>