Tumble

The words break loose and tumble into a pile you can drag and throw; click the pile and they fly home.

enhancer
physics
pointer
drag
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

Tumble example

Some sentences are built to last. This one falls apart on contact.

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="tumble" data-motion-mark="falls apart">Some sentences are built to last. This one falls apart on contact.</p>

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

<Tumble>Your content</Tumble>

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

<template>
  <Tumble>Your content</Tumble>
</template>

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

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

Options

Attribute	Default	What it does
`data-motion-trigger`	`hover`	What makes the words fall
`data-motion-mark`	auto	Words to color (spaces or commas between them)
`data-motion-color`	`#f6a04d`	Color of the marked words
`data-motion-area`	`parent`	Where they fall: the parent's box or the element's own
`data-motion-gravity`	`1`	Gravity
`data-motion-again`	`0`	Fly home on their own after (0 = on a click)

The words only move with transforms, so the page never reflows and screen readers read the sentence in order whatever the pile looks like. Every word comes home on a click (or after the time you set), and one more click drops them again. Reduced motion keeps the words in place. The physics runs only while something moves and stops off screen and in hidden tabs.

Size

tumble.js is 3.1 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.