Motion Wrappers

13 Framer Motion animation primitives for scroll reveals, stagger lists, interactive cards, floating elements, counters, and more. Requires framer-motion as a peer dependency.

Preview

Usage

tsx

import {
  ScrollReveal,
  StaggerList,
  StaggerItem,
  InteractiveCard,
  Floating,
  CountUp,
  TextReveal,
} from "zostel-ui";

// Scroll reveal
<ScrollReveal>
  <Card>Appears on scroll</Card>
</ScrollReveal>

// Stagger list
<StaggerList>
  <StaggerItem><Card>1</Card></StaggerItem>
  <StaggerItem><Card>2</Card></StaggerItem>
</StaggerList>

// Interactive card
<InteractiveCard onClick={handleClick}>
  <Card>Hover lift + tap scale</Card>
</InteractiveCard>

// CountUp
<CountUp to={1500} duration={2} />

// Text reveal
<TextReveal text="Live Free" />

Components

ScrollReveal

Prop	Type	Default	Description
`variants`	`Variants`	fadeUpVariants	Framer Motion variants for enter/exit.
`once`	`boolean`	true	Only animate once when scrolled into view.
`amount`	`number`	0.3	Viewport intersection threshold (0-1).
`delay`	`number`	0	Delay in seconds before animation starts.

variants

Type: Variants

Default: fadeUpVariants

Framer Motion variants for enter/exit.

once

Type: boolean

Default: true

Only animate once when scrolled into view.

amount

Type: number

Default: 0.3

Viewport intersection threshold (0-1).

delay

Type: number

Default: 0

Delay in seconds before animation starts.

StaggerList

Prop	Type	Default	Description
`staggerDelay`	`number`	0.08	Delay between each child in seconds.
`once`	`boolean`	true	Only stagger once.
`amount`	`number`	0.2	Viewport intersection threshold.

staggerDelay

Type: number

Default: 0.08

Delay between each child in seconds.

once

Type: boolean

Default: true

Only stagger once.

amount

Type: number

Default: 0.2

Viewport intersection threshold.

StaggerItem

Prop	Type	Default	Description
`variants`	`Variants`	fadeUpVariants	Animation variants for this item.

variants

Type: Variants

Default: fadeUpVariants

Animation variants for this item.

InteractiveCard

Prop	Type	Default	Description
`onClick`	`() => void`	-	Click handler.
`disabled`	`boolean`	false	Disable hover/tap interactions.

onClick

Type: () => void

Default: -

Click handler.

disabled

Type: boolean

Default: false

Disable hover/tap interactions.

Floating

Prop	Type	Default	Description
`distance`	`number`	10	Float distance in pixels.
`duration`	`number`	3	Full cycle duration in seconds.

distance

Type: number

Default: 10

Float distance in pixels.

duration

Type: number

Default: 3

Full cycle duration in seconds.

PulseGlow

Prop	Type	Default	Description
`scale`	`number`	1.05	Peak scale value.
`duration`	`number`	2	Full cycle duration in seconds.

scale

Type: number

Default: 1.05

Peak scale value.

duration

Type: number

Default: 2

Full cycle duration in seconds.

Spinner

Prop	Type	Default	Description
`duration`	`number`	8	Full rotation duration in seconds.

duration

Type: number

Default: 8

Full rotation duration in seconds.

Shake

Prop	Type	Default	Description
`trigger`	`boolean`	false	Set to true to trigger the shake.
`intensity`	`number`	8	Shake intensity in pixels.

trigger

Type: boolean

Default: false

Set to true to trigger the shake.

intensity

Type: number

Default: 8

Shake intensity in pixels.

TapBounce

Prop	Type	Default	Description
`scale`	`number`	0.95	Scale on tap (< 1 for press-in).

scale

Type: number

Default: 0.95

Scale on tap (< 1 for press-in).

CountUp

Prop	Type	Default	Description
`from`	`number`	0	Starting number.
`to`	`number`	required	Target number.
`duration`	`number`	2	Animation duration in seconds.
`formatter`	`(value: number) => string`	Math.round + toLocaleString	Custom number formatter.

from

Type: number

Default: 0

Starting number.

to

Type: number

Default: required

Target number.

duration

Type: number

Default: 2

Animation duration in seconds.

formatter

Type: (value: number) => string

Default: Math.round + toLocaleString

Custom number formatter.

TextReveal

Prop	Type	Default	Description
`text`	`string`	required	Text to reveal character by character.
`charDelay`	`number`	0.03	Delay between each character in seconds.
`once`	`boolean`	true	Only reveal once.

text

Type: string

Default: required

Text to reveal character by character.

charDelay

Type: number

Default: 0.03

Delay between each character in seconds.

once

Type: boolean

Default: true

Only reveal once.

Parallax

Prop	Type	Default	Description
`speed`	`number`	0.5	Parallax speed multiplier.

speed

Type: number

Default: 0.5

Parallax speed multiplier.

PageTransition

No additional props. Wraps children with enter/exit opacity + y transitions.

Previous Lottie Player Next Hostel Card