Outline draw

The letters' outlines draw themselves on, word after word, then flood with color.

enhancer
entrance
svg
stroke
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

Outline draw example

Draw attention to it

Code

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

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<p class="demo-big" data-motion="outline-draw">Draw attention to it</p>

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

<OutlineDraw>Your content</OutlineDraw>

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

<template>
  <OutlineDraw>Your content</OutlineDraw>
</template>

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

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

Options

Attribute	Default	What it does
`data-motion-duration`	`1700`	Time to draw a word
`data-motion-fill`	`700`	Time to flood with color
`data-motion-stagger`	`140`	Delay between words
`data-motion-width`	`1.4`	Outline width
`data-motion-color`	`#f6a04d`	Outline color

The words stay real, selectable text in their places; while the outlines draw, an aria-hidden drawing sits exactly over them and is removed when the color has flooded in, so nothing reflows. Text already on screen at load waits for a replay; reduced motion shows the text as it is. The animation pauses off screen and in hidden tabs.

Size

outline-draw.js is 1.3 KB gzip, with text-kit.js 2.6 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.