Kineto

Interactive web motion effects with live controls and copy-ready code — for Vanilla JavaScript, React, Vue, and jQuery.

실시간으로 조절하고 코드를 그대로 복사해 쓰는 웹 모션 라이브러리 — 바닐라 JS · React · Vue · jQuery 지원.

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Русский · Italiano

Live demo · Module reference · AI prompt guide · Feature contract

Kineto — the name comes from kinetic (from the Greek kínēsis, “motion”). A fitting name for a library that is all about motion on the web.

Kineto is an interactive web motion effects library with live controls and copy-ready code — 51 modules for motion, media, scroll, loaders, and text, with integrations for JavaScript, React, Vue, and jQuery. Attach effects with a single data-kt-* attribute or drive them precisely through a JavaScript API. The core has no required dependencies, and on unsupported browsers or low-end devices the effects switch off while the content stays intact.

Building with an AI coding tool (Cursor, Claude, etc.)? See the AI prompt guide — it includes a ready-to-paste instruction that tells the assistant to reach for Kineto modules first for motion and interaction.

Highlights

Every effect is tunable in the live demo: adjust the options, hit Apply, and copy the resulting HTML or JavaScript.

Progressive Print — lazy images resolve in like an inkjet print, line by line, low to high resolution.

Card Spotlight & Reflection — cardGlow tracks the pointer with a spotlight, surface sheen, and a luminous border.

Text Transition — textTransition swaps phrases with slide, blur, or scale transitions.

ScrollVelocity — scrollVelocity skews, scales, and shifts elements in response to scroll speed and direction.

Lightbox — lightbox is a full-screen image viewer with groups, zoom, and a minimap.

See the full module list below for all 51 modules.

Installation

npm

npm install @dong-gri/kineto

import Kineto from '@dong-gri/kineto';
import '@dong-gri/kineto/style.css';

Kineto.autoInit();

CDN (script tag, no build step)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dong-gri/kineto/dist/kineto.min.css">
<script src="https://cdn.jsdelivr.net/npm/@dong-gri/kineto/dist/kineto.umd.min.js"></script>
<script>
  Kineto.autoInit();
</script>

CDN (ESM)

import Kineto from 'https://cdn.jsdelivr.net/npm/@dong-gri/kineto/+esm';

Quick start

Everything works from HTML attributes alone.

<h2 data-kt-text-reveal="stream">Text that streams in</h2>
<strong data-kt-counter="pop" data-kt-to="98760" data-kt-format=",">98,760</strong>
<img data-kt-lazy="skeleton" data-src="./cover.webp" alt="Cover">
<section data-kt-reveal="fade-up">Appears on scroll</section>

The same features are available through the JavaScript API.

Kineto.counter('#total', { preset: 'pop', to: 98760, format: ',' });
Kineto.reveal('.card', { preset: 'fade-up', stagger: 0.06 });
const lightbox = Kineto.lightbox('.gallery img', { group: 'work', minimap: true });

iOS edge-to-edge (notch & home bar)

Full-screen effects — the loader, page reveal and page transition — cover the whole viewport. So they extend under the iPhone notch and home bar instead of leaving a mismatched strip, add viewport-fit=cover to your viewport meta:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Optional dependencies

The core runs on its own. If GSAP + ScrollTrigger (scroll scrubbing) or Lenis (smooth scroll) are present on the page, Kineto detects and uses them automatically; otherwise it falls back to standard APIs.

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1/dist/lenis.min.js"></script>

Smooth scroll is off by default and opt-in at runtime.

Kineto.enableSmooth({ lerp: 0.08 });
Kineto.disableSmooth();

Modules

