Loki Text Effect

The iconic text animation from the Loki series intro.

Loki

Installation

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

import { LokiTextEffect } from "@/components/(react)/loki-text-effect";

<LokiTextEffect text="Loki" />

Prop	Type	Default	Required	Description
`text`	`string`	-	true	The text to display and animate
`velocityFont`	`number`	`800`	false	Interval in ms for how often the font changes
`velocityMove`	`number`	`1800`	false	Interval in ms for how often the position jitter is updated
`className`	`string`	-	false	Optional classnames for according to match your setup

On This Page

Contribute