Text

Text Loop

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

lit
gsap

Preview

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

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/text-loop.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/text-loop.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/text-loop.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/text-loop.json

Usage

---
import "@/components/motion-kit/text-loop-element.ts";
---

<motion-text-loop
  texts='["Design","Develop","Deploy"]'
  interval="2000"
></motion-text-loop>

import "@/components/motion-kit/text-loop-element.ts";

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

<script setup>
import "@/components/motion-kit/text-loop-element.ts";
</script>

<template>
  <motion-text-loop
    :texts='JSON.stringify(["Design", "Develop", "Deploy"])'
    interval="2000"
  />
</template>

<script>
  import "@/components/motion-kit/text-loop-element.ts";
</script>

<motion-text-loop
  texts='["Design","Develop","Deploy"]'
  interval="2000"
></motion-text-loop>

<script type="module" src="/components/motion-kit/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`