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 with dramatic layered shadows that create a swoosh effect, inspired by Nike’s branding.

​
Installation

npx shadcn@latest add @kokonutui/swoosh-text

​
Usage

import SwooshText from "@/components/kokonutui/swoosh-text";

export default function Example() {
  return (
    <SwooshText 
      text="Hover Me" 
      className="text-6xl"
    />
  );
}

​
Props

​
text
string
default:"'Hover Me'"
The text content to display
​
className
string
Additional CSS classes for styling
​
shadowColors
object
Custom color scheme for shadow layers

​
Shadow Colors Object

shadowColors?: {
  first?: string;   // Default: '#07bccc'
  second?: string;  // Default: '#e601c0'
  third?: string;   // Default: '#e9019a'
  fourth?: string;  // Default: '#f40468'
  glow?: string;    // Default: '#f40468'
}

​
Features

  • Layered Shadows: Multiple colored shadow layers create depth
  • Hover Interaction: Shadows disappear on hover
  • Customizable Colors: Full control over shadow color scheme
  • Smooth Transitions: Animated shadow transitions

​
Custom Colors

<SwooshText 
  text="Custom" 
  shadowColors={{
    first: '#3b82f6',
    second: '#8b5cf6',
    third: '#ec4899',
    fourth: '#f43f5e',
    glow: '#f43f5e'
  }}
  className="text-7xl"
/>

​
Styling Tips

  • Works best with large text sizes (text-6xl or larger)
  • Use italic font style for enhanced swoosh effect
  • Consider dark backgrounds to make shadows stand out
  • Bold fonts enhance the visual impact

​
Dependencies

  • motion/react - Animation and hover effects
  • @/lib/utils - cn utility function