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 transition with a depth effect v1.0.0
Use this resource to move from one text to another with a depth effect
New
- 366 downloads
- 135 likes
- 176 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install depth-scale-text-transitionFirst time: connect the CLI with
npx --yes palatekit@latest loginThe agent adds to your page a React (Tailwind) component that scales the old and new text to create a sense of depth. You provide the texts; you get a transition with depth.
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
- shared-axis-z.stories.tsx: the author's original file
- shared-axis-z.tsx: the author's original file
- shared-axis-z.mdx: the author's original file
Good fit for
- Section change in a presentation
- Successive messages on a page
- Transition between two ideas
Not for
- A site without React or Tailwind CSS, without adapting it
- A motion-sensitive audience, without adding prefers-reduced-motion
Tags
- text
- depth
- scale
- transition
- context
About
You say
"Move from one message to the next with a depth effect."
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 shared-axis-z.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/shared-axis-z.stories.tsx0.5 KB
- animata/text/shared-axis-z.tsx2.7 KB
- content/docs/text/shared-axis-z.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/shared-axis-z.tsx
- Licence
- MIT
Notice
Version modifiée de « shared-axis-z » (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.