Loki Text Effect

atlas-ui/loki-text-effect-html

FreeUtility

The iconic text animation from the Loki series intro using HTML, CSS, JavaScript and Motion.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

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

Source

registry/html/atlasui/loki-text-effect/index.htmlatlasui.dev/r/loki-text-effect-html.json

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Loki Text Effect - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <p class="loki-effect-text" data-value="Loki">Loki</p>
11  </body>
12 
13  <script type="module" src="script.js"></script>
14</html>

What it pulls in

npm packages

motion

Files it writes

registry/html/atlasui/loki-text-effect/index.html
registry/html/atlasui/loki-text-effect/style.css
registry/html/atlasui/loki-text-effect/script.js
registry/fonts/fontOne.woff2
registry/fonts/fontTwo.woff2
registry/fonts/fontThree.woff2
registry/fonts/fontFour.woff2
registry/fonts/fontFive.woff2
registry/fonts/fontSix.woff2
registry/fonts/fontSeven.woff2

More from atlas-ui

All 99 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Mobile Navbaranimated-mobile-navbar-html	atlas-ui	Utilities	Free	1 dep · 3 files
Blend Mouse Trailerblend-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Blob Mouse Trailerblob-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Box Revealbox-reveal-html	atlas-ui	Utilities	Free	1 dep · 3 files
Cascade Textcascade-text-html	atlas-ui	Utilities	Free	1 dep · 3 files
Dot And Circle Mouse Trailerdot-and-circle-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Fancy Theme Togglefancy-theme-toggle-html	atlas-ui	Utilities	Free	2 deps · 3 files
Hacker Texthacker-text-html	atlas-ui	Utilities	Free	no deps · 3 files