Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kokonut-labs/kokonutui/llms.txt

Use this file to discover all available pages before exploring further.

A text component that creates a slicing effect by splitting the text horizontally on hover.

​
Installation

npx shadcn@latest add @kokonutui/sliced-text

​
Usage

import SlicedText from "@/components/kokonutui/sliced-text";

export default function Example() {
  return (
    <SlicedText 
      text="Sliced Text" 
      className="text-5xl"
    />
  );
}

​
Props

​
text
string
default:"'Sliced Text'"
The text content to display
​
className
string
CSS classes for text styling
​
containerClassName
string
CSS classes for the container element
​
splitSpacing
number
default:"2"
Spacing between split sections (in pixels)

​
Features

  • Hover Effect: Text splits on hover
  • Smooth Animation: Fast 0.1s transition
  • Clip Path: Uses CSS clip-path for clean slicing
  • Customizable Spacing: Control gap between slices

​
How It Works

  1. Default State: Text appears split with top and bottom halves slightly separated
  2. Hover State: Halves merge together, top half fades out
  3. Clip Path: Top half shows upper 50%, bottom half shows lower 50%

​
Customization

​
Adjust Split Spacing

<SlicedText 
  text="Wide Gap" 
  splitSpacing={8}
  className="text-6xl font-black"
/>

​
Container Styling

<SlicedText 
  text="Centered" 
  containerClassName="bg-slate-900 p-8 rounded-lg"
  className="text-white text-4xl"
/>

​
Animation Variants

  • Top Half: Clips bottom 50%, moves up, fades on hover
  • Bottom Half: Clips top 50%, moves down, stays visible on hover

​
Dependencies

  • motion/react - Animation library
  • @/lib/utils - cn utility function