QuickSite Dev Log #4 — Interactions & Animations

How do you make a page react to the user — search, filter, toggle — and do it smoothly? In this video I add the client-side interaction system to the documentation/commands page of quicksite-v2: a search input that filters the visible cmd-cards as you type (with matchAttr to scope what counts as a match, and emptyParent to hide abandoned section wrappers), then plug the CSS animations editor into the same flow so cards collapse out and fade back in smoothly instead of snapping. No fetch, no backend — pure DOM interaction wired through the visual editor, plus a set-keyframe-animator workflow that seeds about 10 reusable keyframe animations so we don't have to hand-author opacity curves on camera. GitHub: https://github.com/Sangiovanni/quicksite Release notes: https://github.com/Sangiovanni/quicksite/releases/tag/v1.0.0-beta.6 CSS animations primer (linked in the video): https://www.w3schools.com/css/css3_animations.asp Chapters: 0:00 Intro 0:21 Test page — three elements 1:46 First interactions — hide & show 3:00 Search input on documentation/commands 3:29 Wiring oninput → filter (cmd-card) 4:56 Advanced — matchAttr 6:21 Empty-parent — hide empty cmd-section 7:12 Hidden class 7:53 CSS animations editor tour 8:39 Workflow — set-keyframe-animator (10 presets) 9:26 hidden-cmd selector → collapse-out 10:25 Smooth disappearance demo 10:59 Going further — fade-in on re-appear 12:13 Outro Full playlist: https://www.youtube.com/playlist?list=PLULtElcjV8r-o8uVM9bS86ZYk0rvKuZwL Previous: Dev Log #3 — Components vs Snippets (https://www.youtube.com/watch?v=Q9B2_l8tfSs) Next: Dev Log #5 —