Mesh heading

A slow mesh of bright color with a sweeping light drifts inside the letters while the words rise into place one by one.

enhancer
gradient
mesh
headline
entrance
color
light
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Mesh heading example

Designed in the details

Code

It follows the controls above: change an option and the code changes with it.

<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>

<p class="m-demo-xl" data-motion="mesh-heading">Designed in the details</p>

import { MeshHeading } from "./motion/react/MeshHeading";

<MeshHeading>Your content</MeshHeading>

<script setup lang="ts">
import MeshHeading from "./motion/vue/MeshHeading.vue";
</script>

<template>
  <MeshHeading>Your content</MeshHeading>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "mesh-heading";
// run the entrance again: axi0Motion.play(el, "mesh-heading")

The wrappers: MeshHeading.tsx (React, TypeScript) and MeshHeading.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-speed`	`1`	How fast the colors drift (0 = still)
`data-motion-stagger`	`110`	Delay from one word to the next
`data-motion-colors`	auto	Five colors, comma separated (empty: a palette for the page's theme)
`data-motion-sheen`	`true`	A band of light passes over the letters
`data-motion-outline`	`false`	A fine outline in the text color around each letter

The text stays real text, readable and selectable; the color fill is paint only, so nothing moves around it. The default light-theme colors are deep enough to read on a light page. Under reduced motion the colors stay still and the words show at once. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.

Size

mesh-heading.js is 1.8 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.