studiomotion

v2.3.3

Published

4 days ago

High-performance physics animation engine with spring dynamics, 2D matrix staggers, ScrollTrigger, FLIP layout, SVG morphing, and 58+ built-in UI recipes.

0High
0Medium
0Low

imravifr

animation motion spring-physics studiomotion timeline draggable stagger flip-layout threejs-animation svg-animation scroll-trigger onscroll kinetic-typography javascript

StudioMotion

The ultra-lightweight, zero-dependency physics animation & scroll engine for modern web apps.
Harmonic Springs • 2D Matrix Staggers • Scroll Scrubbing • FLIP Layout • SVG & Kinetic Text • Three.js 3D WebGL • 58+ UI Recipes

Documentation • Live Demos • 50+ UI Recipes • 15-in-1 Studio

⚡ Why StudioMotion?

StudioMotion is engineered from the ground up for front-end developers who demand fluid 120 FPS motion with a tiny footprint (~2.8 kB):

🪶 Ultra Lightweight: Under ~2.8 kB min+gzip with zero dependencies.
🧲 Analytical Harmonic Springs: Physically accurate mass, stiffness, and damping calculations with natural overshoot.
⏱️ Per-Property Keyframe Tracks: Independent duration, delay, easing, and keyframes per CSS/transform/object property.
🎨 Universal Complex String & Color Engine: Interpolate box-shadow, filter, clip-path, #hex (3/4/6/8-digit), rgb(), rgba(), hsl(), and hsla().
📜 Zero-Jitter Scroll Engine (onScroll): Scroll-driven viewport scrubbing and trigger callbacks without extra plugins.
📐 2D Matrix Grid Staggers: Wave ripple delays radiating outward from center, edges, or custom grid coordinates.
🔤 Kinetic Text & Scrambler: Letter-by-letter splitting and matrix hacker scramble deciphering built-in.
🖊️ SVG Drawing & Auto-Segmenting Morph: Animate stroke dash offsets, guide along motion paths, and morph arbitrary SVG d paths seamlessly.
🧊 First-Class Three.js 3D WebGL Adapter: Direct position, Euler rotation ('deg', 'turn', 'rad'), uniform scaling, material color/opacity, and camera transitions.
🔄 FLIP Layout Transitions: Seamless element reparenting and grid rearrangement with automatic inverse matrices.
🎛️ 58+ Built-in UI Recipes: One-liner drop-in animations for buttons, modals, cards, charts, and loaders.
📦 100% Tree-Shakeable ESM & TypeScript: Complete autocomplete definitions included.

📦 Installation

# npm
npm install studiomotion

# pnpm
pnpm add studiomotion

# yarn
yarn add studiomotion

CDN Import

<script src="https://cdn.jsdelivr.net/npm/studiomotion@latest/motion-engine.js"></script>
<!-- or via unpkg -->
<script src="https://unpkg.com/studiomotion@latest/motion-engine.js"></script>

🚀 Quickstart

1. Named ESM Imports

import { animate, onScroll, stagger, text, svg, recipes } from 'studiomotion';

// Spring animation with 2D transform & opacity
animate({
  targets: '.card',
  translateY: [50, 0],
  rotateX: [25, 0],
  scale: [0.9, 1],
  opacity: [0, 1],
  duration: 800,
  easing: 'spring'
});

2. Default Import

import StudioMotion from 'studiomotion';

StudioMotion.animate({
  targets: '#hero-button',
  scale: [0.8, 1.1, 1],
  duration: 600,
  easing: 'spring'
});

3. CommonJS (Node / Bundlers)

const { animate, timeline, onScroll } = require('studiomotion');

📖 Core Modules & Features

1. Per-Property Keyframe Tracks & Spring Physics

Every property can have its own independent timeline track, duration, delay, and easing:

import { animate } from 'studiomotion';

