Letter Swap

atlas-ui/letter-swap-html-demo

FreeExample

Example of Letter Swap that swaps the letters vertically on hover built with 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/letter-swap-html-demo.json

Source

registry/html/examples/letter-swap-html-demo/index.htmlatlasui.dev/r/letter-swap-html-demo.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>Letter Swap Html Demo - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <span class="letter-swap" data-text="Hover me!">Hover me!</span>
11 
12    <span class="letter-swap" data-text="Feature, not a bug" data-reverse
13      >Feature, not a bug</span
14    >
15 
16    <span
17      class="letter-swap"
18      data-text="Elegant chaos in production"
19      data-reverse
20      data-stagger-from="last"
21      >Elegant chaos in production</span
22    >
23 
24    <span
25      class="letter-swap"
26      data-text="Fast, fragile, fantastic"
27      data-stagger-from="center"
28    >
29      Fast, fragile, fantastic
30    </span>
31 
32    <span
33      class="letter-swap"
34      data-text="Deploy now, panic later"
35      data-stagger-duration="0"
36    >
37      Deploy now, panic later
38    </span>
39  </body>
40  <script type="module" src="script.js"></script>
41</html>

What it pulls in

npm packages

motion

Other registry items

https://atlasui.dev/r/letter-swap-html.json

Files it writes

registry/html/examples/letter-swap-html-demo/index.html
registry/html/examples/letter-swap-html-demo/style.css
registry/html/examples/letter-swap-html-demo/script.js

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 Navbar Demoanimated-mobile-navbar-demo	atlas-ui	Examples	Free	no deps
Animated Mobile Navbaranimated-mobile-navbar-html-demo	atlas-ui	Examples	Free	1 dep · 3 files
Animated Mobile Navbar Side Exampleanimated-mobile-navbar-side-example	atlas-ui	Examples	Free	no deps
Blend Mouse Trailer Demoblend-mouse-trailer-demo	atlas-ui	Examples	Free	no deps
Blend Mouse Trailerblend-mouse-trailer-html-demo	atlas-ui	Examples	Free	no deps · 3 files
Blob Mouse Trailer Demoblob-mouse-trailer-demo	atlas-ui	Examples	Free	no deps
Blob Mouse Trailerblob-mouse-trailer-html-demo	atlas-ui	Examples	Free	no deps · 3 files
Box Reveal Demobox-reveal-demo	atlas-ui	Examples	Free	no deps