DESIGN SYSTEM

Animation Library

Reusable CSS animations for entrance, hover, loading, and accent moments across AIPwn.

Entrance · hover to replay

Continuous

Spin

Continuous rotation

.spin

Spin Slow

Slower rotation

.spin-slow

Pulse

Pulsing scale effect

.pulse

Float

Gentle floating motion

.float

Blink

Blinking opacity

.blink

Glow Pulse

Expanding outline pulse

.glow-pulse

Interactive · click to play

Loading

Usage

// CSS class
<div class="fade-up">Animates on mount</div>

// React — scroll triggered
import { AnimationWrapper } from "../../components/AnimationWrapper";
<AnimationWrapper animation="fade-up" delay="100ms">
  <Card />
</AnimationWrapper>

// React — stagger group
import { StaggerGroup } from "../../components/AnimationWrapper";
<StaggerGroup staggerDelay="80ms" animation="slide-in-up">
  {items.map(item => <Card key={item.id} />)}
</StaggerGroup>