hyke-blocks-motion

A comprehensive GSAP-powered React animation library with 50+ components for creating stunning animations in your React and Next.js applications.

✨ Features

• 🎨 50+ Animation Components - Text, scroll, reveal, marquee, and more
• ⚡ GSAP Powered - Built on the industry-standard GSAP animation library
• 🎯 TypeScript First - Full type definitions included
• 🎭 Next.js Ready - Works seamlessly with Next.js App Router
• 🎨 Tailwind Compatible - Use Tailwind utility classes
• 📦 Tree Shakeable - Import only what you need
• 🔧 Customizable - Extensive props for fine-tuning animations
• 🎪 Production Ready - Optimized and battle-tested

📦 Installation

npm install hyke-blocks-motion gsap

or

yarn add hyke-blocks-motion gsap

or

pnpm add hyke-blocks-motion gsap

🚀 Quick Start

React

import { FadeIn, SplitText } from 'hyke-blocks-motion';

function App() {
  return (
    <div>
      <FadeIn duration={1}>
        <h1>Hello World</h1>
      </FadeIn>

      <SplitText type="chars" stagger={{ each: 0.05 }}>
        Animated Text
      </SplitText>
    </div>
  );
}

Next.js (App Router)

All components are already marked with "use client", so they work out of the box:

// app/page.tsx
import { ScrollReveal, ParallaxSection } from 'hyke-blocks-motion';

export default function Home() {
  return (
    <main>
      <ScrollReveal from={{ opacity: 0, y: 100 }}>
        <h1>Scroll to reveal</h1>
      </ScrollReveal>

      <ParallaxSection speed={0.5}>
        <img src="/hero.jpg" alt="Hero" />
      </ParallaxSection>
    </main>
  );
}

📚 Component Categories

🔤 Text Animations

Powerful text animation components with character, word, and line splitting.

import {
  SplitText,
  TypewriterText,
  GlitchText,
  GradientText,
  StaggerText,
  ScrambleText,
  WaveText,
  MagneticText,
  RevealText,
  CountUpText,
} from 'hyke-blocks-motion/text';

// Split text animation
<SplitText type="chars" stagger={{ each: 0.05 }}>
  Hello World
</SplitText>

// Typewriter effect
<TypewriterText text="Hello World" speed={50} cursor />

// Glitch effect
<GlitchText intensity={0.8} triggerOnHover>
  Glitch Text
</GlitchText>

// Animated gradient
<GradientText colors={['#ff0080', '#7928ca', '#ff0080']}>
  Gradient Text
</GradientText>

// Count up animation
<CountUpText end={1000} prefix="$" separator="," />

📜 Scroll Animations

Create engaging scroll-based animations with ScrollTrigger.

import {
  ParallaxSection,
  ScrollReveal,
  PinnedSection,
  HorizontalScroll,
  SmoothScroll,
  ScrollProgress,
  SnapScroll,
  FadeOnScroll,
} from 'hyke-blocks-motion/scroll';

// Parallax scrolling
<ParallaxSection speed={0.5}>
  <img src="background.jpg" alt="Background" />
</ParallaxSection>

// Reveal on scroll
<ScrollReveal from={{ opacity: 0, y: 100 }}>
  <div>Content</div>
</ScrollReveal>

// Pin section while scrolling
<PinnedSection end="+=500">
  <div>Pinned content</div>
</PinnedSection>

// Horizontal scroll
<HorizontalScroll>
  <div className="flex gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</HorizontalScroll>

// Scroll progress bar
<ScrollProgress progressColor="#ff0080" position="top" />

🎭 Reveal Animations

Beautiful reveal animations for your content.

import {
  FadeIn,
  SlideIn,
  ScaleIn,
  RotateIn,
  BounceIn,
  ZoomEffect,
  ClipReveal,
  StaggerReveal,
} from 'hyke-blocks-motion/reveals';

// Fade in
<FadeIn duration={1}>
  <div>Content</div>
</FadeIn>

// Slide in from direction
<SlideIn direction="left" distance={100}>
  <div>Content</div>
</SlideIn>

// Scale in with bounce
<ScaleIn from={0} ease="back.out(1.7)">
  <div>Content</div>
</ScaleIn>

