Text

Text Loop

Cycles through an array of text strings with a blurred vertical slide transition. Framework-agnostic Custom Element.

Preview

Cycles through an array of strings with a blurred vertical slide.

Attributes

Installation

pnpm dlx motion-blocks add text-loop

npx motion-blocks add text-loop

bunx --bun motion-blocks add text-loop

yarn dlx motion-blocks add text-loop

Usage

---import "@/components/motion-blocks/text-loop-element.ts";--- <motion-text-loop  texts='["Design","Develop","Deploy"]'  interval="2000"></motion-text-loop>

import "@/components/motion-blocks/text-loop-element.ts"; export default function Page() {  return (    <motion-text-loop      texts='["Design","Develop","Deploy"]'      interval="2000"    />  );}

<script setup>import "@/components/motion-blocks/text-loop-element.ts";</script> <template>  <motion-text-loop    :texts='JSON.stringify(["Design", "Develop", "Deploy"])'    interval="2000"  /></template>

<script>  import "@/components/motion-blocks/text-loop-element.ts";</script> <motion-text-loop  texts='["Design","Develop","Deploy"]'  interval="2000"></motion-text-loop>

<script type="module" src="/components/motion-blocks/text-loop-element.js"></script> <motion-text-loop  texts='["Design","Develop","Deploy"]'  interval="2000"></motion-text-loop>

API Reference

Attribute	Type	Default
`texts`	`string[]`	`[]`
`interval`	`number`	`2000`