Research sources

Pro

A list of sources with relevance, excerpt and status.

Installs components/ui/research-sources.tsxDepends on @radix-ui/react-popover, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/research-sources

3 of 5 sources used in the answer

Sort by

Reduced motion and vestibular disorders: a review
journals.example.org
Large parallax and zoom effects are the most common triggers. Offering a reduced setting lowered reported discomfort by two thirds.
paperRead in full94%
prefers-reduced-motion: what it means and how to honour it
docs.example.dev
The media query reflects a system setting. Replace movement with fades rather than removing feedback.
docsRead in full90%
Why every animation needs a stop button
news.example.com
Auto-playing carousels were the top accessibility complaint in last year's survey of 2,000 users.
newsSkimmed72%
Is a spinner motion? A thread
forum.example.net
Opinions differ, but most agree that essential indicators of progress can stay if they are small and calm.
forumSkimmed55%
Motion design guidelines, chapter 7
docs.example.dev
Duration and easing tokens, and when to skip animation entirely.
docsNot read yet48%

When to use #

Use it for

An assistant gathers material and the user may check it.
Sources should be selectable.

Skip it when

There is only one source; cite it inline.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/research-sources

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { ResearchSources } from "@/components/ui/research-sources"

The worked example comes with Pro

The 20-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #