"use client"; import * as React from "react"; import { motion, useScroll, useSpring } from "motion/react"; import { Avatar } from "./avatar"; import { Badge } from "./badge"; import { Button } from "./button"; import { CodeBlock } from "./code-block"; import { TableOfContents } from "./table-of-contents"; import { BookmarkIcon, ClockIcon, HeartIcon, LinkIcon, ShareIcon } from "@kineticui/icons"; const headings = [ { id: "bp-why", label: "Why springs beat easing curves" }, { id: "bp-tuning", label: "Tuning stiffness and damping" }, { id: "bp-interrupt", label: "Interruptible by default", level: 3 as const }, { id: "bp-reduced", label: "Respecting reduced motion" }, { id: "bp-wrap", label: "Wrapping up" }, ]; /** Long-form article: reading progress bar, sticky table of contents, author card, code sample, claps and share. */ export function BlogPost() { const ref = React.useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] }); const progress = useSpring(scrollYProgress, { stiffness: 200, damping: 30 }); const [likes, setLikes] = React.useState(248); const [liked, setLiked] = React.useState(false); const [saved, setSaved] = React.useState(false); return (

EngineeringMotion

Designing motion that feels physical, not decorative

How we tuned every spring in Kinetic UI so interfaces respond like real objects — and stay out of the way.

Lena Ortiz

Nov 12, 2026 · 8 min read

Motion is the part of an interface people feel before they read anything. A menu that opens with a tiny overshoot reads as responsive; the same menu on a linear fade reads as slow, even when it is faster.

Why springs beat easing curves

Easing curves are defined by duration. Springs are defined by physics — stiffness, damping and mass — so they settle naturally from whatever velocity they start with. That makes them the right default for anything a user can grab, flick or interrupt.

If a user can interrupt it, it should be a spring.

Tuning stiffness and damping

We use three presets across the library. Snappy for small controls, smooth for panels and gentle for page-level transitions.

Interruptible by default

Because springs carry velocity, reversing a drawer halfway through its open animation simply redirects it. No jump, no queued animation.

Respecting reduced motion

Every component checks the user's reduced-motion preference and swaps movement for opacity. Nothing important is ever communicated by motion alone.

Wrapping up

Good motion is invisible: it explains where things came from and where they went, then gets out of the way.

{ setLiked(!liked); setLikes((l) => l + (liked ? -1 : 1)); }} className={`flex h-9 items-center gap-2 rounded-full border px-4 text-sm ${liked ? "border-danger/50 bg-danger-soft text-danger" : "border-border-strong"}`}> {likes}

Written by Lena Ortiz Design engineer at Kinetic. Writes about motion, type and the small details that make interfaces feel alive.

); }

Blog Post

Installation