Dust type

The text gathers out of drifting dust; the pointer scatters it and a click blows it apart before it settles back.

enhancer
canvas
particles
pointer
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

Dust type example

Future interfaces

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="dust-type">Future interfaces</p>

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

<DustType>Your content</DustType>

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

<template>
  <DustType>Your content</DustType>
</template>

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

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

Options

Attribute	Default	What it does
`data-motion-density`	`18`	Dust per letter height
`data-motion-size`	`1.8`	Grain size
`data-motion-radius`	`80`	Reach of the pointer
`data-motion-color`	`#f6a04d`	Color of moving grains

The words stay real, selectable text in their places (painted transparent while the dust shows them) and the canvas is aria-hidden, so nothing reflows and readers hear the text once. Text on screen at load starts gathered; below the fold it gathers as it arrives. Reduced motion shows the plain text. The frame loop stops off screen and in hidden tabs.

Size

dust-type.js is 2.0 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.