Motion Motion Wrappers

Motion Wrappers

Reveal, stagger, float, count up — framer-motion, in the brand’s timing, still for reduced motion.

Preview

ScrollReveal

Rises into place as it scrolls into view.

StaggerList + StaggerItem

RUN

CLIMB

CHASE

LAUGH

InteractiveCard

Goa

SWIM · DANCE · REST

Manali

WALK · CLIMB · RISE

Rishikesh

RAFT · STRETCH · BREATHE

Ambient

Floating

PulseGlow

Spinner

Gestures

Wrong code

TapBounce

CountUp

Zostels

destinations

0M+

travellers

TextReveal

Usage

tsx

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

<ScrollReveal>…</ScrollReveal>

<StaggerList className="grid grid-cols-4 gap-3">
  {["RUN", "CLIMB", "CHASE", "LAUGH"].map((w) => <StaggerItem key={w}>{w}</StaggerItem>)}
</StaggerList>

<CountUp to={111} />   {/* Zostels — the public facts only */}
<TextReveal text="LIVE IT. NOW" />

Components

Prop	Type	Default	Description
`ScrollReveal`	`{ variants?, once?, amount?, delay? }`	—	Rises into place when scrolled into view.
`StaggerList / StaggerItem`	`{ staggerDelay?, once?, amount? }`	—	Children arrive one after another.
`InteractiveCard`	`{ onClick?, disabled? }`	—	Lifts on hover, presses on tap.
`Floating / PulseGlow / Spinner`	`{ distance? \| scale? \| duration? }`	—	Ambient loops.
`Shake`	`{ trigger, intensity? }`	—	Shakes when trigger turns true — for errors.
`TapBounce`	`{ scale? }`	—	A press you can feel.
`PageTransition`		—	Enter and exit for a page.
`CountUp`	`{ to, from?, duration?, formatter? }`	—	Counts to a number (grouped the Indian way) when seen.
`TextReveal`	`{ text, charDelay?, once? }`	—	Letter by letter.
`Parallax`	`{ speed? }`	—	Moves slower than the page.

ScrollReveal

Type: { variants?, once?, amount?, delay? }

Default: —

Rises into place when scrolled into view.

StaggerList / StaggerItem

Type: { staggerDelay?, once?, amount? }

Default: —

Children arrive one after another.

InteractiveCard

Type: { onClick?, disabled? }

Default: —

Lifts on hover, presses on tap.

Floating / PulseGlow / Spinner

Type: { distance? | scale? | duration? }

Default: —

Ambient loops.

Shake

Type: { trigger, intensity? }

Default: —

Shakes when trigger turns true — for errors.

TapBounce

Type: { scale? }

Default: —

A press you can feel.

PageTransition

Type:

Default: —

Enter and exit for a page.

CountUp

Type: { to, from?, duration?, formatter? }

Default: —

Counts to a number (grouped the Indian way) when seen.

TextReveal

Type: { text, charDelay?, once? }

Default: —

Letter by letter.

Parallax

Type: { speed? }

Default: —

Moves slower than the page.

Reduced motion

Every wrapper checks framer-motion’s useReducedMotion(): entrances show their content at once, loops hold still, CountUp shows the final number, Parallax stays put.