animate({
  targets: '.box',
  translateX: [
    { value: 100, duration: 400, delay: 100, easing: 'easeOutQuad' },
    { value: 300, duration: 800, easing: 'spring' }
  ],
  rotate: [
    { value: '1turn', duration: 1200, easing: 'easeInOutCubic' }
  ],
  opacity: [
    { value: 0.5, duration: 200 },
    { value: 1, duration: 600 }
  ]
});

2. Universal Complex String & Color Interpolation

Seamlessly interpolates multi-number CSS strings, filters, shadows, and all color formats:

import { animate } from 'studiomotion';

animate({
  targets: '.card',
  filter: ['blur(12px) brightness(0.8)', 'blur(0px) brightness(1.2)'],
  boxShadow: ['0 5px 15px rgba(0,0,0,0.2)', '0 25px 50px rgba(0,229,255,0.6)'],
  backgroundColor: ['hsl(210, 100%, 50%)', '#ff6b00'],
  duration: 900,
  easing: 'spring'
});

3. 2D Matrix Grid Stagger Ripple

import { animate, stagger } from 'studiomotion';

animate({
  targets: '.grid-cell',
  scale: [0, 1],
  rotate: [-15, 0],
  duration: 600,
  // Radiates outward from center across a 10x10 matrix grid
  delay: stagger(40, { grid: [10, 10], from: 'center' }),
  easing: 'spring'
});

4. ScrollTrigger Viewport Scrubbing (`onScroll`)

import { onScroll } from 'studiomotion';

onScroll({
  target: '#featureSection',
  start: 'top 80%',
  end: 'bottom 20%',
  sync: true, // Progressively scrub with scrollbar
  animation: {
    translateY: [60, 0],
    scale: [0.88, 1],
    opacity: [0, 1],
    easing: 'spring'
  },
  onEnter: () => console.log('Section entered viewport'),
  onLeave: () => console.log('Section left viewport')
});

5. Advanced Timeline Choreography

Features timeScale, nested timelines, set(), addCallback(), and relative percentage offsets:

import { timeline } from 'studiomotion';

const tl = timeline({ timeScale: 1.2 });

tl.set('.badge', { opacity: 0 })
  .add({ targets: '.hero', translateY: [50, 0], duration: 600, easing: 'spring' })
  .addCallback(() => console.log('Hero animation reached 300ms!'), 300)
  .add({ targets: '.badge', opacity: 1, duration: 400 }, '+=50%')
  .addLabel('contentReady')
  .add({ targets: '.cta', scale: [0.8, 1], duration: 500, easing: 'spring' }, 'contentReady');

tl.play();

6. First-Class Three.js 3D WebGL Adapter

Direct 3D mesh vector manipulation, camera transitions, and group staggering:

import * as THREE from 'three';
import { animateThree, stagger } from 'studiomotion';

// 1. Direct 3D Mesh Animation
animateThree(mesh, {
  position: { x: [0, 50], y: [0, 100], z: -20 },
  rotation: { y: '1turn', x: '45deg' },     // Supports 'deg', 'turn', 'rad', or raw radians
  scale: 2,                                // Scales x, y, z uniformly
  material: { 
    opacity: [0, 1], 
    color: '#ff6b00'                       // Auto-sets Three.js Color
  },
  duration: 1200,
  easing: 'spring'
});

// 2. Camera Projection Transitions (Auto-calls updateProjectionMatrix)
animateThree(camera, {
  fov: [45, 60],
  zoom: [1, 1.5],
  position: { z: 120 },
  duration: 900,
  easing: 'easeInOutCubic'
});

// 3. Staggering 3D Groups & Particle Meshes
animateThree(meshGroup.children, {
  position: { y: [0, 30] },
  scale: [0.5, 1],
  stagger: stagger(40, { from: 'center' }),
  duration: 800,
  easing: 'spring'
});

7. Kinetic Typography & Matrix Scramble

import { text, animate, stagger } from 'studiomotion';

