Kinetics (Colorion)

Overview

Kinetics is an open-source library of spring-physics micro-interactions and interface animations created by design engineer Csaba Kissi (Colorion). Built around the philosophy that "Motion that has weight", Kinetics replaces artificial, fixed-duration CSS easing functions with natural spring physics governed by stiffness, damping, and mass. Featuring over 150 meticulously tuned interface interactions, each pattern is delivered in three ready-to-use formats: pure hardware-accelerated CSS, composable React hooks/components, and pre-crafted AI agent prompts for tools like Cursor and Claude.

Key Features

• True Spring Physics Tuning: Offers interactive controls for damping, stiffness, and mass to simulate natural overshoots, elastic rebounds, and magnetic pulls.
• 150+ Interface Micro-Interactions: Spans card resizes, magnetic buttons, rubber-band sliders, elastic number counters, toast overshoots, and radial particle bursts.
• Tri-Format Delivery: Copy instant GPU-composited CSS cubic-bezier curves, standalone zero-dependency React code, or drop-in AI prompts.
• Agent-Ready AI Prompts: Every single effect includes a natural-language prompt tailored for AI coding agents to recreate the exact physics in any stack.

Installation & Quick Start

# Kinetics requires no npm installation—simply copy the CSS or React code into your project

import React, { useRef } from 'react';

export function MagneticButton() {
  const btnRef = useRef<HTMLButtonElement>(null);

  const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!btnRef.current) return;
    const rect = btnRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    btnRef.current.style.transform = `translate(${x * 0.35}px, ${y * 0.35}px)`;
  };

  const onMouseLeave = () => {
    if (!btnRef.current) return;
    btnRef.current.style.transform = 'translate(0, 0)';
  };

  return (
    <div onMouseMove={onMouseMove} onMouseLeave={onMouseLeave} className="p-8 inline-block">
      <button
        ref={btnRef}
        className="px-6 py-3 rounded-xl bg-foreground text-background font-medium transition-transform duration-150 ease-out"
      >
        Hover Near Me (Magnetic Pull)
      </button>
    </div>
  );
}

Why Choose Kinetics?

1. Zero Runtime Weight: Harness realistic spring physics through pure CSS and native DOM transitions without loading heavy JavaScript physics engines.
2. AI-Assisted Workflow: Hand off complex spring animation prompts directly to your coding agent to ship high-craft interactive feedback in minutes.