Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Scroll 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%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%Frontend Implementation3d / three.jsWeb 3D Asset Runtime Pipeline
A Three.js page is not just a canvas; 3D assets need source licensing, glTF optimization, texture compression, loading states, interaction goals, fallbacks, and verification evidence.
Web 3D combines design, assets, runtime, and performance budgets. Agents can safely generate 3D experiences only after governing model source, geometry complexity, texture format, fallback path, and accessible explanation.95%Resource Licensingfonts / licenseWebfont License and Loading Governance
Font intake is not only visual choice; it must confirm per-font licensing, delivery method, privacy constraints, CJK size, fallback, and loading performance together.
A font is both a brand asset and a runtime dependency. Agents should recommend a font only when its license is traceable, loading surface is controlled, fallback is stable, and privacy boundary is clear.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%Interaction Responsive Motionloading / performancePerceived Performance and Loading Structure
Loading states should preserve layout skeletons so users know what will appear, instead of showing only a spinner.
Stable skeletons reduce waiting anxiety and avoid layout shift when content appears.82%