Animations

CSS-only animations for performance. No Framer Motion or heavy libraries. All animations respect prefers-reduced-motion.

Scroll Reveal

Elements fade in and slide up when they enter the viewport. Uses IntersectionObserver.

CSS:

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

Usage:

import { Reveal } from "@/components/ui/reveal"

<Reveal delay={200}>
  <h2>Content fades in on scroll</h2>
</Reveal>

Word Reveal

Hero text animates word by word with fade, blur, and subtle lift.

CSS:

@keyframes word-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.animate-word-reveal {
  opacity: 0;
  animation: word-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

Usage:

import { AnimatedText } from "@/components/ui/animated-text"

<AnimatedText
  text="The financial brain for"
  delay={0}
  staggerDelay={150}
/>

// With gradient styling
<AnimatedText
  text="autonomous agents"
  delay={600}
  staggerDelay={180}
  wordClassName="gradient-text-word"
/>

Card Hover Effects

Cards lift slightly, gain a glow border, and have a shine sweep on hover.

CSS:

.feature-card {
  transition: transform 0.4s ease-out,
              box-shadow 0.4s ease-out,
              border-color 0.4s ease-out;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.08);
  border-color: oklch(0.585 0.233 264 / 0.2);
}

/* Glow border on hover */
.feature-card:hover::before {
  background: linear-gradient(
    135deg,
    oklch(0.585 0.233 264 / 0.6) 0%,
    oklch(0.7 0.2 280 / 0.4) 50%,
    oklch(0.585 0.233 264 / 0.6) 100%
  );
}

/* Shine sweep on hover */
.feature-card:hover::after {
  transform: translateX(100%);
}

Mesh Gradient

Animated background blobs that float and scale subtly. Creates depth without distraction.

CSS:

.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  will-change: transform;
}

@keyframes mesh-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(50px, 30px) scale(1.1); }
  50% { transform: translate(20px, -20px) scale(0.95); }
  75% { transform: translate(-30px, 40px) scale(1.05); }
}

Usage:

import { MeshGradient } from "@/components/ui/mesh-gradient"

<section className="relative overflow-hidden">
  <MeshGradient />
  <div className="relative z-10">
    {/* Content */}
  </div>
</section>

Gradient Text

Animated gradient that shifts colors. Use sparingly for emphasis.

Gradient text example

CSS:

.gradient-text {
  background: linear-gradient(
    135deg,
    oklch(0.585 0.233 264) 0%,
    oklch(0.7 0.2 280) 50%,
    oklch(0.585 0.233 264) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

Reduced Motion

All animations are disabled when the user prefers reduced motion.

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .animate-word-reveal,
  .feature-card,
  .mesh-blob,
  .gradient-text {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}