Sliced Text

Text effect that splits into two offset slices and merges together on hover using clip-path, built with React, Tailwind CSS and Motion animations.

Library

Kokonut UI

Framework

React

Type

component

License

MIT

Dependencies

motion

Install

npx shadcn@latest add @kokonutui/sliced-text

Files

• components/kokonutui/sliced-text.tsx
• lib/utils.ts

Source

https://github.com/kokonut-labs/kokonutui

Categories

• Animated Text Components
• React Animated Text Components
• Tailwind CSS Animated Text Components
• Text Components
• React Text Components
• Tailwind CSS Text Components
• Animated Text Components

More from Kokonut UI

• AI Text Loading
• Dynamic Text
• Glitch Text
• Matrix Text
• Scroll Text
• Shimmer Text
• Extruded Text
• Typing Text
• Command Palette
• Activity Terrain
• AI Agent Lanes
• AI Attachment