FreeWeb
Grey 3D button with hover effect by cssbuttons-io
- 386386 downloads
- 243243 likes
- 153153 saves
Works with
- Claude Code
- Codex
- Cursor
- and 3 more
Phrase gliding in from the left, words fading in v1.0.0
Use this resource to bring in a phrase gliding, word after word
New
- 326 downloads
- 173 likes
- 142 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install phrase-glide-in-word-fadeFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent adds to your page a React (Tailwind) component that glides a phrase in from the left while its words appear one by one. You write the phrase; you get a simple, readable entrance.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Uses
- React
- Tailwind CSS
- Licence
- MIT
Similar resources
View all- Free
FreeWeb
Black button with hover effect "Massive Mayfly" by cssbuttons-io
- 334334 downloads
- 194194 likes
- 201201 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Teal 3D button with hover effect by cssbuttons-io
- 336336 downloads
- 145145 likes
- 207207 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green loader by fanishah
- 381381 downloads
- 221221 likes
- 209209 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Green button with hover effect by cssbuttons-io
- 415415 downloads
- 153153 likes
- 145145 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White button by YUGE0
- 412412 downloads
- 193193 likes
- 123123 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
Animated white 3D button by cssbuttons-io
- 366366 downloads
- 194194 likes
- 202202 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
FreeWeb
White 3D card with hover effect by javierBarroso
- 388388 downloads
- 153153 likes
- 193193 saves
Works with- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- README.md: usage guide
- short-slide-right.stories.tsx: the author's original file
- short-slide-right.tsx: the author's original file
- short-slide-right.mdx: the author's original file
Good fit for
- Site tagline
- Video message
- Animated caption
Not for
- A site without React or Tailwind CSS, without adapting it
- A motion-sensitive audience, without adding prefers-reduced-motion
Tags
- text
- phrase
- slide
- words
- fade
About
You say
"Glide my tagline in from the left with words fading in."
Component published by pixelpoint under the MIT license, resource page and guide written by PalateKit.
Show moreShow less
Prerequisites
- You bring
- Your React project with Tailwind CSS and Your colors and texts
- Dependencies
- React and Tailwind CSS
How to use it
- Copy short-slide-right.tsx into your React project's components folder.
- Make sure Tailwind CSS is set up in the project.
- Ask the agent to place the component on the page and match it to your brand.
Content preview
Files
- animata/text/short-slide-right.stories.tsx0.5 KB
- animata/text/short-slide-right.tsx2.9 KB
- content/docs/text/short-slide-right.mdx1.6 KB
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- README.md0.8 KB
Origin and licence
Modified by PalateKit
- Author
- pixelpoint
- Source
- github.com/codse/animata/tree/25c27e5a874c60a56dcc1609df3b2c4f5f8456f8/animata/text/short-slide-right.tsx
- Licence
- MIT
Notice
Version modifiée de « short-slide-right » (pixelpoint, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Which packages do I install?
React and Tailwind CSS are enough.
Does it work without Next.js?
Yes, in any React project with Tailwind CSS; just drop the "use client" directive if your tooling does not support it.