| Module | Activation attribute | Purpose | |---|---|---| | accordion | data-kt-accordion | Accessible <details> accordion, CSS-customizable arrow | | ambientMedia | data-kt-ambient-media | Ambient glow sampled from media | | blurText | data-kt-blur-text | Per-character blur reveal | | bottomSheet | data-kt-bottom-sheet | Draggable bottom sheet with focus trap | | brushReveal | data-kt-brush-reveal | Pointer brush-mask reveal / scratch card | | cardGlow | data-kt-card-glow | Pointer spotlight, surface sheen, luminous border | | confetti | data-kt-confetti | Click / view confetti burst | | counter | data-kt-counter | Number count, flip, clock, countdown | | coverReveal | data-kt-cover-reveal | Color cover wipe reveal | | cssScroll | data-kt-css-scroll | Scroll bound to CSS vars / scroll & view timeline | | cursor | data-kt-cursor | Eleven custom cursor presets | | drag | data-kt-drag | Drag with inertia, bounds, snap-back, keyboard | | flip | data-kt-flip | FLIP layout animation on reorder / add / remove | | fullpage | data-kt-fullpage | Fullpage section paging (x / y / mixed axis) | | gesture | data-kt-gesture | whileHover / whileTap spring feedback | | glitch | data-kt-glitch | RGB slice and glitch reveal | | hold | data-kt-hold | Hold / mash-to-confirm gauge | | horizontalScroll | data-kt-horizontal-scroll | Pinned horizontal scroll section | | lazy | data-kt-lazy | Image load effects (skeleton, pixelate, print, dissolve) | | lightbox | data-kt-lightbox | Full-screen viewer, groups, zoom, minimap, filmstrip | | loader | data-kt-loader | Loader bound to real progress sources | | magnetic | data-kt-magnetic | Magnetic pointer response | | marquee | data-kt-marquee | Continuous marquee | | megaMenu | data-kt-mega-menu | GNB dropdown / mega menu (keyboard + aria) | | mouseParallax | data-kt-mouse-parallax | Pointer / gyroscope parallax | | overflowText | data-kt-overflow-text | Ways to handle overflowing text + item scenes | | pageReveal | data-kt-page-reveal | Page-entry overlay | | pageTransition | data-kt-page-transition | Same-origin page transitions | | parallax | data-kt-parallax | Scroll parallax | | progress | data-kt-progress | Reading progress bar / ring | | radial | data-kt-radial | Radial (wheel) carousel | | reveal | data-kt-reveal | Scroll-entry reveal | | ripple | data-kt-ripple | Click ripple | | scrollSequence | data-kt-scroll-sequence | Image-sequence scrubbing | | scrollShadows | data-kt-scroll-shadows | CSS edge shadows on scroll containers | | scrollVelocity | data-kt-scroll-velocity | Scroll speed / direction response | | shuffle | data-kt-shuffle | Character shuffle decode | | slider | data-kt-slider | Slide and coverflow | | stickyHeader | data-kt-sticky-header | Shrinking / cover-to-fixed sticky header | | stickyStack | data-kt-sticky-stack | Sticky stack (vertical / horizontal / floating) | | switch | data-kt-switch | Accessible toggle switch (form-usable) | | tabs | data-kt-tabs | WAI-ARIA tabs, segmented control | | textFill | data-kt-text-fill | Scroll-driven text fill | | textReveal | data-kt-text-reveal | Text reveal (incl. Hangul composition) | | textSplit | data-kt-text-split | Character / word split motion | | textTransition | data-kt-text-transition | Text swap transitions (direction options) | | tilt | data-kt-tilt | 3D tilt and glare | | toast | data-kt-toast | Status toast (role=status/alert) | | tooltip | data-kt-tooltip | Accessible tooltip (auto-placement) | | typewriter | data-kt-typewriter | Typing effect | | vibrate | data-kt-vibrate | Haptic vibration feedback |

For each module's variants and full option list, see the module reference and kineto.features.json.

Framework adapters

import { Motion } from '@dong-gri/kineto/react';
<Motion as="h2" type="textReveal" options={{ mode: 'hangul' }}>Hello</Motion>

import KinetoVue from '@dong-gri/kineto/vue';
app.use(KinetoVue);

import installKineto from '@dong-gri/kineto/jquery';
installKineto(window.jQuery);
$('.card').kineto('reveal', { preset: 'fade-up' });

Browser support

Latest Chrome, Edge, Firefox, and Safari (desktop and mobile). With prefers-reduced-motion enabled, every module renders its final state without animation; on unsupported environments the effects degrade to static content.

Build

npm install
npm run build   # emits dist/
npm run verify  # lint, build, tests, contract checks

License

MIT © dongri.me · Built with AI vibe-coding.