{"node":{"id":"d1fb677c-ee19-4031-bfea-72774baaa944","handle":"d1fb","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Drawer 3: Motion","aiSummary":null,"content":"**Open it when:** you're about to add animation, or content appears late, blank or not at all.\n\n## What we know\n\n**Never let motion hide content**\n- A fade-in must never be what makes content appear. If content starts hidden and waits for a scroll, it stays blank in a hidden tab, in a screenshot tool and for search engines. That shipped blank three times on one site. [our build]\n- The fix we used: hide content only once the page's script has run, show what's already on screen at load, and add a fallback that shows everything after about a second and a half. [our build]\n- Keep content visible by default, so a failed script doesn't hide the page. Start every animation from an already-visible state. [impeccable]\n- impeccable's rule checker flags text still hidden after reveals have run, as an error. [impeccable]\n\n**How much motion: the sources clash**\n- frontend-design: put motion into a few high-impact moments. One orchestrated page load with staggered reveals beats scattered small effects. Use scroll-triggered effects and hover states that surprise. [frontend-design]\n- impeccable agrees on one authored moment, not scattered effects. But it says not the same entrance on every section. [impeccable]\n- impeccable: a generic fade-and-rise, hover lift, parallax layer or scroll reveal is not an idea. The key moment must come from this product. [impeccable]\n- impeccable: stagger items only when a list appears as a list. Cap the total delay. Never treat every section as a staggered list. [impeccable]\n- impeccable: on app screens, no orchestrated page-load sequences. Motion shows state, not decoration. [impeccable]\n- In our build, scroll-triggered reveals were the thing that shipped blank. [our build]\n\n**Purpose**\n- Motion explains state, relationship and order, or makes one earned moment. Decoration without purpose is debt. [impeccable]\n- Removal test: take the animation away. If nothing meaningful is lost, it was decoration. [impeccable]\n- Choose what moves by what it means. Shared-element moves for continuity, blur for focus, masks and clip paths for reveals, the smallest change for feedback. [impeccable]\n- Blur, backdrop-filter, clip-path, mask and shadow are all motion materials, not only transform and opacity, as long as they stay smooth. [impeccable]\n\n**Timing**\n- 100 to 150 ms for instant feedback. [impeccable]\n- 150 to 300 ms for routine state changes. [impeccable]\n- 300 to 500 ms for layout, overlay or view changes. [impeccable]\n- 500 to 800 ms for one deliberate entrance. [impeccable]\n- On app screens, 150 to 250 ms for most transitions. [impeccable]\n- Exit faster than you enter. Long feedback feels like lag. [impeccable]\n\n**Easing**\n- Use a natural slow-down curve such as `cubic-bezier(0.16, 1, 0.3, 1)`, or ease-out-quart, quint or expo. [impeccable]\n- No reflexive bounce or elastic curves. The rule checker flags them. [impeccable]\n- Apple and Starbucks both shrink buttons slightly when pressed, with `scale(0.95)`. [awesome-design-md]\n\n**Reduced motion: the sources differ in degree**\n- Our build: respect the reduced-motion setting. Stop anything that scrolls by itself and show content without the fade. [our build]\n- impeccable: every web animation needs a `prefers-reduced-motion` path. Reduced motion means fewer and gentler animations, not none. Useful feedback stays. [impeccable]\n- impeccable's audit flags a global \"0.01ms\" switch-off that kills useful feedback. [impeccable]\n- Astryx: reduced motion removes movement, never information. [Astryx]\n\n**Performance**\n- Don't casually animate `width`, `height`, `top`, `left` or margins. [impeccable]\n- Set `will-change` only during a known animation. The audit flags it when left on. [impeccable]\n- Stop loops that aren't needed when they're off screen or hidden. Respect autoplay and sound settings. [impeccable]\n- Text that scrolls by itself forever (a marquee) is flagged. [impeccable]\n- Big effects (WebGL and the like): keep 60 frames a second; below 50, simplify. Always have a plain fallback. Never add sound without opt-in. [impeccable]\n- When the chosen look names a technique (canvas, WebGL, view transitions), build the real thing, not a still imitation. [impeccable]\n\n**Tools**\n- frontend-design: CSS-only motion for plain HTML; the Motion library for React. [frontend-design]\n- Astryx themes can generate motion timings from a few inputs (fast, medium, ratio). [Astryx]\n\n## Tools in this drawer\n- **Purposeful motion: `/impeccable animate <target>`.** Pick it when you're adding or reworking animation.\n- **Tool: rule checker for AI tells (impeccable detect).** Pick it to catch content left hidden, bounce easing and endless scrolling.","capturedAt":"2026-10-29T09:31:20.942Z","createdAt":"2026-10-29T09:31:20.943Z","updatedAt":"2026-11-06T04:43:55.394Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:12.510Z"}],"fingerprint":"4737fba3103bacfa85ff73ecc7bd88535ff37c2ffbb06555670987e986aa34da","revisionNo":"2","structureHash":"a254f5077efc5d74424160fdbda8d8b0321093d6433b99164b68d09bd99212d3","page":"https://lattris.com/by/b/memories/d1fb677c-ee19-4031-bfea-72774baaa944"},"links":[{"direction":"out","verb":"references","reason":"Follow back to pick a different drawer.","hash":"da569e12bb7788450625abcce8fb18bdd9e5043e46edf8d138ef35d28f13adfd","node":{"id":"5f8b457d-b87a-4e61-9af2-3008deaf37a9","handle":"5f8b","type":"note","title":"Front-end design: the toolbox","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9?links=1","fingerprint":"49e1c7f41f22c466c7ef1a993cab80b6dcbedab4552d2ac684133d60dea7e60b","revisionNo":"2","structureHash":"64df670c7bd82572e0ad9b2e06b8829d3b2e509be134591c04ea1fa281fca3ef","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9"}},{"direction":"out","verb":"references","reason":"only if you need to install impeccable before running one of the commands above, or check its cautions first","hash":"df535aee8385f9f4e0b8c2aa0d8091080acf69a9ad1c62e2b10aedfe2f66c517","node":{"id":"7b1bf5e3-1c32-4b94-8e8a-1436409042a0","handle":"7b1b","type":"note","title":"Source: impeccable","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/7b1bf5e3-1c32-4b94-8e8a-1436409042a0?links=1","fingerprint":"118dd05f30af956d68616de75423a1b8c7180a16da21f5788bf8e6589414c0bd","revisionNo":"3","structureHash":"32d1be7421efd06d67641aa60439c18dac3b6e676e9b31dc5ca978b397c949e0","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/7b1bf5e3-1c32-4b94-8e8a-1436409042a0"}},{"direction":"out","verb":"references","reason":"Pick it to catch content left hidden, bounce easing and endless scrolling.","hash":"84b07ac1af7df64ceb7c8006e0146513c781d94c17b700063c444864c6b70710","node":{"id":"ac67d1f2-f6ea-41c4-a982-2696e9410fd3","handle":"ac67","type":"note","title":"Tool: rule checker for AI tells (impeccable detect)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ac67d1f2-f6ea-41c4-a982-2696e9410fd3?links=1","fingerprint":"e339198a7edb93614129a6a94e5ba5b5257c715e4c1bde6d2cca64be2f438878","revisionNo":"1","structureHash":"82afdc94d333b4dc696c834ed2d0f9b552f2fbfdf0092c698725f66ddbd19f3b","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ac67d1f2-f6ea-41c4-a982-2696e9410fd3"}},{"direction":"out","verb":"references","reason":"Follow when a line marked [our build] needs its full context.","hash":"b4e44a8fd76a5e9a76d26e0c81176201a1c37cd9ea1db9c6af91947f118b9ecf","node":{"id":"ec50a07f-f1ee-4008-b3ce-b7e1a847d706","handle":"ec50","type":"note","title":"Pattern: building a website with AI","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ec50a07f-f1ee-4008-b3ce-b7e1a847d706?links=1","fingerprint":"62d9975e4cd521f59b3f3e71719dbcae5835d307e28597ea0104247bb6721bb2","revisionNo":"1","structureHash":"e63b54c083aa93ec272c5d03a5b587824c3c5a78373b8839600f59268a5f2083","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ec50a07f-f1ee-4008-b3ce-b7e1a847d706"}},{"direction":"in","verb":"references","reason":"Open it before you add any animation, or when content appears late or not at all.","hash":"3233948a63c0b6cefb08ad1bbb8be95df7c32858460bc78123ac8722a59f76db","node":{"id":"5f8b457d-b87a-4e61-9af2-3008deaf37a9","handle":"5f8b","type":"note","title":"Front-end design: the toolbox","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9?links=1","fingerprint":"49e1c7f41f22c466c7ef1a993cab80b6dcbedab4552d2ac684133d60dea7e60b","revisionNo":"2","structureHash":"64df670c7bd82572e0ad9b2e06b8829d3b2e509be134591c04ea1fa281fca3ef","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9"}},{"direction":"in","verb":"references","reason":"Follow for reduced-motion rules.","hash":"e70b4c391e9e97d9ba633f26f5502cf89ff92e4fcc830a8aed4559df55b8acb0","node":{"id":"bf82afc5-032e-4ecd-8a6a-205ab29f22d7","handle":"bf82","type":"note","title":"Drawer 6: Is it any good","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/bf82afc5-032e-4ecd-8a6a-205ab29f22d7?links=1","fingerprint":"1ea050b70d61986658d4c7346ee96979c14c9774d0b6aec5e490cddf0d5d8d57","revisionNo":"2","structureHash":"4d658c915f02ec511a2c0ee3b538c0b53325db079b1e2a9444d2bd2cb0737dd9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/bf82afc5-032e-4ecd-8a6a-205ab29f22d7"}}],"dictionary":{"lattris":"A personal knowledge base — how a person captures what they know as linked blocks they own and control. To understand how this knowledge base works: https://lattris.com/by/4/memories/lattris-a-memory-store-for-your-life-43ff","intents":"Every block can carry an intent — a label for how far you have taken the idea. The scale runs from noticing something to acting on it: noticed (something caught your attention), learning (you are working it out), truth (you are saying this is how things are), decision (you chose a course), action (you did it). Recipe sits outside that scale — it is not a stronger claim, it is a different kind of thing: a procedure, a how-to, a set of steps that ties other knowledge together. Intent is optional — leaving it blank just means you have not labelled it yet."},"instructions_to_ai":"This is knowledge from a personal knowledge base. Read it and consider how it's relevant to what the person you're talking to needs. Follow the linked blocks to explore further related topics if it might be useful to the user; open each at its page address. Start by letting the user know what this is about and how it may be relevant to them."}