Loading...
Loading...
<TypingText texts={["Text 1", "Text 2"]} speed={50} /><SimpleHoverAnimation emoji="🐱" position="top">
<button>Hover Me</button>
</SimpleHoverAnimation>Top
Bottom
Left
Right
Bounce Effect
Scale Effect
Rotate Effect
Fade Effect
Slide Effect
Custom Content
<AnimatedHover
animationType="bounce"
hoverElement={<div>Content</div>}
>
<button>Hover Me</button>
</AnimatedHover>Just use a GIF file - it's already animated!
Always Playing
Hover Only
import { GifAnimation } from '@/components/animations/GifAnimation';
// Always playing
<GifAnimation
src="/gifs/fire-animation.gif"
alt="Fire animation"
width={64}
height={64}
pixelated={true}
/>
// Play only on hover
<GifAnimation
src="/gifs/sparkle.gif"
staticSrc="/images/sparkle-static.png"
alt="Sparkle"
width={64}
height={64}
onHoverOnly={true}
/>For more control, use sprite sheets with individual frames
← Imagine this as 5 frames in a sprite sheet
import { PixelSprite } from '@/components/animations/PixelSprite';
// 5-frame loop animation
<PixelSprite
sprite="/sprites/walk-cycle.png"
frames={5}
frameWidth={32}
frameHeight={32}
fps={10}
loop={true}
/>
// Animate only on hover
<PixelSprite
sprite="/sprites/coin-spin.png"
frames={5}
frameWidth={24}
frameHeight={24}
fps={8}
onHoverOnly={true}
/>
// Vertical sprite sheet
<PixelSprite
sprite="/sprites/character.png"
frames={5}
frameWidth={32}
frameHeight={32}
direction="vertical"
/>Sprite Sheet Format: Horizontal: [Frame1][Frame2][Frame3][Frame4][Frame5]
If each frame is 32×32px, total width = 160px (5 × 32)
Spinner:
|
Walking Character:
O /|\ / \
Bouncing Ball:
o
━━━━━━━━━━━━━━━
<AsciiAnimation frames={spinnerFrames} frameRate={8} />Example: Simple Smiley Face
Loading image...
To use your own GIF:
public/animations/ folder<GifToAsciiAdvanced src="/animations/my.gif" width={50} height={25} /><GifToAsciiAdvanced
src="your-gif-url.gif"
width={80}
height={40}
/>Tips:
• Use smaller dimensions (40-80 width) for better performance
• GIF must be accessible (no CORS issues)
• Adjust charset for different detail levels
• Character set: more characters = more detail gradients
npm install framer-motionimport { SimpleHoverAnimation } from '@/components/animations/SimpleHoverAnimation';
<SimpleHoverAnimation emoji="🐱" position="top">
<button>Hover for Cat!</button>
</SimpleHoverAnimation>