# Motion drawings More 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--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 along the reading direction, 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 (fade, zoom, spin-in, jelly, tick-rise, swing, blur), 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. - Registry name: `motion-drawings` (`@candor/motion-drawings`) - Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key ` themselves; never ask for the key in chat or write it to a file. - Docs: https://candor.themethodic.com/docs/motion-drawings ## Install ```bash npx candor-ui add motion-drawings ``` Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/motion-drawings`. It 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`, `subtle` or `expressive`) and the brand file. A theme tunes how a change looks, never when it happens, so nothing depends on seeing the motion. (https://candor.themethodic.com/glossary.md#calm-level) ## Rules for using Candor UI - Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks. - A control that can't be used says why: wrap it in ``, don't just disable it. - Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one. - Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output. - Your app's words go in `LocaleProvider`: its fixed strings in `strings`, its nouns in `nouns`; entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.