fluid

Solid

Production-grade web motion design for React and Tailwind sites. Use when building, choosing, or reviewing animations, scroll effects, reveals, page transitions, hovers, counters, marquees, or micro-interactions. Encodes easing, timing, spring, origin, and reduced-motion rules, and ships a drop-in component library.

Web & Frontend 3 stars 0 forks Updated 6 days ago MIT

Install

View on GitHub

Quality Score: 79/100

Stars 20%
20
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Fluid Motion that feels like an extension of the user, not decoration. This skill is a house motion language: a small set of rules that decide whether to animate and how, plus a library of components that already follow them. The rules are distilled from years of our own production sites into one house motion language. > House craft bar: the finish reference is plrstudio.fr. Motion stays restrained and serves the content (Swiss craft, the motion only accompanies). The differentiator is the quality of each detail, not the count of effects. When in doubt, do less, and make what remains feel inevitable: signature easings, spring micro-interactions, custom SVG over stock icons, a rationed brand accent. ## When to use this skill Whenever a task involves movement on a web interface: - adding or changing an animation, transition, hover, or scroll effect - building a reveal on scroll, a rolling counter, a marquee, a smooth-scroll page - reviewing a UI for "why does this animation feel off" - starting a new site and wanting the motion baseline set correctly ## First decision: does it deserve motion? fluid loves motion, used on purpose. Animate what rewards the eye and clarifies the moment; keep instant what the user hits constantly. The aim is fluid, not busy. Let it flow when it is occasional, teaches something, gives feedback, reveals content, or keeps space consistent (a panel returns the way it left). That is most of a marketing site: heroes, reveals, counters, hovers, s...

Details

Author
Darcos-Loft
Repository
Darcos-Loft/fluid
Created
1 months ago
Last Updated
6 days ago
Language
JavaScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

motion

Build sophisticated React animations with Motion (formerly Framer Motion) - declarative animations, gestures (drag, hover, tap), scroll effects, spring physics, layout animations, and SVG manipulation. Optimize bundle size with LazyMotion (4.6 KB) or useAnimate mini (2.3 KB). Use when: adding drag-and-drop interactions, creating scroll-triggered animations, implementing modal dialogs with transitions, building carousels with momentum, animating page/route transitions, creating parallax hero sections, implementing accordions with smooth expand/collapse, or optimizing animation bundle sizes. For simple list animations, use auto-animate skill instead (3.28 KB vs 34 KB). Troubleshoot: AnimatePresence exit not working, large list performance issues, Tailwind transition conflicts, Next.js "use client" errors, scrollable container layout issues, or Cloudflare Workers build errors (resolved Dec 2024).

1 Updated 3 days ago
NafisRayan
Web & Frontend Solid

motion-design

Restrained, accessible web motion — Framer Motion declarative patterns and CSS-only staggered reveals for high-impact moments, always bundle-aware and reduced-motion-safe. Use when adding animation/transitions to a UI (entrance reveals, list stagger, page/route transitions, micro-interactions) or when motion feels janky, heavy, or gratuitous.

24 Updated 1 weeks ago
nguyenthienthanh
Web & Frontend Solid

design-motion

Design and implement purposeful motion — micro-interactions, page transitions, scroll animations, and hover effects — using Framer Motion, CSS animations, and GSAP. Use when the user says "add animation", "make it feel alive", "micro-interaction", "page transition", "scroll animation", "hover effect", or "motion design". Outputs performance-safe, reduced-motion-aware animation code. Pairs with design-frontend, enhance-web-ui. Do NOT use for layout, typography, or purely functional UI work.

6 Updated 2 days ago
kensaurus