@hngbfv3399/scrollschot-react

React components and hooks for ScrollSchot animations

Declarative scroll animations for React applications with TypeScript support.

⚡ Quick Start

npm install @hngbfv3399/scrollschot-react

import { FadeIn } from '@hngbfv3399/scrollschot-react';

function App() {
  return (
    <FadeIn duration={1000}>
      <h1>Hello World!</h1>
    </FadeIn>
  );
}

🎯 Features

• 🪄 Declarative: Easy-to-use React components
• ⚛️ React-friendly: Built specifically for React with hooks
• 📝 TypeScript: Full type safety and IntelliSense
• 🎨 20 Free Animations: Complete collection of essential animations
• 💎 46 Premium Animations: Advanced effects and interactions (separate package)
• 🔧 Flexible: Multiple ways to use - components, hooks, or imperative
• ⚡ Performance: Optimized with React.memo and intersection observers

📦 Animation Packages

Free Package (@hngbfv3399/scrollschot-react)

20 Essential Animations - Perfect for most projects:

Fade Effects (2)

• FadeIn - Smooth fade-in animation
• FadeAndScale - Combined fade and scale effect

Slide Effects (3)

• SlideIn - Slide from any direction
• ScrollSlide - Scroll-triggered slide animation
• FadeUpOnView - Fade up when in viewport

Zoom & Scale Effects (4)

• ZoomIn - Zoom-in entrance effect
• ScaleOnView - Scale when visible
• HoverScale - Interactive hover scaling
• Pulse - Pulsing attention effect

Rotation Effects (3)

• RotateIn - Rotation entrance animation
• RotateOnHover - Hover rotation effect
• FlipCard - 3D card flip animation

Motion Effects (3)

• Bounce - Bouncing entrance effect
• Floating - Continuous floating motion
• Wiggle - Attention-grabbing wiggle

Special Effects (5)

• Shimmer - Shimmering light effect
• Blink - Blinking notification effect
• RevealMask - Mask reveal animation
• TextReveal - Character-by-character text reveal
• ScrollFade - Scroll-synchronized fade

Premium Package (@hngbfv3399/scrollschot-premium-react)

46 Advanced Animations - Professional effects for premium projects:

• Scroll Animations (12): ScrollVideo, ScrollSequence, HorizontalScrollContainer, etc.
• Interactive Effects (6): LiquidButton, MagneticButton, TiltCard3D, etc.
• Text Animations (6): MorphText, TextStagger, TypingText, etc.
• Advanced Effects (8): GlitchEffect, AdvancedParticles, MorphingShape, etc.
• Media & Graphics (8): SVGPathDraw, CanvasScrollFrame, ScrollGallery3D, etc.
• Layout Components (6): CursorTrail, LayeredScrollStack, MarqueeLoop, etc.

Total: 66 Animation Components

🧩 Free Component Usage

Basic Usage

import { FadeIn, SlideIn, ZoomIn } from '@hngbfv3399/scrollschot-react';

function MyComponent() {
  return (
    <div>
      {/* Simple fade in */}
      <FadeIn duration={1000}>
        <h1>Welcome!</h1>
      </FadeIn>

      {/* Slide from left */}
      <SlideIn direction="left" distance={50} duration={800}>
        <p>This slides in from the left</p>
      </SlideIn>

      {/* Zoom in effect */}
      <ZoomIn scale={0.5} duration={600}>
        <div className="card">Zooms in dramatically</div>
      </ZoomIn>
    </div>
  );
}

Interactive Components

import { HoverScale, FlipCard } from '@hngbfv3399/scrollschot-react';

function InteractiveDemo() {
  return (
    <div>
      {/* Hover scale effect */}
      <HoverScale scale={1.05} duration={200}>
        <button>Hover me!</button>
      </HoverScale>

      {/* 3D flip card */}
      <FlipCard
        frontContent={<div>Front Side</div>}
        backContent={<div>Back Side</div>}
        duration={600}
      />
    </div>
  );
}

Text Animations

import { TextReveal, Shimmer } from '@hngbfv3399/scrollschot-react';

