beta

Falling Text `<mv-falling-text>`

Texto em que cada palavra vira uma caixa rígida: quando acionado (ao aparecer, ao clicar, ao passar o mouse), as palavras explodem para longe do ponto de liberação, rodopiam, quicam e se amontoam no chão do bloco, e depois podem ser agarradas e arremessadas; quem usa o teclado solta e sacode a pilha com Enter. Física compartilhada de passo fixo, que dorme em repouso.

Categoria	Texto animado
Tipo	Web Component (`<mv-falling-text>`)
Status	beta
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

Instalação

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

Agente de IA com o servidor MCP do Marvelous UI: install_components({ slugs: ["falling-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Arquivos copiados (dependências incluídas): 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.

Uso

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis 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	Tipo	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	Tipo	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.