Loki Text Effect

The iconic text animation from the Loki series intro.

ReactHTML

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/loki-text-effect-html.json

Usage

Define the text you want to display with Loki text Effect with class="loki-effect-text". Add data-value attribute to the element with the text you want to display, it must be the same as the text you want to display.

<p class="loki-effect-text" data-value="Loki">Loki</p>

Data Attributes

Data AttributeTypeDefaultRequiredDescription
data-valuestring-trueThe text to display and animate
data-velocity-fontnumber800falseInterval in ms for how often the font changes
data-velocity-movenumber1800falseInterval in ms for how often the position jitter is updated
Blend Mouse TrailerHacker Text