@thetempest/animations

Storm-themed animations for the Tempest Audio ecosystem. Built with Framer Motion for smooth, performant animations.

Installation

# Using npm
npm install @thetempest/animations framer-motion

# Using pnpm
pnpm add @thetempest/animations framer-motion

Note: This package requires framer-motion and react as peer dependencies.

Usage

Import animations and use them in your React application:

import { StormSwirl, ThunderRumble, LightningPulse } from '@thetempest/animations';

function App() {
  return (
    <div>
      {/* Loading state */}
      <StormSwirl size={64} color="#3B82F6" />

      {/* Success notification */}
      <ThunderRumble onComplete={() => console.log('Done!')} />

      {/* AI processing indicator */}
      <LightningPulse size={80} color="#A78BFA" duration={2} />
    </div>
  );
}

Animations

StormSwirl

A rotating, pulsing loader perfect for loading states.

Props:

• size: number (default: 64) - Size in pixels
• color: string (default: '#3B82F6') - Color of the animation
• duration: number (default: 1.5) - Animation duration in seconds

Example:

<StormSwirl size={80} color="#10B981" duration={2} />

ThunderRumble

A thunder bolt with ripple effect, ideal for success notifications.

Props:

• size: number (default: 64) - Size in pixels
• color: string (default: '#10B981') - Color of the bolt
• onComplete: () => void (optional) - Callback when animation completes

Example:

<ThunderRumble
  size={96}
  color="#10B981"
  onComplete={() => console.log('Success!')}
/>

LightningPulse

A pulsing animation with rotating lightning bolts, perfect for AI processing states.

Props:

• size: number (default: 64) - Size in pixels
• color: string (default: '#A78BFA') - Color of the bolts
• duration: number (default: 1.5) - Pulse duration in seconds

Example:

<LightningPulse
  size={72}
  color="#A78BFA"
  duration={1.8}
/>

Design Philosophy

All animations follow the storm theme of the Tempest ecosystem:

• StormSwirl: Represents swirling storm winds (loading)
• ThunderRumble: Thunder and lightning strike (success)
• LightningPulse: Electric energy (AI processing)

Part of the Tempest Ecosystem

This animation library is used by:

• Tempest Record - Vinyl digitization app
• Tempest DJ - DJ performance platform
• Tempest Create - Digital audio workstation
• Tempest Radio - Online streaming platform

License

MIT

Publishing

This package is published to npm as @thetempest/animations and is available for use in any React project.

npm view @thetempest/animations

Repository

This is a private repository. The package is distributed via npm.

Version

Current version: 0.1.4

Changelog

• 0.1.4 - Fixed React version conflicts by using peer dependencies
• 0.1.3 - Added TypeScript declaration files
• 0.1.2 - Fixed build configuration
• 0.1.1 - Initial npm publication
• 0.1.0 - Initial release

Tempest Audio - The Storm of Sound