AnimationsNew

Animation Pack

Thirty scroll-triggered animations, drop-in ready.

A curated set of fade, slide, parallax, and reveal effects wired to Framer Motion and the IntersectionObserver. Every animation respects prefers-reduced-motion and ships with TypeScript types.

What you get

30 named animations across fade, slide, scale, blur, parallax, reveal
Built on Framer Motion with TypeScript types and zero runtime config
Reduced-motion aware: collapses to opacity when the OS asks
Works inside any Next.js, Remix, or Vite + React app

Preview

tsx

import { FadeUp, Reveal, Stagger } from "@hazir/animation-pack";

export function Hero() {
  return (
    <Stagger as="section" delay={0.08}>
      <FadeUp as="h1" duration={0.7}>
        Your studio, on stage.
      </FadeUp>
      <Reveal direction="left">
        <p>Open the doors. The work speaks.</p>
      </Reveal>
    </Stagger>
  );
}

import any of the 30 animations and drop them on a component

Inside the pack

FadeIn / FadeUp

Cubic ease-out, 600ms, with a stagger child for lists.

Reveal

Mask-clip reveal that animates the ink layer, not the box.

Parallax

GPU-cheap translate3d driven by scroll progress.

Stagger

Compose any animation as a stagger; shipped with sensible defaults.

Ready to drop it in?

Buy Animation Pack for $39. Stripe handles the receipt; we send the download and keep your purchase in your account.

Browse the workshop