// Stagger children
<StaggerReveal stagger={{ each: 0.1 }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</StaggerReveal>

🎪 Marquee Components

Infinite scrolling marquee effects.

import {
  InfiniteMarquee,
  VerticalMarquee,
  ParallaxMarquee,
  PauseMarquee,
} from 'hyke-blocks-motion/marquee';

// Horizontal marquee
<InfiniteMarquee speed={50} pauseOnHover>
  <div className="flex gap-8">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </div>
</InfiniteMarquee>

// Vertical marquee
<VerticalMarquee speed={30}>
  <div className="flex flex-col gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</VerticalMarquee>

🎯 Interaction Components

Interactive hover and click effects.

import {
  MagneticButton,
  TiltCard,
  BlobHover,
  RippleClick,
  GlowEffect,
} from 'hyke-blocks-motion/interactions';

// Magnetic button
<MagneticButton strength={0.5}>
  <button>Click me</button>
</MagneticButton>

// 3D tilt card
<TiltCard maxTilt={15} glare>
  <div className="p-8 bg-white rounded-lg">
    Card content
  </div>
</TiltCard>

// Ripple click effect
<RippleClick rippleColor="rgba(255, 255, 255, 0.5)">
  <button>Click me</button>
</RippleClick>

// Glow on hover
<GlowEffect glowColor="#ff0080" intensity={20}>
  <button>Hover me</button>
</GlowEffect>

🎨 Other Components

// Backgrounds
import { AnimatedGradient } from 'hyke-blocks-motion/backgrounds';

// Carousels
import { SimpleCarousel } from 'hyke-blocks-motion/carousels';

// SVG Animations
import { DrawSVG } from 'hyke-blocks-motion/svg';

// Loaders
import { SpinLoader } from 'hyke-blocks-motion/loaders';

// Counters
import { AnimatedCounter } from 'hyke-blocks-motion/counters';

// Layouts
import { SplitScreen } from 'hyke-blocks-motion/layouts';

// Gestures (requires GSAP premium)
import { DraggableElement } from 'hyke-blocks-motion/gestures';

🎣 Custom Hooks

Powerful hooks for creating custom animations.

import {
  useGsapAnimation,
  useScrollTrigger,
  useInView,
  useMousePosition,
  useMediaQuery,
  useIsMobile,
} from 'hyke-blocks-motion';

// Custom GSAP animation
const ref = useGsapAnimation((element) => {
  gsap.from(element, { opacity: 0, y: 50 });
}, []);

// ScrollTrigger animation
const ref = useScrollTrigger(
  (element) => {
    return gsap.from(element, { opacity: 0, y: 100 });
  },
  { start: 'top 80%', end: 'bottom 20%' }
);

// Detect element in viewport
const [ref, isInView] = useInView({ threshold: 0.5 });

// Track mouse position
const mousePos = useMousePosition();

// Media query
const isMobile = useIsMobile();

🛠️ Utilities

Helper functions for common animation tasks.

import {
  clamp,
  lerp,
  mapRange,
  random,
  splitText,
  easingPresets,
  animationPresets,
} from 'hyke-blocks-motion';

// Math utilities
const clamped = clamp(value, 0, 100);
const interpolated = lerp(0, 100, 0.5);
const mapped = mapRange(value, 0, 100, 0, 1);

// Easing presets
const easing = easingPresets.smooth; // "power2.out"
const easing2 = easingPresets.bounce; // "bounce.out"

// Animation presets
const fadeInConfig = animationPresets.fadeIn;
const slideUpConfig = animationPresets.slideUp;

📖 API Reference

Common Props

All animation components share these common props:

| Prop | Type | Default | Description | | ------------ | ------------ | -------------- | --------------------------------- | | duration | number | 1 | Animation duration in seconds | | delay | number | 0 | Delay before animation starts | | ease | EasingType | "power3.out" | GSAP easing function | | className | string | "" | Additional CSS classes | | onComplete | () => void | - | Callback when animation completes | | onStart | () => void | - | Callback when animation starts |

Easing Types

type EasingType =
  | 'none'
  | 'power1.in'
  | 'power1.out'
  | 'power1.inOut'
  | 'power2.in'
  | 'power2.out'
  | 'power2.inOut'
  | 'power3.in'
  | 'power3.out'
  | 'power3.inOut'
  | 'power4.in'
  | 'power4.out'
  | 'power4.inOut'
  | 'back.in'
  | 'back.out'
  | 'back.inOut'
  | 'elastic.in'
  | 'elastic.out'
  | 'elastic.inOut'
  | 'bounce.in'
  | 'bounce.out'
  | 'bounce.inOut'
  | 'circ.in'
  | 'circ.out'
  | 'circ.inOut'
  | 'expo.in'
  | 'expo.out'
  | 'expo.inOut'
  | 'sine.in'
  | 'sine.out'
  | 'sine.inOut';

🎨 Tailwind CSS Integration

All components support Tailwind CSS utility classes through the className prop:

<FadeIn className="text-4xl font-bold text-blue-500">
  Styled with Tailwind
</FadeIn>

<SlideIn direction="left" className="p-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg">
  <h2 className="text-white">Beautiful Card</h2>
</SlideIn>

🔧 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import { FadeInProps, SplitTextProps } from 'hyke-blocks-motion';

const MyComponent: React.FC = () => {
  const fadeInProps: FadeInProps = {
    duration: 1,
    delay: 0.5,
    ease: 'power2.out',
  };

  return <FadeIn {...fadeInProps}>Content</FadeIn>;
};

🎪 GSAP Plugins

Some components require GSAP premium plugins:

• ScrollSmoother - SmoothScroll component
• Draggable - DraggableElement component
• SplitText - Alternative to built-in text splitting

These components will gracefully warn if the plugin is not available.

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Sameera Lakshan

🙏 Acknowledgments

• Built with GSAP
• Inspired by amazing animation libraries in the React ecosystem

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Full Docs

Made with ❤️ by Sameera Lakshan

hyke-blocks-motion