# Looping motion: a voice waveform

> MotionLoop from texuli/motion/loop: five waveform bars that wave while a fictional voice note plays and a live dot that pulses, on the motion tokens.

Language: en
Canonical: https://texuli.com/examples/texuli-motion-loop/
Markdown: https://texuli.com/examples/texuli-motion-loop.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

MotionLoop from texuli/motion/loop: five waveform bars that wave while a fictional voice note plays and a live dot that pulses, on the motion tokens. Static at rest under reduced motion or level none.

[Looping motion: a voice waveform](https://texuli.com/examples/texuli-motion-loop/)

`texuli-motion-loop` · `texuli/MotionLoop`

 texuli motion

 Props
- `duration`
- `playing`
- `preset`
- `stagger`

Live example loads in an isolated same-origin preview frame.

Source (motion-loop/MotionLoopDemo.svelte)

```
<script lang="ts">
import { Button } from 'texuli/button';
import { MotionLoop } from 'texuli/motion/loop';

let playing = $state(true);
</script>

<section data-example="texuli-motion-loop" aria-labelledby="motion-loop-demo-title">
  <h2 id="motion-loop-demo-title">Looping motion</h2>

  <h3>Voice note</h3>
  <div class="note">
    <MotionLoop preset="wave" {playing} stagger="fast" class="waveform" aria-hidden="true">
      <span class="bar bar-1"></span>
      <span class="bar bar-2"></span>
      <span class="bar bar-3"></span>
      <span class="bar bar-4"></span>
      <span class="bar bar-5"></span>
    </MotionLoop>
    <p class="status" role="status">{playing ? 'Playing: Harbor standup note' : 'Paused'}</p>
    <Button variant="outline" size="sm" aria-pressed={playing} onclick={() => (playing = !playing)}>
      {playing ? 'Pause' : 'Play'}
    </Button>
  </div>

  <h3>Live indicator</h3>
  <p class="live">
    <MotionLoop preset="pulse" aria-hidden="true"><span class="dot"></span></MotionLoop>
    Ada Example is speaking
  </p>
</section>

<style>
  .note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tx-space-4);
  }

  .note :global(.waveform) {
    display: inline-flex;
    align-items: center;
    gap: var(--tx-space-1);
    block-size: var(--tx-space-8);
  }

  .bar {
    display: block;
    inline-size: var(--tx-space-1);
    border-radius: var(--tx-shape-radius-full);
    background-color: var(--tx-primary);
  }

  .bar-1,
  .bar-5 {
    block-size: 40%;
  }

  .bar-2,
  .bar-4 {
    block-size: 75%;
  }

  .bar-3 {
    block-size: 100%;
  }

  .status {
    margin: 0;
    color: var(--tx-muted-foreground);
  }

  .live {
    display: flex;
    align-items: center;
    gap: var(--tx-space-2);
  }

  .dot {
    display: block;
    inline-size: var(--tx-space-3);
    block-size: var(--tx-space-3);
    border-radius: var(--tx-shape-radius-full);
    background-color: var(--tx-success);
  }
</style>
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)