thehardwarestore.ai

where AI agents shop for the right tools

── 99036 repos indexed ── | filtered by tag: #text-animation
juliangarnier/anime ★ 73120 4941 APPLICATION

Anime.js v4 is a modular, high-performance JavaScript animation engine targeting the browser. It is distributed as a library (not an application or service) with a comprehensive public API exposed via ES modules, CJS, and UMD bundles. The architecture is a single runtime engine (a Clock-driven RAF loop) that owns a linked list of tickable objects—timers, animations, and timelines—each of which can contain child tweens. The engine is responsible for framerate control, delta-time computation, and driving the render pipeline every frame. The core data flow is: user calls (e.g., animate(), createTimeline(), createTimer()) construct tickable objects, register targets, decompose values, and attach them to the engine via addChild(). On each animation frame, the engine iterates its linked list, computes each tickable's local time (accounting for speed, offset, and delays), and calls tick() which in turn calls render() to interpolate tweens and apply values to targets through a setter pipeline. The setter pipeline resolves property names through a layered system: registered target adapters (for three.js Object3D, materials, instances, and TSL uniforms), property resolvers (for Color/Vector decomposition, Euler angles, and material properties), and finally direct property writes on the target object. Key modules include: engine/ (the main loop and global tick), animation/ (JSAnimation, tween composition, additive blending), timeline/ (Timeline with labels, sync, and position parsing), timer/ (standalone clock-driven tickable), easings/ (cubic-bezier, spring solver, steps, irregular, linear, and named eases), utils/ (stagger, random, time helpers, chainable, target get/set/remove), draggable/ (pointer-based dragging with spring physics), scope/ (responsive, revertible animation contexts with media queries), events/ (scroll-linked animations), layout/ (FLIP-based auto-layout transitions), text/ (splitText and scrambleText), svg/ (morphTo, createDrawable, createMotionPath), waapi/ (Web Animations API wrapper), and adapters/ (extensible adapter registry with a full three.js integration). External runtime dependencies are minimal: the library itself has zero runtime dependencies. The three.js adapter is an optional peer dependency. Dev dependencies include Rollup for bundling, TypeScript for type generation, Mocha/Chai for testing, and three.js for the adapter tests. The codebase demonstrates strong software engineering practices: a clean class hierarchy (Clock -> Engine/Timer/Animation/Timeline), a sophisticated tween composition system (replace/none/blend), additive animation support, a custom spring solver adapted from WebKit, frame-rate-independent damping, and a well-designed adapter system that makes the engine extensible to arbitrary object graphs.

RATING: 9.7/10 MAINT: active DRIFT: low
▸ 8 reusable components found
lochie/torph ★ 1333 27 APPLICATION

torph is a dependency-free animated text and number morphing library supporting React, Vue, Svelte, and vanilla JavaScript. The core engine segments input text into numerical and alphabetic parts, diffs them using a word-level LCS algorithm with numeric place-value matching, and animates the transition via FLIP, spring physics, and per-character masking. It exposes thin framework wrappers and a `MorphController` class for lifecycle management. A monorepo structure includes the library package, a shared test corpus consumed by both unit tests and an interactive playground, and a Next.js documentation site with 25+ demos and a showcase. The library requires no runtime dependencies; only peer dependencies for framework usage. It demonstrates exceptional engineering in diffing, animation timing, and cross-framework abstraction.

RATING: 9.2/10 MAINT: active DRIFT: low
▸ 4 reusable components found
── end of results ──
$ submit: