ZOSTEL BRAND

Loading…

Animations

Programmatic Lottie animations and CSS transitions that bring the Zostel brand to life.

Lottie Animations

Programmatically generated Lottie animations for rich, performant motion.

Speed:

Logo Assembly

The Zostel mark assembles with a spin and a playful bounce

1.5sOne-shot
Speed:

Logo Pulse

Gentle breathing effect for ambient brand presence

2sLooping
Speed:

Logo Rotate

Slow continuous rotation for loading states

8sLooping
Speed:

Icon Bounce

Bouncy entrance effect for icons and elements

0.6sOne-shot
Speed:

Staggered Reveal

Words appearing one after another with offset

1.5sOne-shot
Speed:

Wave

Flowing wave pattern for water/nature themes

2sLooping
Speed:

Compass Spin

Compass needle finding north with overshoot

1.2sOne-shot

CSS Animations

Lightweight CSS-based animations for common UI interactions.

Pulse

Scale pulse effect

animate-zostel-pulse

Float

Gentle floating motion

animate-zostel-float

Rotate

Continuous rotation

animate-zostel-rotate

Fade Up

Fade in from below

animate-zostel-fade-up

Hover Effects

Hover Lift

Elevates on hover

zostel-hover-lift

Hover Glow

Glows on hover

zostel-hover-glow

Scale

Scales on hover

hover:scale-105

Staggered Entrance

RUNCLIMBCHASELAUGH
// Staggered animation with delays
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

Usage

// Import Lottie animation generators
import { createLogoAssemblyAnimation } from 'zostel-ui';
import { LottiePlayer } from './components/lottie/LottiePlayer';

// Generate animation data
const animationData = createLogoAssemblyAnimation();

// Render
<LottiePlayer
  animationData={animationData}
  loop={false}
  autoplay={true}
/>

// CSS animation classes
<div className="animate-zostel-pulse">...</div>
<div className="animate-zostel-float">...</div>
<div className="zostel-hover-lift">...</div>