SmoothKit
Get Started
v1.0 Available

Animations that feel
natural & smooth.

A carefully crafted collection of React hooks for interactions that demand perfection. 60fps, GPU accelerated, and accessible.

$npm install smoothkit
Explore Components
<10kb
Gzipped
60fps
Animation
100%
Type Safe
MIT
License

Designed for performance

Every hook is built with performance in mind. No unnecessary re-renders, no layout thrashing, just smooth animations.

Lightning Fast

Optimized for 60fps performance using RequestAnimationFrame.

Accessible

Respects prefers-reduced-motion automatically.

Type Safe

Written in TypeScript with strict mode enabled.

Hardware Accelerated

Forces GPU layer creation for smooth transitions.

Tree Shakeable

Modular architecture. Import only what you need.

Production Ready

Zero dependencies. Extensively tested.

Interactive Components

Smooth Scroll

Enhanced scroll behavior with custom easing and offset control.

Section 1Smooth acceleration start
Section 2Mid-scroll momentum
Section 3Soft deceleration landing
import { useSmoothScroll } from 'smoothkit';

const scrollTo = useSmoothScroll({
  duration: 1000,
  offset: 80,
  easing: 'premium'
});

Viewport Reveal

Trigger smooth entrance animations when elements enter the viewport.

↓ Scroll down to trigger reveals
Scroll Spacer
Fade In
Animation: fade
Slide Up
Animation: slide-up
Scale In
Animation: scale
End
import { useSmoothReveal } from 'smoothkit';

const ref = useSmoothReveal({
  animation: 'slide-up',
  duration: 600,
  threshold: 0.2
});

Typing Effect

Realistic typing animation with cursor blinking and sequence support.

Single Text
|
Looped Sequence
|
import { useTypingEffect } from 'smoothkit';

const { text } = useTypingEffect({
  text: ['Hello', 'Welcome'],
  speed: 60,
  cursor: true,
  loop: true
});

Smart Counter

Animate numerical values with precision and spring physics.

$0.00
Total Revenue
0
Active Users
import { useSmoothCounterWithRef } from 'smoothkit';

const { count, ref } = useSmoothCounterWithRef({
  from: 0,
  to: 1000,
  duration: 2000,
  trigger: 'visible'
});

Auto Transition

Seamless height and width transitions that adjust to content.

import { useSmoothTransition } from 'smoothkit';

const [ref, bind] = useSmoothTransition({
  duration: 300
});