function TextDemo() {
  return (
    <div>
      {/* Character-by-character reveal */}
      <TextReveal
        text="Amazing Animation!"
        splitType="chars"
        stagger={50}
        duration={800}
      />

      {/* Shimmering effect */}
      <Shimmer color="#ffffff" duration={1500}>
        <h2>Shimmering Title</h2>
      </Shimmer>
    </div>
  );
}

🪝 Hook Usage

useScrollAnimation

For more control over animations:

import { useScrollAnimation } from '@hngbfv3399/scrollschot-react';

function MyComponent() {
  const { ref, isVisible, progress } = useScrollAnimation('fadeIn', {
    duration: 1000,
    threshold: 0.1,
    once: true,
  });

  return (
    <div ref={ref} style={{ opacity: isVisible ? 1 : 0 }}>
      Animated content (Progress: {Math.round(progress * 100)}%)
    </div>
  );
}

🎨 Available Free Animations

All 20 free animations with examples:

// Fade Effects
<FadeIn duration={1000}>Content</FadeIn>
<FadeAndScale scale={0.8} duration={800}>Content</FadeAndScale>

// Slide Effects  
<SlideIn direction="left" distance={50}>Content</SlideIn>
<ScrollSlide direction="up" distance={30}>Content</ScrollSlide>
<FadeUpOnView duration={600}>Content</FadeUpOnView>

// Zoom & Scale Effects
<ZoomIn scale={0.5} duration={800}>Content</ZoomIn>
<ScaleOnView scale={1.1} duration={500}>Content</ScaleOnView>
<HoverScale scale={1.05} duration={200}>Content</HoverScale>
<Pulse scale={1.05} duration={1000}>Content</Pulse>

// Rotation Effects
<RotateIn degrees={360} duration={1000}>Content</RotateIn>
<RotateOnHover degrees={15} duration={300}>Content</RotateOnHover>
<FlipCard frontContent={<div>Front</div>} backContent={<div>Back</div>} />

// Motion Effects
<Bounce intensity={0.3} duration={800}>Content</Bounce>
<Floating distance={10} duration={2000}>Content</Floating>
<Wiggle intensity={5} duration={500}>Content</Wiggle>

// Special Effects
<Shimmer color="#ffffff" duration={1500}>Content</Shimmer>
<Blink count={3} duration={1000}>Content</Blink>
<RevealMask direction="left" duration={1000}>Content</RevealMask>
<TextReveal text="Amazing!" splitType="chars" stagger={50} />
<ScrollFade startOpacity={0} endOpacity={1}>Content</ScrollFade>

💎 Premium Upgrade

Want more advanced animations? Check out our premium package:

npm install @hngbfv3399/scrollschot-premium-react

Premium Features:

• 46 additional advanced animations
• Complex scroll-triggered effects
• Interactive 3D animations
• Advanced text effects
• Professional UI components
• Priority support

⚙️ Props Reference

Common Props (All Components)

| Prop | Type | Default | Description | |------|------|---------|-------------| | duration | number | 600-1000 | Animation duration (ms) | | delay | number | 0 | Animation delay (ms) | | easing | string | 'ease-out' | CSS easing function | | className | string | '' | CSS class name | | style | CSSProperties | {} | Inline styles | | onAnimationStart | () => void | - | Start callback | | onAnimationComplete | () => void | - | Complete callback |

Specific Component Props

SlideIn

• direction: 'left' | 'right' | 'up' | 'down'
• distance: number (pixels)

HoverScale

• scale: number (scale factor)

FlipCard

• frontContent: ReactNode
• backContent: ReactNode

TextReveal

• text: string
• splitType: 'chars' | 'words'
• stagger: number (delay between characters/words)

🔧 TypeScript Support

Full TypeScript support with proper types:

import { 
  FadeIn, 
  FadeInProps,
  SlideInProps,
  useScrollAnimation 
} from '@hngbfv3399/scrollschot-react';

// Custom component with typed props
interface CustomCardProps extends Omit<FadeInProps, 'children'> {
  title: string;
  content: string;
}

function CustomCard({ title, content, ...fadeProps }: CustomCardProps) {
  return (
    <FadeIn {...fadeProps}>
      <div className="card">
        <h3>{title}</h3>
        <p>{content}</p>
      </div>
    </FadeIn>
  );
}

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📞 Support

• 📚 Documentation
• 🐛 Issues
• 💬 Discussions