A token-driven animation, filter, and reactive-data runtime — composed through class chains, SCSS mixins, or a fluent JS API. Zero dependencies. Three authoring surfaces. One keyframe set.
Five framework components — buttons, inputs, chips, toggles, and image frames. Every one shipped as .lsd-* class chain, every one stackable with the animation library.
Hover any tile to fire the animation. The class drops onto any element — there's no per-component branch, just .lsd-fx--* on whatever's painting.
Click a thumbnail. The stage flips into a mini-preview of one block from that category.
Pick a width. The block reflows from the inside-out — no media queries, no viewport guessing.
Token-driven motion across every breakpoint.
Carries proportion from inline-size, not viewport.
Falls into place when the container narrows.
Container does the work — `container-type: inline-size`.
Each row stacks the component class with multiple animation classes — same syntax, same chaining rules, regardless of component type.
.lsd-btn .lsd-fx--lift .lsd-fx--shimmer
.lsd-btn--soft .lsd-fx--pop .lsd-fx--glow-pulse
.lsd-btn--outlined .lsd-fx--tilt .lsd-fx--border-draw .lsd-fx--magnetic
.lsd-input .lsd-fx--lift .lsd-fx--ripple-focus
.lsd-chip--soft .lsd-fx--pop .lsd-fx--glow-pulse
lsd-buttons.css →One CSS file, one import, every animation primitive in your project.
import '@ferretdev/lsd-framework/lsd-buttons.css' import motion from '@ferretdev/lsd-framework/lsd-motion.js' motion.configure({ cursor: { enabled: true } }) motion.start()