@drivexstudio/animations

Creative text animations and micro-interaction components for React, built on GSAP, Framer Motion, and Lenis.

Install

npm install @drivexstudio/animations

react and react-dom (>=18) are peer dependencies — install them in your app if they aren't already.

This package requires Tailwind CSS v3+ in the consuming app, plus a few design tokens that are NOT part of Tailwind's default theme. Components are styled with Tailwind utility classes rather than shipping compiled CSS, so if these tokens aren't already defined in your project, classes like bg-brand produce no CSS at all — components render unstyled with no error.

Your app must already define, under the exact names below (this package does not ship a preset or CSS file — add these to your own tailwind.config.js theme and global CSS if they don't already exist):

| Token | Type | Used for | |---|---|---| | brand | Tailwind color | bg-brand, text-brand | | background | Tailwind color | bg-background, ring-offset-background | | body-sm | Tailwind fontSize | text-body-sm | | body | Tailwind fontSize | text-body | | body-lg | Tailwind fontSize | text-body-lg | | --ease-power4-in-out | CSS custom property | inline transition-timing-function on hover/press micro-interactions |

Also make sure Tailwind's content config scans this package's compiled output, or it will purge classes it thinks are unused:

content: [
  './src/**/*.{js,jsx,ts,tsx}',
  './node_modules/@drivexstudio/animations/dist/**/*.{js,cjs}'
]

A Tailwind preset + base CSS file shipping these tokens with sensible defaults previously lived in this package and can be reintroduced later if useful across multiple consuming projects — for now this documents the requirement instead.

Setup

Some components depend on context providers being mounted above them in your app tree. Wrap your root layout once:

import {
  LenisProvider,
  PreloaderProvider,
  PageTransitionProvider,
  PageEnterProvider
} from '@drivexstudio/animations';

export default function RootLayout({ children }) {
  return (
    <LenisProvider>
      <PreloaderProvider>
        <PageTransitionProvider>
          <PageEnterProvider>
            {children}
          </PageEnterProvider>
        </PageTransitionProvider>
      </PreloaderProvider>
    </LenisProvider>
  );
}

You only need the providers for the features you actually use — e.g. skip PreloaderProvider if you don't render <Preloader />.

Usage

Scramble text on hover

import { ScrambleText } from '@drivexstudio/animations';

<ScrambleText triggerOnHover duration={0.6}>
  Hover me
</ScrambleText>

Scroll-triggered headline

import { ScrollAnimatedHeadline } from '@drivexstudio/animations';

<ScrollAnimatedHeadline
  headline={{ text: 'Built for motion', level: 'h1' }}
/>

Animated button / link

import { AnimatedButton, AnimatedLink } from '@drivexstudio/animations';

<AnimatedButton onClick={handleClick}>Get started</AnimatedButton>
<AnimatedLink href="/work">View work</AnimatedLink>

Scramble multiple elements together

import { ScrambleGroup, ScrambleText } from '@drivexstudio/animations';

<ScrambleGroup stagger={0.08}>
  <ScrambleText>First line</ScrambleText>
  <ScrambleText>Second line</ScrambleText>
</ScrambleGroup>

Components

| Export | Description | |---|---| | ScrambleText | Character-scramble reveal/hover text effect | | ScrambleGroup / useScrambleGroup | Staggers multiple ScrambleText children on scroll or manually | | AnimatedHeadline | Headline with entrance/scroll animation | | ScrollAnimatedHeadline | Scroll-triggered wrapper around AnimatedHeadline | | AnimatedButton | Button with built-in micro-interaction | | AnimatedLink | Link with built-in micro-interaction | | AnimatedProse / AnimatedProseContext / stagger | Paragraph-level staggered text reveal | | AnimatedSubtext | Subtext reveal animation | | AnimatedText | Generic staggered text animation | | Preloader | Page preloader, driven by PreloaderProvider |

Providers & hooks

| Export | Description | |---|---| | LenisProvider / useLenis / scrollToTop / getLenis / setCssScrollLocked / getCssScrollLocked | Smooth-scroll setup and helpers | | PreloaderProvider / usePreloader | Preloader phase state | | PageTransitionProvider / usePageTransitionContext / usePageTransition | Route-transition phase state | | PageEnterProvider / usePageEnterContext / usePageEnter | Coordinates staggered "page enter" animations across components | | useIdleGSAP | Runs a GSAP setup callback during browser idle time | | useAsciiDelay | Small timing utility | | useDualLayerScramble | Low-level hook behind ScrambleText's dual-layer effect |

Low-level utilities

gsap, useGSAP, ScrollTrigger, SplitText, ScrambleTextPlugin, cx, cva, and easingDefinitionToFunction are re-exported for consumers who want to build custom animations with the same GSAP plugin setup this package uses internally.

Development

npm install
npm run build   # bundles packages/index.js -> dist/ (ESM + CJS)
npm run dev      # watch mode

License

MIT