[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D22A3CEWGYQ4HCKDR7FPP8":3,"skill-same:01M6D22A3CEWGYQ4HCKDR7FPP8":69},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":36,"commitSha":37,"skillDirectory":38,"forksCount":39,"repositoryHtmlUrl":40,"repositoryHomepageUrl":41,"ownerHtmlUrl":42,"ownerBlogUrl":41,"ownerDescription":43,"updatedAt":44,"install":45,"resources":58},"01M6D22A3CEWGYQ4HCKDR7FPP8","motion",null,"Motion for interfaces: what should move and why, how much for this product (the motion dial), the motion tokens, the reveal system, comfort and reduced motion, what it costs, and how to check it. Read before adding any animation, transition or scroll effect beyond a hover state, and before judging one.","enowdev\u002Fenowxcli","enowdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F179420349?v=4","01M6D1MVX2KC0X3Z9NESE7P22K","Enow Dev.","01M6D1MW1FMZGBDKWAJY4GQX81",67,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fmotion\u002FSKILL.md",[],[5,19,20,21,22,23,24,25,26,27,28,29,30],"hover","state","product","Animation","how","why","system","check","effect","read","scroll","tokens","2026-11-10 10:12:30",false,"---\nname: motion\ndescription: \"Motion for interfaces: what should move and why, how much for this product (the motion dial), the motion tokens, the reveal system, comfort and reduced motion, what it costs, and how to check it. Read before adding any animation, transition or scroll effect beyond a hover state, and before judging one.\"\n---\n\n# Motion\n\nGenerated motion is recognisable from across the room: every block fades up\nby 40px as it enters, cards bounce, a blob floats behind the hero forever,\nnumbers count up to figures nobody measured, and nothing can be clicked until\nthe last stagger lands. None of it says anything about the product. Motion\nthat belongs to a product acts out what the page says, stays out of the way\nof reading, and costs almost nothing. This skill says what to move, how much,\nand how to check it; the `motion-*` skills hold the detail.\n\n## 1. What motion is for\n\nMotion earns its place by doing one of these jobs. Name the job before\nwriting a keyframe.\n\n- **Feedback**: the interface heard you. A button presses, a toggle slides,\n  a saved row settles, a field that failed says so.\n- **Orientation and continuity**: where something came from and where it\n  went. A drawer slides from the edge it lives on, a menu grows from its\n  button, a removed row leaves from its place and the list closes the gap,\n  the nav marker slides to the section on screen.\n- **Order and focus**: what to read first. The headline, then its line,\n  then the action; the one thing that changed, not everything around it.\n- **Cause and effect**: this led to that. A request is sent, then answered;\n  work is handed to an agent, then comes back as a report.\n- **Showing the product**: a short scripted demo of the real interface\n  doing its job, when a still picture cannot show it (`motion-demo`).\n- **Character**: a small signature the product is known by, used once.\n\nEverything else is decoration. A page carries at most one ambient element\n(a slow field behind the hero, a drifting texture); it stops when scrolled\naway or when the tab is hidden, and it never sits at full strength behind\ntext a person is reading on a phone.\n\n## 2. Read the page before moving it\n\nMotion comes from the content, not from a library's presets. Before the\nfirst keyframe, go through the page part by part and write down the sentence\neach part says and the movement that would act it out. A part whose sentence\nhas no movement stays still.\n\nFrom a launch page for an agent that builds software:\n\n| The part says | The motion acts it out |\n|---|---|\n| \"An agent that does the work, then shows its work.\" | The second line arrives a beat after the first, because of \"then\". |\n| Four stages: agree, route, build, report | A line runs across each stage in order and marks it done; its steps appear after it. |\n| The orchestrator hands work to specialists | A short light runs along the grid from the orchestrator's column to the others; each group's chips light up as it arrives. |\n| A feature card | A small drawing acts the feature out: work sent down one of three routes, an answer picked from options, a report filled in row by row. |\n| Waitlist steps 01, 02, 03 | The numbers roll up into place, one after another, as steps do. |\n| The product window in the hero | A scripted session of the real interface, and the copy beside it lights up the phrase that names the step on screen. |\n\nThe same move on every block (fade up, stagger, fade up) is a template: it\nsays only that the page has an animation library. Two sections holding the\nsame kind of content may share a move; sections saying different things\nshould not.\n\n## 3. How much: the motion dial\n\nPick one level from the product and the brief before designing any\nmovement, and hold it on every screen:\n\n1. **Feedback only**: hover, press, focus and state changes. Tools people\n   work in all day: dashboards, admin, editors, forms, settings.\n2. **Entrances and transitions**: level 1, plus content entering as it\n   scrolls into view and transitions between states and views. Product and\n   marketing sites, docs home pages, portfolios, stores.\n3. **Choreography**: level 2, plus a sequence per section, animated\n   drawings, product demos and scroll storytelling. Launch pages, a\n   product's front page, campaigns, a studio's own site.\n\nWrite it in DESIGN.md's `Motion:` line, with the decisions that follow from\nit, so the next change keeps to them:\n\n```markdown\nMotion: dial 3. Blocks rise 12px and fade in once, as they scroll into view;\neach section acts out what it says (motion.css); the hero plays a 16s\nscripted session, paused off screen, with a pause control. Tokens --m-* in\nmotion.css. Reduced motion: final states, no smooth scroll, the session\nrests on its report frame.\n```\n\n\"Full motion\" means dial 3, not permission to move everything: dial 3 still\nmeans one focal movement at a time, small distances, and a page that can be\nread while it moves.\n\n## 4. The system\n\nOne set of tokens, one reveal mechanism, a sequence per block written in\nCSS, and the final state as the base style.\n\n### Tokens\n\nDefined once, in the project's tokens file or a `motion.css`, and nothing\nelse used:\n\n```css\n:root {\n  --m-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     \u002F* entrances, most state changes *\u002F\n  --m-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); \u002F* exits *\u002F\n  --m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     \u002F* travel from A to B, indicators, lines *\u002F\n  --m-instant: 100ms;  \u002F* press *\u002F\n  --m-fast: 160ms;     \u002F* hover, colour, tooltip *\u002F\n  --m-base: 240ms;     \u002F* menus, toggles, tabs *\u002F\n  --m-panel: 320ms;    \u002F* dialogs, drawers *\u002F\n  --m-enter: 700ms;    \u002F* content entrances *\u002F\n  --m-draw: 1000ms;    \u002F* rules and lines drawn across a width *\u002F\n  --m-shift-sm: 6px;\n  --m-shift: 12px;\n  --m-shift-lg: 18px;\n}\n```\n\n`motion-timing` says which one fits which movement and how to sequence them.\n\n### The base style is the final state\n\nEvery element's normal CSS is its final, visible state. Motion is a layer on\ntop that starts somewhere else and returns to the base. Anything that stops\nthe motion (no JavaScript, print, reduced motion, a screenshot tool, a slow\nscript) then leaves the page complete.\n\n### One reveal mechanism\n\n- `data-reveal` on each block that enters: a section head, a grid, a card.\n- One IntersectionObserver for the whole page sets `data-shown` on a block\n  the first time it comes into view, then stops watching it. It also sets\n  `--rv`, the block's order among siblings that arrived together, so a row\n  staggers in reading order whatever the grid is at this width.\n- `data-motion` on the page root, set before the first paint (a layout\n  effect, or an inline script) and only when motion can run: reduced motion\n  is not asked for and IntersectionObserver exists.\n- Hidden starting states live only under `[data-motion]` inside\n  `@media screen and (prefers-reduced-motion: no-preference)`. Without\n  JavaScript, in print and with reduced motion, nothing is ever hidden.\n\n`motion-reveal` has the observer (about thirty lines) and the CSS.\n\n### A sequence per block, in CSS\n\nEach block's sequence is keyframes plus delays computed from custom\nproperties: `--rv` from the observer, and indices written in the markup\n(`--k` for an item in a list, `--n` for a stage). Keyframes with only a\n`from` animate to the base style, so the final state is written once:\n\n```css\n@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-y, 12px)); } }\n\n@media screen and (prefers-reduced-motion: no-preference) {\n  [data-motion] .stages:not([data-shown]) li { opacity: 0; }\n  [data-motion] .stages[data-shown] li {\n    animation: m-rise var(--m-enter) var(--m-ease-out) backwards;\n    animation-delay: calc(var(--n) * 420ms + var(--k) * 80ms);\n  }\n}\n```\n\n## 5. Comfort and cost, in brief\n\n- **Comfort** (`motion-comfort`): distances of 6 to 18px, entrances of 0.5\n  to 1s easing out, one focal movement at a time; no bounce, blinking,\n  parallax on text or scroll-jacking. Reduced motion shows final states,\n  rests loops on a still frame and turns smooth scrolling off. Content\n  never depends on motion, and a loop beside content can be paused.\n- **Cost** (`motion-performance`): move only `transform` and `opacity` (a\n  stroke drawn in a small SVG too), one IntersectionObserver and no scroll\n  handlers, every loop stopped off screen and in a hidden tab, canvas capped\n  at 60 frames a second, no library for what CSS and thirty lines of script\n  do. A page of motion fits in a few kilobytes.\n\n## 6. Which skill for which job\n\n- `motion-timing`: durations, distances, easing, springs, stagger,\n  sequencing, loops.\n- `motion-reveal`: blocks entering as they scroll into view, scroll-driven\n  CSS, parallax and pinned sections, the nav marker, smooth anchor links.\n- `motion-interface`: hover, press, focus, menus, tooltips, dialogs,\n  drawers, toasts, tabs, accordions, lists, view transitions, loading,\n  forms, charts and numbers.\n- `motion-drawings`: SVG drawings and icons that act out an idea, drawn\n  strokes, timed parts, replay on hover, Lottie and Rive.\n- `motion-demo`: scripted product demos, held frames, copy that follows a\n  demo, canvas fields, video loops.\n- `motion-performance`: what is cheap, loops that stop, frame caps, canvas,\n  libraries and when they earn their weight, measuring.\n- `motion-comfort`: reduced motion, vestibular triggers, flashing, pausing,\n  reading, interaction during motion.\n- `motion-audit`: judging existing motion and the order to fix it in.\n- `motion-stacks`: the same system in plain CSS and JavaScript, Tailwind,\n  React with the Motion library, Next.js, Vue, Svelte and native mobile.\n\n## 7. A worked case\n\nThe pre-launch page of an agent product, dark, with its content scrolling\ninside one container rather than the window. Dial 3, because it is a launch\npage and the user asked for full motion that stays calm and light.\n\n- **Hero, on arrival**: the eyebrow fades up 8px; the headline's first line\n  rises 18px over 900ms at 100ms; the second line, \"then shows its work\",\n  follows at 440ms; the lede, the form and the buttons follow at 640, 760\n  and 880ms. The clock icon in \"Launching soon\" winds once. The product\n  window rises 16px at 280ms, and the session inside it starts 900ms after\n  the window is on screen, so it does not play unseen. The canvas field\n  behind fades in over 1.8s.\n- **Hero, after arrival**: the copy follows the session. The phrase of the\n  lede that names the step on screen (\"asks what it needs to know\", \"hands\n  each part to a specialist\") brightens and gains an underline, and \"then\n  shows its work\" brightens while the report is up. Colour only: nothing\n  moves inside text being read.\n- **Section titles**: the rule under each draws from the left over 1.1s;\n  the title rises 12px, its line 8px.\n- **Features**: each card's small drawing acts out its feature, then plays\n  again on hover with a mouse. The text rises 6 to 8px.\n- **Specialists**: a short light runs along the top edge of the grid from\n  the orchestrator's column; the chips of each group arrive lit and settle\n  to the rule colour, group by group, 45ms apart.\n- **How it works**: per stage, a line fills across the top and fades, the\n  square beside the stage's name fills when the line completes, then its\n  steps slide in 6px; stages 420ms apart.\n- **Waitlist**: the step numbers roll up inside their own line, 160ms apart.\n- **Nav**: a pill slides between the links to the section crossing the\n  middle of the screen.\n\nThe budget held: about 4 kB gzipped for all of it, one observer for the\nreveals and one for the nav, no library, no scroll handlers, the canvas\ncapped at 60 frames a second (a 120Hz screen would otherwise draw twice as\noften and move the field twice as fast), every loop paused off screen, and\nreduced motion showing the final state with smooth anchor scrolling off.\n\nChecking it caught four mistakes and left one open:\n\n- An underline swept across a phrase as a growing background broke when\n  the phrase wrapped onto two lines: the start of each line was underlined\n  and the middle was not. It became a fade of the text colour and of a\n  `text-decoration` underline, which follows the text across lines.\n- The nav pill first appeared by sliding in from the nav's left edge, its\n  starting position. It now fades in where it belongs and slides only\n  between sections.\n- The cards sat in a ruled grid (1px gaps showing the grid's background).\n  Hiding a card showed the rule colour as a grey block, so the cards stay\n  and their children animate.\n- On phones the step numbers rolled up from below into view: their box was\n  two grid rows tall. `align-self: start` made the clip one line high.\n- Still open when this was written: the session loops beside the page's\n  text for more than five seconds, and WCAG 2.2.2 asks for a way to pause it\n  (`motion-comfort`). A loop is not finished until it has one.\n\n## 8. Check it\n\n- Run `preview` with `motion: true`. It reads the page's motion as text\n  (you do not see its frames; the user can): the timeline of what moves on\n  load, with start, duration, element, properties and distance; what starts\n  as the page is scrolled through; loops that never stop and whether they\n  run while scrolled away; layout or paint-heavy properties animated;\n  `transition: all`; elements animated from JavaScript; long frames while\n  scrolling; layout shift during reveals; content still hidden after\n  scrolling through; scroll and pointer listeners; and the same page with\n  reduced motion. `motion-audit` says what each finding means.\n- Read the timeline against the plan: the focal element first, the primary\n  action usable within about 1s, the load sequence done within about 2.5s,\n  distances 6 to 18px, no block that never appears.\n- Give scripted demos a held frame (`?t=4200` renders that moment still) so\n  each moment can be looked at and checked (`motion-demo`).\n- Look once with reduced motion on: every block present, nothing moving,\n  loops resting on a still frame.\n\n## Avoid\n\nThe same fade-up on every block; distances of 40px or more; bounce and\nelastic easing; blinking, pulsing and glowing badges; blobs and orbs\nfloating forever; count-ups of invented numbers; typewriter headlines and\ntext scrambles; parallax on text; scroll-jacking and smooth-scroll\nlibraries; custom cursors and magnetic buttons; tilt cards; intro screens;\ncontent hidden until an animation runs; loops that never stop; a new\nanimation library for what CSS does; motion that no sentence on the page\nasks for.\n","# Motion\n\nGenerated motion is recognisable from across the room: every block fades up\nby 40px as it enters, cards bounce, a blob floats behind the hero forever,\nnumbers count up to figures nobody measured, and nothing can be clicked until\nthe last stagger lands. None of it says anything about the product. Motion\nthat belongs to a product acts out what the page says, stays out of the way\nof reading, and costs almost nothing. This skill says what to move, how much,\nand how to check it; the `motion-*` skills hold the detail.\n\n## 1. What motion is for\n\nMotion earns its place by doing one of these jobs. Name the job before\nwriting a keyframe.\n\n- **Feedback**: the interface heard you. A button presses, a toggle slides,\n  a saved row settles, a field that failed says so.\n- **Orientation and continuity**: where something came from and where it\n  went. A drawer slides from the edge it lives on, a menu grows from its\n  button, a removed row leaves from its place and the list closes the gap,\n  the nav marker slides to the section on screen.\n- **Order and focus**: what to read first. The headline, then its line,\n  then the action; the one thing that changed, not everything around it.\n- **Cause and effect**: this led to that. A request is sent, then answered;\n  work is handed to an agent, then comes back as a report.\n- **Showing the product**: a short scripted demo of the real interface\n  doing its job, when a still picture cannot show it (`motion-demo`).\n- **Character**: a small signature the product is known by, used once.\n\nEverything else is decoration. A page carries at most one ambient element\n(a slow field behind the hero, a drifting texture); it stops when scrolled\naway or when the tab is hidden, and it never sits at full strength behind\ntext a person is reading on a phone.\n\n## 2. Read the page before moving it\n\nMotion comes from the content, not from a library's presets. Before the\nfirst keyframe, go through the page part by part and write down the sentence\neach part says and the movement that would act it out. A part whose sentence\nhas no movement stays still.\n\nFrom a launch page for an agent that builds software:\n\n| The part says | The motion acts it out |\n|---|---|\n| \"An agent that does the work, then shows its work.\" | The second line arrives a beat after the first, because of \"then\". |\n| Four stages: agree, route, build, report | A line runs across each stage in order and marks it done; its steps appear after it. |\n| The orchestrator hands work to specialists | A short light runs along the grid from the orchestrator's column to the others; each group's chips light up as it arrives. |\n| A feature card | A small drawing acts the feature out: work sent down one of three routes, an answer picked from options, a report filled in row by row. |\n| Waitlist steps 01, 02, 03 | The numbers roll up into place, one after another, as steps do. |\n| The product window in the hero | A scripted session of the real interface, and the copy beside it lights up the phrase that names the step on screen. |\n\nThe same move on every block (fade up, stagger, fade up) is a template: it\nsays only that the page has an animation library. Two sections holding the\nsame kind of content may share a move; sections saying different things\nshould not.\n\n## 3. How much: the motion dial\n\nPick one level from the product and the brief before designing any\nmovement, and hold it on every screen:\n\n1. **Feedback only**: hover, press, focus and state changes. Tools people\n   work in all day: dashboards, admin, editors, forms, settings.\n2. **Entrances and transitions**: level 1, plus content entering as it\n   scrolls into view and transitions between states and views. Product and\n   marketing sites, docs home pages, portfolios, stores.\n3. **Choreography**: level 2, plus a sequence per section, animated\n   drawings, product demos and scroll storytelling. Launch pages, a\n   product's front page, campaigns, a studio's own site.\n\nWrite it in DESIGN.md's `Motion:` line, with the decisions that follow from\nit, so the next change keeps to them:\n\n```markdown\nMotion: dial 3. Blocks rise 12px and fade in once, as they scroll into view;\neach section acts out what it says (motion.css); the hero plays a 16s\nscripted session, paused off screen, with a pause control. Tokens --m-* in\nmotion.css. Reduced motion: final states, no smooth scroll, the session\nrests on its report frame.\n```\n\n\"Full motion\" means dial 3, not permission to move everything: dial 3 still\nmeans one focal movement at a time, small distances, and a page that can be\nread while it moves.\n\n## 4. The system\n\nOne set of tokens, one reveal mechanism, a sequence per block written in\nCSS, and the final state as the base style.\n\n### Tokens\n\nDefined once, in the project's tokens file or a `motion.css`, and nothing\nelse used:\n\n```css\n:root {\n  --m-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     \u002F* entrances, most state changes *\u002F\n  --m-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); \u002F* exits *\u002F\n  --m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     \u002F* travel from A to B, indicators, lines *\u002F\n  --m-instant: 100ms;  \u002F* press *\u002F\n  --m-fast: 160ms;     \u002F* hover, colour, tooltip *\u002F\n  --m-base: 240ms;     \u002F* menus, toggles, tabs *\u002F\n  --m-panel: 320ms;    \u002F* dialogs, drawers *\u002F\n  --m-enter: 700ms;    \u002F* content entrances *\u002F\n  --m-draw: 1000ms;    \u002F* rules and lines drawn across a width *\u002F\n  --m-shift-sm: 6px;\n  --m-shift: 12px;\n  --m-shift-lg: 18px;\n}\n```\n\n`motion-timing` says which one fits which movement and how to sequence them.\n\n### The base style is the final state\n\nEvery element's normal CSS is its final, visible state. Motion is a layer on\ntop that starts somewhere else and returns to the base. Anything that stops\nthe motion (no JavaScript, print, reduced motion, a screenshot tool, a slow\nscript) then leaves the page complete.\n\n### One reveal mechanism\n\n- `data-reveal` on each block that enters: a section head, a grid, a card.\n- One IntersectionObserver for the whole page sets `data-shown` on a block\n  the first time it comes into view, then stops watching it. It also sets\n  `--rv`, the block's order among siblings that arrived together, so a row\n  staggers in reading order whatever the grid is at this width.\n- `data-motion` on the page root, set before the first paint (a layout\n  effect, or an inline script) and only when motion can run: reduced motion\n  is not asked for and IntersectionObserver exists.\n- Hidden starting states live only under `[data-motion]` inside\n  `@media screen and (prefers-reduced-motion: no-preference)`. Without\n  JavaScript, in print and with reduced motion, nothing is ever hidden.\n\n`motion-reveal` has the observer (about thirty lines) and the CSS.\n\n### A sequence per block, in CSS\n\nEach block's sequence is keyframes plus delays computed from custom\nproperties: `--rv` from the observer, and indices written in the markup\n(`--k` for an item in a list, `--n` for a stage). Keyframes with only a\n`from` animate to the base style, so the final state is written once:\n\n```css\n@keyframes m-rise { from { opacity: 0; transform: translateY(var(--m-y, 12px)); } }\n\n@media screen and (prefers-reduced-motion: no-preference) {\n  [data-motion] .stages:not([data-shown]) li { opacity: 0; }\n  [data-motion] .stages[data-shown] li {\n    animation: m-rise var(--m-enter) var(--m-ease-out) backwards;\n    animation-delay: calc(var(--n) * 420ms + var(--k) * 80ms);\n  }\n}\n```\n\n## 5. Comfort and cost, in brief\n\n- **Comfort** (`motion-comfort`): distances of 6 to 18px, entrances of 0.5\n  to 1s easing out, one focal movement at a time; no bounce, blinking,\n  parallax on text or scroll-jacking. Reduced motion shows final states,\n  rests loops on a still frame and turns smooth scrolling off. Content\n  never depends on motion, and a loop beside content can be paused.\n- **Cost** (`motion-performance`): move only `transform` and `opacity` (a\n  stroke drawn in a small SVG too), one IntersectionObserver and no scroll\n  handlers, every loop stopped off screen and in a hidden tab, canvas capped\n  at 60 frames a second, no library for what CSS and thirty lines of script\n  do. A page of motion fits in a few kilobytes.\n\n## 6. Which skill for which job\n\n- `motion-timing`: durations, distances, easing, springs, stagger,\n  sequencing, loops.\n- `motion-reveal`: blocks entering as they scroll into view, scroll-driven\n  CSS, parallax and pinned sections, the nav marker, smooth anchor links.\n- `motion-interface`: hover, press, focus, menus, tooltips, dialogs,\n  drawers, toasts, tabs, accordions, lists, view transitions, loading,\n  forms, charts and numbers.\n- `motion-drawings`: SVG drawings and icons that act out an idea, drawn\n  strokes, timed parts, replay on hover, Lottie and Rive.\n- `motion-demo`: scripted product demos, held frames, copy that follows a\n  demo, canvas fields, video loops.\n- `motion-performance`: what is cheap, loops that stop, frame caps, canvas,\n  libraries and when they earn their weight, measuring.\n- `motion-comfort`: reduced motion, vestibular triggers, flashing, pausing,\n  reading, interaction during motion.\n- `motion-audit`: judging existing motion and the order to fix it in.\n- `motion-stacks`: the same system in plain CSS and JavaScript, Tailwind,\n  React with the Motion library, Next.js, Vue, Svelte and native mobile.\n\n## 7. A worked case\n\nThe pre-launch page of an agent product, dark, with its content scrolling\ninside one container rather than the window. Dial 3, because it is a launch\npage and the user asked for full motion that stays calm and light.\n\n- **Hero, on arrival**: the eyebrow fades up 8px; the headline's first line\n  rises 18px over 900ms at 100ms; the second line, \"then shows its work\",\n  follows at 440ms; the lede, the form and the buttons follow at 640, 760\n  and 880ms. The clock icon in \"Launching soon\" winds once. The product\n  window rises 16px at 280ms, and the session inside it starts 900ms after\n  the window is on screen, so it does not play unseen. The canvas field\n  behind fades in over 1.8s.\n- **Hero, after arrival**: the copy follows the session. The phrase of the\n  lede that names the step on screen (\"asks what it needs to know\", \"hands\n  each part to a specialist\") brightens and gains an underline, and \"then\n  shows its work\" brightens while the report is up. Colour only: nothing\n  moves inside text being read.\n- **Section titles**: the rule under each draws from the left over 1.1s;\n  the title rises 12px, its line 8px.\n- **Features**: each card's small drawing acts out its feature, then plays\n  again on hover with a mouse. The text rises 6 to 8px.\n- **Specialists**: a short light runs along the top edge of the grid from\n  the orchestrator's column; the chips of each group arrive lit and settle\n  to the rule colour, group by group, 45ms apart.\n- **How it works**: per stage, a line fills across the top and fades, the\n  square beside the stage's name fills when the line completes, then its\n  steps slide in 6px; stages 420ms apart.\n- **Waitlist**: the step numbers roll up inside their own line, 160ms apart.\n- **Nav**: a pill slides between the links to the section crossing the\n  middle of the screen.\n\nThe budget held: about 4 kB gzipped for all of it, one observer for the\nreveals and one for the nav, no library, no scroll handlers, the canvas\ncapped at 60 frames a second (a 120Hz screen would otherwise draw twice as\noften and move the field twice as fast), every loop paused off screen, and\nreduced motion showing the final state with smooth anchor scrolling off.\n\nChecking it caught four mistakes and left one open:\n\n- An underline swept across a phrase as a growing background broke when\n  the phrase wrapped onto two lines: the start of each line was underlined\n  and the middle was not. It became a fade of the text colour and of a\n  `text-decoration` underline, which follows the text across lines.\n- The nav pill first appeared by sliding in from the nav's left edge, its\n  starting position. It now fades in where it belongs and slides only\n  between sections.\n- The cards sat in a ruled grid (1px gaps showing the grid's background).\n  Hiding a card showed the rule colour as a grey block, so the cards stay\n  and their children animate.\n- On phones the step numbers rolled up from below into view: their box was\n  two grid rows tall. `align-self: start` made the clip one line high.\n- Still open when this was written: the session loops beside the page's\n  text for more than five seconds, and WCAG 2.2.2 asks for a way to pause it\n  (`motion-comfort`). A loop is not finished until it has one.\n\n## 8. Check it\n\n- Run `preview` with `motion: true`. It reads the page's motion as text\n  (you do not see its frames; the user can): the timeline of what moves on\n  load, with start, duration, element, properties and distance; what starts\n  as the page is scrolled through; loops that never stop and whether they\n  run while scrolled away; layout or paint-heavy properties animated;\n  `transition: all`; elements animated from JavaScript; long frames while\n  scrolling; layout shift during reveals; content still hidden after\n  scrolling through; scroll and pointer listeners; and the same page with\n  reduced motion. `motion-audit` says what each finding means.\n- Read the timeline against the plan: the focal element first, the primary\n  action usable within about 1s, the load sequence done within about 2.5s,\n  distances 6 to 18px, no block that never appears.\n- Give scripted demos a held frame (`?t=4200` renders that moment still) so\n  each moment can be looked at and checked (`motion-demo`).\n- Look once with reduced motion on: every block present, nothing moving,\n  loops resting on a still frame.\n\n## Avoid\n\nThe same fade-up on every block; distances of 40px or more; bounce and\nelastic easing; blinking, pulsing and glowing badges; blobs and orbs\nfloating forever; count-ups of invented numbers; typewriter headlines and\ntext scrambles; parallax on text; scroll-jacking and smooth-scroll\nlibraries; custom cursors and magnetic buttons; tilt cards; intro screens;\ncontent hidden until an animation runs; loops that never stop; a new\nanimation library for what CSS does; motion that no sentence on the page\nasks for.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fmotion",21,"https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli","https:\u002F\u002Fenowx.ai","https:\u002F\u002Fgithub.com\u002Fenowdev","Pretending to be a Developer","2026-10-06 02:05:35",{"source":8,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add enowdev\u002Fenowxcli --skill motion",{"tool":51,"command":52},"bunx","bunx skills add enowdev\u002Fenowxcli --skill motion",{"tool":54,"command":55},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill motion","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fmotion\u002FSKILL.md",true,[59,65],{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"agents\u002Fopenai.yaml","REFERENCE","参考文档",225,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Freshuibuduo\u002FTMCRA-Codex-Memory\u002Fskills\u002Fmanage-tmcra-memory\u002Fagents\u002Fopenai.yaml",{"path":66,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002Fmcp-tools.md",2840,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Freshuibuduo\u002FTMCRA-Codex-Memory\u002Fskills\u002Fmanage-tmcra-memory\u002Freferences\u002Fmcp-tools.md",[70,86,111,127,153,173],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":81,"publishedAt":31},"01M6D2HQYSQD9N7MTNDT4A7CBM","demo-skill","Project-scope demo skill for tests.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fworkspace\u002F.agents\u002Fskills\u002Fdemo-skill\u002FSKILL.md",[76],{"categoryNo":77,"categoryName":78,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[82,83,84,85,28],"demo skill","demo","tests","project",{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":100,"publishedAt":31},"01M6D2HM0GCPM0TM2HPG9HHR2R","writing","Writing words people read: the specific thing instead of claims, words to drop, sentences, interface copy (buttons, labels, errors, empty states, confirmations), page copy, notifications and emails, alt text and link text, numbers and dates, words that translate well, documentation and voice. Read before writing a page's copy, an interface's text or a document.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fwriting\u002FSKILL.md",[92,95],{"categoryNo":93,"categoryName":94,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[88,101,102,103,104,105,28,106,107,108,109,110],"text","emails","empty","drop","document","page","voice","notifications","documentation","translate",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":120,"publishedAt":31},"01M6D2HG07YS49NM196Q0R3AZ8","ui","Designing or restyling an interface: direction, layout, type, colour, icons, components, states, responsive behaviour. Read before building a page, a screen or a set of components.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui\u002FSKILL.md",[117],{"categoryNo":118,"categoryName":119,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000032","设计师",[113,121,122,123,124,106,125,28,126],"icons","components","SET","responsive","layout","before building",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":139,"publishedAt":31},"01M6D2HB59HZHWG1RYZDV4SJ91","ui-themes","Light and dark themes, and colour that holds in both: tokens with a value per theme, and what each kind of content needs to stay visible (icons, SVG drawings and line art, logos, photos, screenshots, charts, code, maps, borders, shadows, focus, form controls), switching without a flash, and checking both. Read before building a second theme or a theme toggle, and before any drawing, logo or chart on a page that has two themes.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-themes\u002FSKILL.md",[133,136],{"categoryNo":134,"categoryName":135,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":137,"categoryName":138,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000030","开发工程师",[113,140,141,142,30,143,144,145,146,28,126,147,106,148,149,150,121,151,152],"ui themes","switching","photos","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":162,"publishedAt":31},"01M6D2H5R5KRAE524C8QX0T7Q0","ui-structure","Structure before styling: the blueprint written before any interface code (the screen's job, the regions its kind of page needs, their order and why, the layout skeleton in numbers, the components and their states), the anatomy and order of a homepage, a dashboard, a list, a detail page, settings, a form, sign-in, pricing, docs, an article and a checkout, and how to turn the blueprint into code (tokens, layout primitives, components, sections, page). Read first, before building or rebuilding any page or screen.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-structure\u002FSKILL.md",[159,160,161],{"categoryNo":93,"categoryName":94,"taxonomyType":79,"taxonomyTypeDesc":80},{"categoryNo":137,"categoryName":138,"taxonomyType":98,"taxonomyTypeDesc":99},{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},[163,113,164,122,165,166,148,167,168,169,125,30,170,171,172,28,126,106,24,23],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":186,"publishedAt":31},"01M6D2H0ZZBJG77MBGPZHA6MWD","ui-stack-vue","Building interfaces in Vue 3 and Nuxt: project layout, script setup with typed defineProps, defineEmits and defineModel, attribute fallthrough, slots and scoped slots, template refs, ref, reactive and computed, watch versus watchEffect, composables and VueUse, provide and inject, Pinia, keyed v-for, transitions, Nuxt 4 (app directory, pages, layouts, useFetch and useAsyncData keys, $fetch in handlers, server routes, runtime config, useSeoMeta, NuxtImg, middleware), VeeValidate forms, Reka UI and Nuxt UI, testing, vue-tsc, and the traps. Read when the project uses Vue or Nuxt.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-stack-vue\u002FSKILL.md",[179,182,185],{"categoryNo":180,"categoryName":181,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":183,"categoryName":184,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":118,"categoryName":119,"taxonomyType":98,"taxonomyTypeDesc":99},[113,187,188,189,190,191,192,193,125,85,194,195,28,196,197,198,199,200,201,202],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]