design-stack

The motion and design layer — every tool that makes a 19Keys surface feel expensive, in one place, with the install line and a working demo you can run in about two minutes.

This is the layer people ask about most and find last. It used to live buried inside /the-stack; it has its own home now.

Everything listed here is free and open-source unless it is explicitly marked otherwise.

The motion engine

What this hub itself runs on. Look at any page here and you are looking at these two.

Tool	What it does	Install
GSAP	The industry-standard web animation library. Scroll-triggered reveals, timelines, easing that actually feels designed. Fully free since the Webflow acquisition — every plugin included.	`npm i gsap`
Lenis	Buttery smooth scroll. One of the highest ratios of "feels expensive" to lines of code in frontend. This page's scroll is Lenis.	`npm i lenis`
Motion	Formerly Framer Motion. The React answer for premium micro-interactions — springs, layout animation, gesture states.	`npm i motion`

Drop-in component libraries

Paste-ready pieces. Do not rebuild what these already solved.

Tool	What it does	Install
react-bits	A large collection of animated React components built to be copied, not installed. Read the source, take the one you need.	copy from repo
thinking-orbs by Jakub Antalik	"AI is thinking" loaders — dotted thought-orbs, six tuned states, auto dark/light. Built for chat and agent UIs. Demo · working demo in `demos/thinking-orbs-demo`	`npm i thinking-orbs`
transitions.dev by Jakub Antalik	21 free, portable pure-CSS transitions — dropdowns, modals, page slides, success checks, error shakes, staggered reveals. Namespaced `t-*`, reduced-motion guarded, drops into any project with no JS. Demo	copy the CSS
Amicro	Curated micro-transition components powered by Motion.	copy from repo
vanta	Animated 3D WebGL backgrounds — waves, fog, birds, net. One script tag, one call. Use sparingly.	`npm i vanta three`
liquid-glass-carousel by Yousuf Soomro	An infinite scroll-driven portfolio carousel in three.js + GSAP, drawn through a liquid-glass lens shader — chromatic dispersion, shimmer ring, fluid rim, all one fullscreen post-process. Click a panel and it centers while the rest drop away in a center-out stagger. The carousel core is plain JS with no framework dependency; the Next.js app is just a shell. Every constant is tunable at runtime through a hidden lil-gui panel. Read `lib/carousel/config.js` first.	`npm i three gsap lil-gui`
system.css	A CSS design system for retro classic-Mac interfaces. When you want a surface to feel like an artifact.	`npm i @sakun/system.css`

Taste, not tools

The part people skip. These change how the agent designs, not what it imports.

Tool	What it does
taste-skill	Skill files that push AI-generated frontends away from generic "AI slop" toward real design decisions. Install once, every build gets better.
ponytail by Dietrich Gebert	The "lazy senior dev" skill — makes coding agents write the minimal solution that works (a native `<input type="date">` instead of a flatpickr wrapper). Honest agentic benchmark: −54% LOC, −22% tokens, 100% safety preserved (Haiku 4.5, n=4).
"Make Your App Look & Feel 10x Better" by Satya / Kree8.studio	Eight rules for premium feel: purposeful motion, never-empty empty states, physical and acknowledged actions, icon consistency, perceived speed, human copy. Applied live across this hub.

Image and video generation

Tool	What it does
Higgsfield — paid	AI image, video and audio studio. Every cover image on this hub was generated here, and so was the launch film. Join the Academy + set up the MCP → /higgsfield-setup

The demos

Two real, running builds. Both are Vite + React. Clone the repo, pick one, and you are looking at working motion in under two minutes.

git clone https://hub.19keys.com/design-stack.git
cd design-stack/demos/thinking-orbs-demo
npm install
npm run dev

demos/thinking-orbs-demo — the thinking-orbs loader in every state, on a dark surface. One gotcha baked in: the library only ships presets for size={64} and size={20}. Any other value throws Cannot read properties of undefined (reading 'count'). Use 64 or 20.
demos/triverra-hero — a motion hero: staggered text reveal, spring easing, scroll-linked transform. The pattern behind most "how did they do that" landing pages.

Full install notes, including what to do if you have never run Node: SETUP.md.

How to actually use this

Motion first, components second. GSAP and Lenis will do more for how a page feels than any component library. Get scroll and easing right before you add pieces.
Steal the component, not the dependency. react-bits and Amicro are meant to be read and copied. Fewer packages, less to break.
Install the taste layer once. ponytail and taste-skill change every future build, not just this one.
Respect reduced motion. transitions.dev already guards it. If you hand-roll animation, wrap it in @media (prefers-reduced-motion: reduce). Motion that cannot be turned off is a bug.

A note on licensing

Free and open-source tools are linked directly. Paid tools appear only where 19Keys has an affiliate relationship, and are marked paid. Purchased or licensed source is never republished here — if a tool costs money, you buy it from the people who made it.

One trap to know about. A repo being MIT-licensed does not always mean everything inside it is. liquid-glass-carousel is a good example: the code is MIT, but the demo images in its public/ folder are real design work pulled from Behance and are explicitly not covered by that licence. Swap them for your own images before you ship anything — the list lives in lib/carousel/config.js. Check the CREDITS file of any repo you clone; assets and code often carry different terms.