Motion drawings
ProMore ways to draw Candor's animations, and motion for show: blur, flip, swing, skew and wipe for dialogs, menus, arrivals and pops (set with --cd-motion-<family>-variant), and, off until a brand file turns them on (the --cd-show-* tokens), cards and tiles arriving as a page draws, plots drawing in (a line chart from its first point), and cards lifting or glowing under the pointer. Field focus drawings (--cd-draw-input-focus) and the overlay drawing morph, for a dialog that grows from its trigger. A box that travels behind the item under the pointer in menus, sidebars, the rail and tabs (--cd-draw-highlight), how a hovered row's fill comes in (--cd-draw-row-hover), tab panels sliding in from the side of the chosen tab (slide-from), and a stacked carousel's changes (carousel-fade, -vertical, -blur, -zoom, -uncover, -fill). Show adds entrances for lists, grids and overlays' content, a bounce, charts that sweep and grow, points that pop, gauges that fill, count-ups and six number drawings. From 4.4 it also draws ticks (zoom, spin-in, jelly, tick-rise, swing, blur; fade and pop's rise are the free theme's own keyframes), a switch's thumb as it slides (--cd-draw-switch), a jolt for a field that needs attention, a flash for a value that changed, a control's own hover, press and focus (--cd-draw-button-hover, -button-icon, -button-press, -focus), Loader's shapes (--cd-draw-loader) and the indeterminate bar (--cd-draw-progress), more opening drawings (curtain, clip, circle, roll, height, stretch, slide-scale, blur-slide, elastic-slide, zoom-through, uncover, flip-x), Pro eases (stiff, snappy, bouncy, wobbly, gentle, anticipate, linear-travel, snap, stepped, settle), card and image hovers, and the page behind a dialog. Every one is off at the Off level and under reduced motion, and ends on the real content. Import styles/candor-motion-drawings.css after candor.css.
Version 5.2.0· other versions
This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).
Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1 and 4.0.2: the page came later, or had another name then.
Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.
Preview
It's types and helpers, listed below.
Install
First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/motion-drawings
Brings in: tokens
Terms used here
- Calm level
- What Candor's motion does for a person whose operating system asks for reduced motion: the highest-precedence setting, above the app's own motion level (
none,calm,subtleorexpressive) and the brand file. A theme tunes how a change looks, never when it happens, so nothing depends on seeing the motion.
Every term is defined in the glossary (Markdown).