Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Copy-in Motion Component Localization and Accessibility
After copying an external motion component, Lottie/Rive player, Motion/GSAP example, or registry block, localize copy, states, direction, duration, reduced motion, pause/stop/hide behavior, keyboard paths, and license source.
Once a motion component is copied into the repository, it is no longer a demo fragment. It becomes a local interaction asset that must satisfy brand voice, language direction, accessible fallbacks, performance budget, and source licensing.95%Interaction Responsive Motionmotion / scrollScroll Story Chapter Contract
The basic unit of scrollytelling is not an animation frame but a readable chapter: each chapter needs a question, text anchor, visual state, static fallback, and verifiable scroll behavior.
Scroll storytelling should break complex mechanisms into evidence chapters users can pause on, skip, and return to; motion connects chapters and states but should not become the only content layer.95%Design Systems Page Patternsfood-commerce / first-viewportFood Commerce Appetite-to-Order Path
Food, drink, and quick-commerce pages can be playful and animated, but the first viewport must turn appetite into menu access, price, ingredient/nutrition proof, and a stable order path.
Food-commerce expression works only when it serves selection, trust, and purchase; motion, oversized type, ingredient illustration, and brand color must return users to inspectable products and order actions.95%Frontend Implementationscroll / motionScroll-linked Motion Implementation Boundaries
Scroll motion must distinguish CSS scroll timelines, GSAP ScrollTrigger, Lenis smooth scroll, and native scrolling; immersion must not break reading, anchors, keyboard behavior, or mobile feel.
Scroll is user-controlled reading rhythm, not the animator's timeline. Implementation should preserve native scroll semantics first, then bind lightweight motion to sections where it adds value.95%Interaction Responsive Motionmotion / reduced-motionMotion Accessibility and Performance Triage
Before shipping motion, classify purpose, trigger, disable path, performance properties, and verification evidence instead of accepting it because it looks smooth.
Good motion explains change; bad motion adds burden. Triage turns every animation into an explainable, reducible, testable, cleanup-safe interface behavior.95%Resource Licensingvideo / motionStock Video Hero and Background Governance
Free stock video can make heroes feel more real, but each use must confirm item license, likeness/trademark/property rights, attribution, poster, pause control, reduced motion, and mobile performance.
Background video is not moving wallpaper. It belongs in production only when it serves first-viewport signal, brand tone, or story evidence without weakening readability, accessibility, licensing, or performance.95%Visual Foundationscase-study / awwwardsAward Site Case Evidence Matrix
When analyzing Awwwards-style award sites, record layout, color, typography, interaction, motion, and usability evidence separately instead of saying only premium, immersive, or beautiful.
The value of case analysis is not copying surface style; it is translating verifiable design choices into reusable judgment and implementation constraints.94%Frontend Implementationview-transition / navigationView Transition Route Continuity
The View Transition API can make route, filter, and detail changes feel continuous, but it must preserve URL, focus, scroll, reduced-motion, and progressive enhancement boundaries.
Page transitions are not spectacle; they help users understand continuity of the same object across lists, details, filters, and state changes.94%Interaction Responsive Motionmotion / scrollAward Site Scroll Story Motion
Scroll motion should help users understand product state and narrative progress, not hide information inside uncontrolled spectacle.
Scroll motion in narrative pages must serve causality, hierarchy, and pacing: each motion segment should explain a state change or value proof.92%Interaction Responsive Motionportfolio / motionQuiet Motion in Portfolios
Portfolio motion should clarify selection, entry, comparison, and memory instead of making every element perform.
The interaction value of a portfolio is helping users judge craft: project selection, visual detail, case navigation, and contextual transitions matter more than decorative animation.90%Typography Color Accessibilitymotion / reduced-motionReduced Motion Accessibility
Reduced Motion Accessibility turns a frequent interface judgment into an executable constraint before generation.
Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.86%Visual Foundationsmotion / hierarchyHierarchy Through Motion
Hierarchy Through Motion turns a frequent interface judgment into an executable constraint before generation.
Useful motion helps users understand what changed, where it came from, and where to look.84%Interaction Responsive Motionmotion / animationRestrained Motion With Purpose
Motion should explain state change, spatial relationship, or feedback instead of adding noise.
Excessive motion interrupts tasks, especially in dense tools.82%