# IO Motion **Utility-first, combinable CSS motion library.** Trigger and combine modern web animations with `io-` classes — the Tailwind way, but for *motion*. 🌐 **Website, live demo, playground & full docs → [www.iotemplates.com](https://www.iotemplates.com)** ```html

Hello, motion.

``` - 🧩 **Composable** — stack effects (`io-fade io-slide-up io-blur`) instead of picking one baked animation. - 🎚️ **Tunable** — duration, delay, easing, distance as separate classes (`io-700 io-delay-200 io-ease-spring io-dist-lg`). - 👁️ **Scroll reveal** — `io-reveal` elements animate in when they enter the viewport (IntersectionObserver, ~3 KB JS). - ✍️ **Text in motion** — per-word / per-character staggered reveals, animated gradient & shimmer text. - 🖱️ **Interactions** — hover lift/glow/tilt, magnetic buttons, sweeps. - ♿ **Respectful** — honors `prefers-reduced-motion` out of the box. - 📦 **Drop-in** — one CSS file (+ optional JS). No build step required. CDN, npm, or a plain ``. --- ## Why / 2026 motion trends behind it This library is shaped by where web motion is heading in 2026 — distilled from current design-trend research: - **Restraint over spectacle.** Short distances (16–48px), 400–800ms, soft easing. Motion guides attention, it doesn't perform. → `io-dist-sm`, `io-ease-smooth`. - **Spring / physical easing.** "Real-feeling" overshoot instead of linear ramps. → `io-ease-spring`. - **Scroll-driven reveals & staggering.** Content arrives in choreographed sequence. → `io-reveal`, `io-stagger`. - **Kinetic typography.** Headlines assemble word-by-word or character-by-character. → `io-words`, `io-chars`. - **Blur / frosted transitions.** Elements sharpen into place. → `io-blur`. - **Clip / mask reveals.** Lines and blocks "wipe" into view. → `io-mask-up`. - **Tactile micro-interactions.** Magnetic buttons, tilt, light sweeps on hover. → `io-magnetic`, `io-tilt`, `io-hover-sweep`. - **Accessibility-first.** Reduced-motion is a baseline expectation, not an afterthought. --- ## Install ### CDN (fastest) ```html ``` ### npm ```bash npm install io-motion ``` ```js import "io-motion"; // dist/io.css import "io-motion/js"; // optional runtime (scroll reveal, stagger, text split) ``` ### Plain file / XAMPP Copy `dist/io.css` (or `io.css`) and `io.js` next to your HTML: ```html ``` --- ## The model Every entrance is **base + state(s) + modifiers + trigger**: | Part | Classes | Example | |------|---------|---------| | **Base** | `io` | enables the reveal engine on the element | | **State** (combinable) | `io-fade` `io-slide-up/down/left/right` `io-zoom-in/out` `io-blur` `io-rotate-in` `io-flip-up/down/left/right` `io-mask-up/down/left/right` | what it animates *from* | | **Modifiers** | `io-100…io-2000` · `io-delay-*` · `io-ease-*` · `io-dist-sm/md/lg/xl` · `io-origin-*` | timing & strength | | **Trigger** | `io-reveal` / `io-scroll` (on scroll) · `io-hover` (on hover) · `io-now` (on load) | when it plays | ### Triggers (combinable with any entrance) | Trigger | Plays when | Needs JS | |---------|-----------|----------| | `io-now` | immediately on load | yes (io.js) | | `io-reveal` / `io-scroll` | element enters the viewport | yes (io.js) | | `io-hover` | element (or its direct parent) is hovered | no — pure CSS | | `io-click` | element is clicked | yes (io.js) | | `io-scrub` | **scroll-linked** — progresses continuously as the element moves toward the viewport centre | yes (io.js) | **Scroll-linked (`io-scrub`)** differs from the one-shot `io-scroll`: the effect is tied to scroll *position*, so it advances and reverses as you scroll. Combine with any direction/effect; tune travel with `io-dist-*` or `data-io-scrub="120"`. ```html

slides in as you scroll

colour shifts with scroll

``` ```html

scroll in, slowly

hover to play, fast

on load, springy

``` ### Speed Numeric: `io-100 … io-2000`. Semantic aliases: `io-instant` (150ms) · `io-fast` (300ms) · `io-normal` (600ms) · `io-slow` (1000ms) · `io-slower` (1600ms). Continuous text effects have their own speed (independent of entrance duration): `io-text-slow` / `io-text-normal` / `io-text-fast`. ### Gradient text colors Pick a palette class, or set your own 2–3 colors with CSS variables: ```html Sunset Custom ``` Palettes: `io-grad-aurora` · `io-grad-sunset` · `io-grad-ocean` · `io-grad-mint` · `io-grad-fire` · `io-grad-candy` · `io-grad-gold`. Because states only set the *starting* offset and `io-in` resets every channel at once, **any combination just works**: ```html

fade up

fade, slide right, sharpen

zoom + tilt with spring

``` ### Stagger ```html

One
Two
Three

``` ### Kinetic text ```html

Designed to move

Character by character

animated gradient shimmer sweep ``` ### Attention loops (work standalone) `io-pulse` `io-heartbeat` `io-float` `io-spin` `io-ping` `io-flash` `io-bounce` `io-shake` `io-wobble` `io-jello` `io-vibrate` `io-swing` `io-rubber` `io-tada` ```html ● ``` ### Hover & interaction `io-hover-lift` `io-hover-grow` `io-hover-shrink` `io-hover-rotate` `io-hover-tilt` `io-hover-glow` `io-hover-float` `io-hover-pop` `io-hover-press` `io-hover-underline` `io-hover-sweep` `io-hover-border` · `io-magnetic` · `io-tilt` ```html Magnetic link ``` ### Effects `io-confetti` (burst on hover) · `io-kenburns` · `io-bg-pan` · `io-color-cycle` · `io-marquee` · `io-skeleton` · motion paths (`io-path io-path-move io-path-arc …`). --- ## JavaScript API The runtime auto-initializes on `DOMContentLoaded`. For dynamically added content: ```js IOMotion.init(container); // run everything within a scope IOMotion.reveal(container); // (re)bind scroll reveal IOMotion.stagger(container); IOMotion.splitText(container); IOMotion.pointer(container); // magnetic / tilt IOMotion.confetti(container); ``` Pure-CSS effects (hover, loops, gradient text, paths) need **no JS** at all. --- ## Accessibility When the user has `prefers-reduced-motion: reduce`, all animations and transitions are disabled and content is shown in its final state immediately — no flashing, no movement. --- ## Build from source The source of truth lives in [`src/`](src/). Regenerate the bundles with: ```bash npm run build # Node # or sh build.sh # no Node required ``` This produces `dist/io.css`, `dist/io.min.css`, and a root `io.css` copy. --- ## Releases & CDN Every published version is permanent and pinnable on the CDN: ```html ``` Maintainers — to cut a release (bumps version, tags, pushes): ```bash npm run release:patch # 2.2.0 → 2.2.1 (or release:minor / release:major) npm publish # publishes to npm; jsDelivr/unpkg pick it up automatically ``` See [CHANGELOG.md](CHANGELOG.md) for version history. ## License [MIT](LICENSE) © iotemplates · [www.iotemplates.com](https://www.iotemplates.com)