Loading...
Please wait a moment
Production-ready React animation library with 13 specialized NPM packages (@tuel/*). Features scroll animations, interactive galleries, Three.js integration, and performance optimization utilities. Built with TypeScript, Turborepo, and modern monorepo tooling.
React developers face a dilemma: CSS transitions are too basic for modern UX expectations, but mastering raw animation libraries (Framer Motion, GSAP, Three.js) requires deep expertise and significant time investment. Existing solutions lack production-ready defaults, SSR safety, and accessibility features built-in.
The challenge was to create a modular animation library that delivers professional motion design without requiring animation expertise—while remaining tree-shakeable, accessible (WCAG AA compliant), and performant (60fps GPU-accelerated) for production applications.
I developed Tuel, an open-source React animation library that bridges the gap with 13 specialized NPM packages (@tuel/*) providing zero-config defaults, SSR-safe components, and accessibility built-in. The monorepo architecture (Turborepo + pnpm workspaces) manages packages covering motion primitives, scroll effects, galleries, text animations, GSAP/Three.js integration, and performance utilities.
Published to npm with automated Changesets versioning and GitHub Actions CI/CD, Tuel is currently at v0.2.0 (alpha) with active development toward v2.0.0 production release. The roadmap includes expanding test coverage from 5% to 80%+, fixing 9 XSS vulnerabilities, completing comprehensive documentation, and achieving WCAG AA compliance by June 2025.
@tuel/motionFramer Motion primitives
@tuel/scrollScroll-triggered effects
@tuel/galleryImage/video galleries
@tuel/text-effectsTypography animations
@tuel/interactionMouse/cursor effects
@tuel/uiPre-built components
@tuel/gsapGSAP utilities
@tuel/threeThree.js components
@tuel/performanceOptimization hooks
@tuel/stateAnimation lifecycle
@tuel/configTheme system
@tuel/tokensDesign tokens
@tuel/utilsCore utilities
Eliminate animation complexity for React developers by providing professional-grade, production-ready animation components that "just work"—no animation expertise required. Stop the choice between basic CSS transitions and mastering complex animation frameworks.
Become the go-to animation library for React teams shipping polished user experiences, bridging the gap between design ambition and developer productivity. Scale from indie developers to enterprise teams with consistent motion design patterns.
Beautiful animations out of the box with sensible defaults. Customize only when needed. Every component works immediately after installation—no configuration hell.
SSR-safe, accessible (WCAG AA goal), performant (60fps GPU acceleration). Built for real applications with features like prefers-reduced-motion support and keyboard navigation.
13 specialized packages—install only what you need. Tree-shakeable bundles ensure minimal impact on bundle size. Perfect for performance-conscious teams.
Full TypeScript support with strict mode. Comprehensive documentation with interactive examples. Monorepo managed with Turborepo for fast builds and caching.
MIT licensed with public roadmap transparency. Active development toward v2.0.0 with 80%+ test coverage goal. Community-driven with contribution guidelines.
Smooth scroll reveals for product features, image galleries with lightbox, magnetic cursor effects on CTAs, parallax backgrounds for immersive shopping experiences.
Horizontal scroll sections for feature showcases, animated hero text with split effects, sticky cards for pricing tiers, scroll-triggered animations that guide users through value propositions.
Interactive project showcases with image trails, 3D floating objects for visual interest, morphing shapes for section transitions, video galleries with custom controls.
Scroll minimap for intuitive navigation, parallax backgrounds creating depth, animated statistics counters, smooth page transitions, interactive hero sections.
Pre-built UI components for consistent motion design, animation tokens for design-developer handoff, theme system for brand-aligned animations across products.
Documentation sites with syntax-highlighted code blocks, interactive demos showing component behavior, smooth navigation transitions, accessible keyboard shortcuts.
Turborepo manages 13 packages with pnpm workspaces for efficient dependency sharing. Changesets automate versioning and changelog generation. GitHub Actions CI/CD publishes to npm on every release with automated testing and build validation.
TypeScript strict mode with tsup for ESM/CJS builds. Framer Motion, GSAP, Three.js as peer dependencies to reduce bundle size. React 19 + Next.js 15 compatibility. Tailwind CSS integration for styling utilities.
Expanding test coverage from 5% to 80%+ with Vitest (unit) and Playwright (E2E). ESLint + Prettier for code consistency. Manual security audits fixing 9 XSS vulnerabilities and memory leaks. Zero TypeScript errors with strict mode enabled.
Tuel demonstrates end-to-end open-source project ownership with a focus on developer experience, modular architecture, and production-grade quality. The monorepo structure (Turborepo + pnpm) with automated publishing (Changesets + GitHub Actions) showcases modern tooling expertise. Active development toward v2.0.0 with 80%+ test coverage, security hardening, and WCAG AA compliance demonstrates commitment to enterprise-ready open-source software.