bêta

Falling Text `<mv-falling-text>`

Un texte dont chaque mot devient une boîte rigide : au déclenchement (entrée dans la vue, clic, survol), les mots sont projetés loin du point de libération, culbutent, rebondissent et s’empilent sur le fond du bloc, puis peuvent être attrapés et lancés ; au clavier, Entrée libère les mots et secoue la pile. Physique partagée à pas fixe, qui se met en veille au repos.

Catégorie	Texte animé
Type	Web Component (`<mv-falling-text>`)
Statut	bêta
Keywords	safe-rewrite, physics, gravity, words, drag, toss, playful, hero, tags

When to use

A playful hero or 'about' section should drop its words with gravity when triggered
Skills or tags shown as pills should tumble into a pile users can grab and toss

Avoid when

A list of cards should be draggable and restack with physics → use Physics Stack instead
The text must stay readable after the effect; the words end up as a jumbled pile
Serious or data-dense contexts where playful physics distracts from the content

Installation

node scripts/add.mjs falling-text --out ./src/marvelous

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["falling-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, core/physics.js, components/falling-text/falling-text.js, components/falling-text/falling-text.css.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<div style="display:grid;gap:1rem;width:100%;max-width:760px">
  <mv-falling-text id="mv-falling-text-demo" trigger="click" highlight="gravity, tumble, pile" style="border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-bg-subtle)">
    Click here: the words give in to gravity, tumble, bounce and pile up. Then grab them and toss them around.
  </mv-falling-text>
  <div style="display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center">
    <mv-falling-text data-variant="pill" trigger="view" highlight="TypeScript, Figma" style="--mv-falling-text-height:11rem;border:1px dashed var(--mv-border-strong);border-radius:var(--mv-radius-xl)">
      TypeScript CSS Figma Accessibility WebGL Animation Tokens Node.js Svelte
    </mv-falling-text>
    <button class="mv-button" data-variant="outline" id="mv-falling-text-demo-reset">Replay</button>
  </div>
</div>
<script type="module">
  const el = document.getElementById("mv-falling-text-demo");
  document.getElementById("mv-falling-text-demo-reset").addEventListener("click", () => {
    for (const t of document.querySelectorAll("mv-falling-text")) {
      if (!t.fallen) continue;
      t.reset();
      if (t !== el) setTimeout(() => t.drop(), 900);
    }
  });
</script>

API

Attributes

Name	Type	Default	Description
`trigger`	view \| click \| hover \| load \| manual	`view`	What releases the words (click: the words burst from the click point, and Enter or Space works too; manual: call drop()).
`highlight`	string		Comma-separated words to emphasize (case-, accent- and punctuation-insensitive).
`gravity`	number	`1`	Gravity multiplier.
`bounce`	number	`0.35`	Bounciness (0-1).
`friction`	number	`0.4`	Friction between words.
`data-variant`	pill		Every word becomes a pill (tags, skills).
`data-state`	fallen		Set by the component once the words are released.

Properties

Name	Type	Description
`fallen`	boolean	True once the words are released (read-only).

Methods

Name	Description
`drop()`	Releases the words.
`reset()`	Brings the words back into place (spring animation), ready to fall again.

Events

Name	Description
`mv-drop`	The words were just released.
`mv-settle`	The pile is at rest (the loop stops).
`mv-reset`	The words are back in place.

CSS classes

Name	Description
`mv-falling-text-word`	Each word (data-highlight on emphasized words, data-dragging while grabbed).

CSS variables

Name	Default	Description
`--mv-falling-text-height`	`16rem`	Block height (the floor where the words pile up).
`--mv-falling-text-highlight`	`var(--mv-accent-fg)`	Color of emphasized words.

Accessibility

The full text is still read as one piece (visually hidden copy); the animated words are aria-hidden. In click mode the block is focusable with role=button until the words fall: Enter or Space releases them, then shakes the pile. Reduced motion: the pile is computed instantly, with no animation; mouse grabbing still works. Without JS: a normal paragraph.