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

Mail Icon

An animated mail icon with a moving envelope flap.

Installation

npx shadcn@latest add https://chamaac.com/r/mail-icon.json

Props

PropTypeDefaultDescription
classNamestring-Custom class names for styling the SVG
sizenumber24Size of the icon in pixels
durationnumber4Duration of the animation in seconds
strokeWidthnumber2Stroke width of the icon
isHoveredbooleanfalseWhen true, animation only plays on hover. When false, animation loops continuously.
repeatDelaynumber1Delay between animation loops in seconds
easeEasing"easeInOut"Animation easing function (e.g., 'linear', 'easeIn', 'easeOut', 'easeInOut')