// Letter-by-letter kinetic pop
const chars = text.splitChars('#headline');
animate({
  targets: chars,
  translateY: [40, 0],
  rotateZ: [-20, 0],
  stagger: 35,
  easing: 'spring'
});

// Cyberpunk text decipher scramble
text.scramble('#cyberText', {
  finalText: 'STUDIOMOTION ENGINE ONLINE',
  duration: 1200,
  charset: '0123456789!@#$%^&*<>[]{}'
});

8. SVG Path Draw, Motion Paths & Auto-Segmenting Morph

import { svg } from 'studiomotion';

// Draw SVG stroke outline
svg.createDrawable('#checkmark', { duration: 900, easing: 'easeOutCubic' });

// Guide element along SVG curve
svg.createMotionPath('#rocket', '#curvePath', {
  autoRotate: true,
  duration: 2500,
  easing: 'easeInOutCubic'
});

// Smooth SVG path morphing (Auto-samples & normalizes unequal point counts)
svg.morphTo('#startPath', '#endPath', { duration: 1000, easing: 'spring' });

9. Physics Draggable with Inertia

import { draggable } from 'studiomotion';

draggable('.card', {
  inertia: true,
  bounds: '#container',
  snap: 20,
  onDrag: (x, y) => console.log('Dragging:', x, y),
  onDragEnd: (x, y) => console.log('Dropped at:', x, y)
});

10. FLIP Layout Transitions

import { layout } from 'studiomotion';

const flip = layout('.list-item');
flip.record(); // Record initial bounding boxes

// Rearrange DOM elements
container.appendChild(item);

// Smoothly interpolate from previous positions to new layout
flip.play({ duration: 500, easing: 'spring' });

11. Framework Integration & Auto-Cleanup (`scope`)

// React Hook Example
import { useEffect, useRef } from 'react';
import { animate, scope } from 'studiomotion';

export function Card() {
  const ref = useRef(null);

  useEffect(() => {
    const ctx = scope(ref.current);
    ctx.add(animate({
      targets: ref.current,
      translateY: [40, 0],
      scale: [0.95, 1],
      easing: 'spring'
    }));

    return () => ctx.revert(); // Auto cleanup on unmount
  }, []);

  return <div ref={ref} className="card">Smooth Motion</div>;
}

🎨 58+ Built-in UI Recipes (`recipes.*`)

StudioMotion includes production-ready UI animation recipes accessible via recipes or top-level shortcuts:

| Category | Available Recipes | | :--- | :--- | | Typography & Text | letterSplit, wordFloat, blurUnmask, gradientWave, typewriterBlink, counterRoll, perspectiveFold, neonFlicker, skewGlitch, waveStagger | | Bento & 3D Cards | tilt3D, bentoGlow, depthParallax, glassmorphismFlip, cardElevate, perspectiveFan, flip180, isometricPop, magneticSpring, cardUnfold | | Micro-Interactions | buttonPop, magnetic, bellWiggle, radarRings, heartPop, checkDraw, toggleSwitch, fluidRipple, accordionDrawer, statusDot | | Data & Dashboards | countUp, progressFill, circularGauge, audioEqualizer, tickerMarquee, stepperFlow, sparkline, donutChart, telemetryPing, skeletonShimmer | | Overlays & Transitions | modalDrop, sidebarFly, morphBlob, svgLogoDraw, planetaryOrbit, techParticles, tabSlider, backdropUnmask, cardStackRoll, curtainWipe | | Matrix & Swarm | gridRipple, fireflySwarm, typewriterHuman, particleExplode, magneticField |

import { spring, shake, tilt, modal, magnet, scramble, gridRipple } from 'studiomotion';

// Trigger one-liner presets instantly
tilt('.bento-card');
magnet('.cta-button', '.button-wrapper');
scramble('#status', 'CONNECTED');

🛠️ Comparison Matrix

👤 Author & Contact

GitHub: @myselfrxvi
Telegram: @x1337R
Website: https://studiomotion.vercel.app