Sticker Animation

Delightful animated stickers for React applications with smooth transitions and customizable effects.

December 6, 2024 (1y ago)
$npx shadcn@latest add https://tiendat.work/r/sticker-animation.json
Open in
Loading...

Installation

pnpm dlx shadcn@latest add https://tiendat.work/r/sticker-animation.json

Usage

import {
  StickerCop,
} from "@/components/StickerCop";
export function StickerDemo() {
  return (
     <StickerCop
        id="my-sticker"
        frameCount={16}
        frameRate={12}
        framesPerCol={4}
        framesPerRow={4}
        spriteImg="/sprites/sticker-sprite.png"
        frameSize={120}
        className="hover:scale-110 transition-transform"
        alt="Animated sticker"
      />
  );
}

Examples

Basic Sticker Animation

Loading...
Contents
TABLE OF CONTENTS