FreeVideo
AI answer where a brand climbs the ranking
- 570570 downloads
- 126126 likes
- 226226 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Level-up banner with wave letters v1.0.0
Use this resource to animate a success message letter by letter
New
- 436 downloads
- 223 likes
- 214 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install wave-text-level-up-bannerFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent splits the text into one tag per letter and staggers each animation start. The result is a continuous wave with a yellow text shadow. You get a simple success message to reuse with another word.
Mostly picked by
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
Ranked bars racing over time
- 312312 downloads
- 110110 likes
- 201201 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Vertigo effect: dolly shot offset by zoom
- 503503 downloads
- 107107 likes
- 134134 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Image carousel on a circle, style 1
- 489489 downloads
- 129129 likes
- 213213 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Image carousel on a circle, style 2
- 485485 downloads
- 222222 likes
- 232232 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Image carousel on a circle, style 3
- 486486 downloads
- 184184 likes
- 200200 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Image carousel on a circle, style 4
- 341341 downloads
- 165165 likes
- 129129 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
FreeVideo
Image carousel on a circle, style 5
- 549549 downloads
- 142142 likes
- 127127 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- README.md: step-by-step integration guide
- Notifications/newbiners_warm-deer-90.html: the component HTML and CSS, ready to copy
- The variables and selectors to edit for colours and size
Good fit for
- Congratulation message in a course
- Animated title for a giveaway page
- Success banner in an app
Not for
- Long text (one tag per letter gets heavy)
- Pages that should avoid continuous animation
Tags
- notification
- animated text
- wave
- css
- success
About
You say
"Show the wave banner from the resource with the word "WELL DONE!" at the end of my quiz."
Component published by newbiners on Uiverse under the MIT license, documented by PalateKit.
Show moreShow less
Prerequisites
- You bring
- The word or short phrase to animate and The banner colours
How to use it
- Give the resource to your coding agent
- Ask it to insert the component where you want it and adapt text and colours
- Open the page and check hover and mobile rendering
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- Notifications/newbiners_warm-deer-90.html1.9 KB
- README.md0.8 KB
Origin and licence
Modified by PalateKit
- Author
- newbiners
- Source
- github.com/uiverse-io/galaxy/tree/adbd2adde0a299a3956ea288fb444ec01891ca41/Notifications/newbiners_warm-deer-90.html
- Licence
- MIT
Notice
Version modifiée de « newbiners_warm-deer-90 » (newbiners, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
How do I add it to my site?
Copy the HTML and the CSS block into your page, or the CSS into your stylesheet. No JavaScript is needed.
How do I customise it?
Edit: one <span> per letter: add or remove them to fit your word, adding 0.25s of animation-delay per letter; colours are in .notification (background, text-shadow). To respect visitors sensitive to motion, wrap the animations in an @media (prefers-reduced-motion: no-preference) rule.