Motion Animation Wrapper

Animation Wrapper

One CSS move on anything. Every move stops for people who ask for less motion.

Preview

Turn in 60° stepsstep60

Pulsepulse

Floatfloat

Fade upfade-up

Fade infade-in

Slide inslide-in-right

Drawdraw

Hover lifthover-lift

Hover ringhover-glow

Duration

0.6s

3.6s

Every move stops for people who ask their device for less motion.

Usage

tsx

import { AnimationWrapper, ZostelSymbol } from "zostel-ui";

<AnimationWrapper animation="step60">          {/* the symbol's own move: 60° clicks */}
  <ZostelSymbol size={48} />
</AnimationWrapper>

<AnimationWrapper animation="fade-up" delay={120}>…</AnimationWrapper>

Props

Prop	Type	Default	Description
`animation`	`"step60" \| "pulse" \| "float" \| "rotate" \| "fade-up" \| "fade-in" \| "slide-in-right" \| "draw" \| "hover-lift" \| "hover-glow" \| "shimmer"`	`"fade-up"`	step60 turns in 60° clicks (the brand’s steps(6)); draw needs a stroked SVG; hover-glow is a flat Warm Orange ring — the brand never glows.
`delay`	`number`	—	ms before it starts.
`duration`	`string`	—	A CSS time, e.g. "600ms".
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

animation

Type:

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

Default: "fade-up"

step60 turns in 60° clicks (the brand’s steps(6)); draw needs a stroked SVG; hover-glow is a flat Warm Orange ring — the brand never glows.

delay

Type: number

Default: —

ms before it starts.

duration

Type: string

Default: —

A CSS time, e.g. "600ms".

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

Motion tokens

Depart quickly, travel steadily, arrive softly: durations 90 · 180 · 300 · 600 · 1200 · 3600 ms; arrive cubic-bezier(0.16, 1, 0.3, 1); step60 steps(6). See /illustrations.