# Fluid design > Use when springs, gestures or interruptible motion need physical continuity under direct manipulation. Design or refine springs, gestures, and interruptible motion when physical continuity or direct manipulation matters. ## Facts - Type: Agent skill - Discipline: Design - Author: Karl Koch (https://github.com/kemiljk) - Upstream: https://github.com/kemiljk/skills/blob/main/skills/fluid-design/SKILL.md - Source file: https://raw.githubusercontent.com/kemiljk/skills/main/skills/fluid-design/SKILL.md (3459 bytes, sha256:7b553eba21cc930436c38180b8e5c9661867be2733251b1b9accfe622055d281) - Licence: MIT - Upstream copy last changed: 2026-09-17 - Status: listed, not yet ruled on by the curator ## Use it I want to use the Fluid design skill by Karl Koch. This is what it does, in the author's own words: Design or refine springs, gestures, and interruptible motion when physical continuity or direct manipulation matters. Download the whole folder at https://github.com/kemiljk/skills/tree/main/skills/fluid-design, SKILL.md and every file beside it, into your skills directory: ~/.claude/skills/fluid-design/ for Claude Code, ~/.agents/skills/fluid-design/ for Codex, ~/.cursor/skills/fluid-design/ for Cursor. Get it from the author's repo, not from startupskills.dev. Then tell me the path you installed it to and how to invoke it. Nothing here is vendored: install from the author's repo, not from this site. A verbatim copy of the author's file follows for reading, under the licence reproduced after it; the current file is in the author's repo. ## Links - Page: https://startupskills.dev/kemiljk/fluid-design - Author: https://startupskills.dev/kemiljk - Index: https://startupskills.dev/llms.txt ## The file itself --- name: fluid-design description: "Design or refine springs, gestures, and interruptible motion when physical continuity or direct manipulation matters." license: MIT --- # Fluid Design Make interfaces feel like continuous physical systems, not discontinuous state flips. ## Composition with other skills - This skill owns **how interaction should feel**. - `modern-css-html` owns **the most native implementation** that can still deliver that feel. - Prefer CSS/HTML when they can express the behaviour. - Use JavaScript/Motion/SwiftUI when you need interruption, velocity inheritance, gesture continuity, or spring physics CSS cannot express cleanly. ## Defaults 1. Prefer springs over fixed-duration easings for interactive translation and scale. 2. Every user-triggerable animation must be interruptible. 3. Prefer direct manipulation over button-only indirection when the object can be grabbed. 4. Preserve velocity across gesture boundaries (release → settle/dismiss). 5. Keep shared identity across state/route changes when the same object survives. 6. Adapt interaction models to input method (mouse, trackpad, touch, keyboard). 7. Prefer FLIP, layout animation, or View Transitions for spatial continuity. Use direct layout-property animation only when appropriate to the component and its measured rendering cost. 8. Add progressive resistance at edges and rubber-banding at boundaries. 9. Sequence choreography: acted object leads, surroundings yield, then settle. 10. Provide a reduced-motion path that preserves affordances with safer alternatives. ## Prefer / Reject | Prefer | Reject | | --- | --- | | `type: "spring"` for interactive motion | `transition: all` | | CSS `transition` for colour/opacity | Expensive layout animation without a reason or performance check | | Alternate reduced-motion layouts | `animation: none !important` as the only a11y plan | | Velocity-aware hover gating on dense surfaces | Debounced hover that feels dead, or ungated strobing | | Transform + opacity | Long locked keyframe sequences users must wait out | ## Tuning starting points - UI springs: stiffness `200–400`, damping `20–30`, mass `0.8–1.2` - Layout reflow: ~`200–350ms` or a well-damped spring - Gesture dismiss: combine offset threshold + velocity threshold - Dense hover surfaces: EMA-smoothed velocity with separate engage/disengage thresholds ## Input and accessibility - Desktop + motion: springs, deflection, velocity gating as designed. - Desktop + reduced motion: keep hierarchy and controls; swap spatial physics for quieter opacity/colour/snap models. - Touch: prefer drag/scroll metaphors over hover-dependent discovery. - Keyboard: every interactive surface remains operable without pointer precision. ## Review checklist - [ ] Can the user reverse or redirect mid-motion? - [ ] Does travel distance/velocity change the motion response? - [ ] Are only compositor-friendly properties animating for interaction? - [ ] Does reduced motion keep the same tasks possible? - [ ] Do list/grid reflows preserve spatial memory? - [ ] Are hover-dense regions gated against fast pointer sweeps? - [ ] Is JS justified because CSS cannot express the behaviour? ## References - Read [Motion recipes](references/motion-recipes.md) for a matching gesture or transition implementation. - Read [Principle notes](references/principles.md) when deciding how continuity should behave. Load only the reference needed for the task. ## Licence of the file above The file above is https://raw.githubusercontent.com/kemiljk/skills/main/skills/fluid-design/SKILL.md, by Karl Koch, reproduced without changes. - Source: https://github.com/kemiljk/skills/blob/main/skills/fluid-design/SKILL.md - Copyright: Copyright (c) 2026 Karl Koch - Licence: MIT, https://raw.githubusercontent.com/kemiljk/skills/main/LICENSE The repo's licence file, verbatim from https://raw.githubusercontent.com/kemiljk/skills/main/LICENSE: MIT License Copyright (c) 2026 Karl Koch Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.