Animation Wrapper

CSS-only animation primitives. Wrap any element to apply pulse, float, rotate, fade, slide, draw, or shimmer effects with zero JavaScript overhead.

Preview

Pulsepulse

Floatfloat

Rotaterotate

Fade Upfade-up

Fade Infade-in

Slide In Rightslide-in-right

Hover Lifthover-lift

Hover Glowhover-glow

Drawdraw

Shimmershimmer

With Custom Duration

0.5s

2s (default)

Usage

tsx

import { AnimationWrapper } from "zostel-ui";

<AnimationWrapper animation="pulse">
  <Logo />
</AnimationWrapper>

<AnimationWrapper animation="fade-up" delay={200}>
  <Card>...</Card>
</AnimationWrapper>

<AnimationWrapper animation="float" duration="5s">
  <Icon />
</AnimationWrapper>

Props

Prop	Type	Default	Description
`animation`	`"pulse" \| "float" \| "rotate" \| "fade-up" \| "fade-in" \| "slide-in-right" \| "hover-lift" \| "hover-glow" \| "draw" \| "shimmer"`	"fade-up"	The CSS animation to apply.
`delay`	`number`	-	Animation delay in milliseconds.
`duration`	`string`	-	Custom animation duration CSS value (e.g. "2s", "500ms").
`trigger`	`"always" \| "hover"`	"always"	When to trigger the animation.
`className`	`string`	""	Additional CSS classes.

animation

Type:

"pulse" | "float" | "rotate" | "fade-up" | "fade-in" | "slide-in-right" | "hover-lift" | "hover-glow" | "draw" | "shimmer"

Default: "fade-up"

The CSS animation to apply.

delay

Type: number

Default: -

Animation delay in milliseconds.

duration

Type: string

Default: -

Custom animation duration CSS value (e.g. "2s", "500ms").

trigger

Type: "always" | "hover"

Default: "always"

When to trigger the animation.

className

Type: string

Default: ""

Additional CSS classes.

Previous Gradient Next Lottie Player