All designer tools
Motion Presets
The animations a UI actually uses — each with its reduced-motion guard already written, and each one editable
Enter
Exit
Attention
Fade in up
The default for anything entering on scroll. Small travel, never more than ~24px.
600ms · cubic-bezier(0.22, 1, 0.36, 1) · 1× · 2 stops
Fade in up
Edit in the keyframes editor
Opens this exact animation on a timeline — move the stops, add one, change the curve. The guard comes with it.
cssfx-fade-in-up
@keyframes fx-fade-in-up {
0% {
transform: translate(0px, 24px);
opacity: 0;
}
100% {
transform: none;
}
}
.fx-fade-in-up {
animation: fx-fade-in-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.fx-fade-in-up {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
- Keyframes EditorAuthor a multi-stop animation on a timeline instead of hand-typing percentages. Transform, opacity and blur per stop, playback controls, and the prefers-reduced-motion guard written for you — with the stricter guard when the animation loops.
- Easing StudioVisual cubic-bezier editor. Drag the two control points on the curve, watch live translateX / scale / opacity previews, and pick from 14 named presets.
- Loader GeneratorSpinners, dots, bars, pulses and progress rings as pure CSS, tuned on sliders and seeded from the loaders already in the catalog. Every one ships with its reduced-motion guard and the accessible status role written in.