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
Text appearing with a tiny scale pop v1.0.0
Use this resource to add a discreet entrance to labels and headings
New
- 580 downloads
- 249 likes
- 193 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install subtle-scale-fade-textFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent adds to your page a React (Tailwind) component that fades in text with a slight scale effect. You choose the text; you get a polished finish.
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
- micro-scale-fade.stories.tsx: the author's original file
- micro-scale-fade.tsx: the author's original file
- micro-scale-fade.mdx: the author's original file
Good fit for
- Interface labels
- Section subtitles
- Headings on a restrained site
Not for
- A site without React or Tailwind CSS, without adapting it
- A motion-sensitive audience, without adding prefers-reduced-motion
Tags
- text
- fade
- scale
- subtle
- heading
About
You say
"Add a fade with a slight scale to my section labels."
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 micro-scale-fade.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/micro-scale-fade.stories.tsx0.5 KB
- animata/text/micro-scale-fade.tsx2.7 KB
- content/docs/text/micro-scale-fade.mdx1.5 KB
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- README.md0.7 KB
Origin and licence
Modified by PalateKit
- Author
- pixelpoint
- Source
- github.com/codse/animata/tree/25c27e5a874c60a56dcc1609df3b2c4f5f8456f8/animata/text/micro-scale-fade.tsx
- Licence
- MIT
Notice
Version modifiée de « micro-scale-fade » (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.