Chamaac UI

Components

  • Overview

    • Introduction

  • Animated Icons

    • Icons Overview

  • Backgrounds

    • Interactive GridNew

  • Buttons

    • Buttons Overview
    • Premium Button
    • Glowing BorderNew
    • Shimmer Button
    • Slide Up Button
    • Focus Button
    • Neo Brutalist

  • Text Animations

    • Text LoopNew
    • Dancing Letters
    • Gif Text

  • Inputs

    • AI InputNew

  • Navigation

    • Dock

  • Sections

    • Stats CardsNew
    • Feature Steps
    • Gauge

  • Carousels

    • Carousel

Slide Up Button

An animated button with a slide-up text effect on hover, inspired by jeton.com. The original text slides up while a clone slides in from below with a rotation effect.

Installation

npx shadcn@latest add https://chamaac.com/r/slideup-button.json

Props

PropTypeDefaultDescription
children*React.ReactNode-The content to be displayed inside the button
classNamestring""Custom class names for styling
textDurationnumber0.25Duration in seconds for the original text slide-up animation
cloneDurationnumber0.5Duration in seconds for the clone text slide-in animation
cloneDelaynumber0.12Delay in seconds before the clone text animation starts
buttonScalenumber0.98Scale value for the button on hover (1 = no scale)
buttonOpacitynumber0.8Opacity value for the button on hover (0-1)
onClick() => void-Click handler function