[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fleYDkl13OVmpVtYCG_7r0Dlg_iMJtyc9uFRsG3XAv3I":3},{"slug":4,"title":5,"seoTitle":6,"seoDescription":7,"h1":8,"intro":9,"category":10,"template":11,"inputs":12,"promptTemplate":51,"outputFormat":52,"faq":53,"relatedSlugs":69,"seoSections":75},"animation-brief-generator","Animation Brief Generator","AI Animation Brief Generator | Motion Design Direction Tool","Generate detailed animation briefs with AI. Create clear motion design direction for UI animations, micro-interactions, and explainer videos with timing.","AI Animation Brief Generator","Direct motion design with precision using comprehensive animation briefs. Our AI generates detailed briefs for UI animations, micro-interactions, loading sequences, and explainer animations — covering timing, easing, storyboard descriptions, and technical implementation specs that get your vision produced accurately.","design","form",[13,20,32,37,46],{"name":14,"label":15,"type":16,"placeholder":17,"required":18,"maxLength":19},"animationPurpose","Animation Purpose","textarea","e.g., Page transition between dashboard views, Loading skeleton animation, Feature explainer for landing page",true,500,{"name":21,"label":22,"type":23,"options":24,"required":18},"animationType","Animation Type","select",[25,26,27,28,29,30,31],"UI Micro-interaction","Page Transition","Loading\u002FSkeleton","Explainer\u002FStorytelling","Onboarding Walkthrough","Notification\u002FAlert","Data Visualization",{"name":33,"label":34,"type":35,"placeholder":36},"duration","Target Duration","text","e.g., 300ms for micro-interaction, 15 seconds for explainer",{"name":38,"label":39,"type":23,"options":40,"default":41},"platform","Implementation Platform",[41,42,43,44,45],"CSS\u002FWeb","Lottie\u002FAfter Effects","Framer Motion\u002FReact","GSAP","Native iOS\u002FAndroid",{"name":47,"label":48,"type":16,"placeholder":49,"maxLength":50},"references","Motion References","e.g., Stripe's smooth page transitions, Linear's snappy micro-interactions, Apple's fluid physics",300,"Create a detailed animation brief for: {{animationPurpose}}. Type: {{animationType}}. Duration: {{duration}}. Platform: {{platform}}. References: {{references}}. Include: storyboard description (frame by frame), timing and easing specifications, trigger conditions, state transitions, performance considerations, accessibility notes (reduced motion), and technical implementation guidance. Describe the motion in precise, implementable terms.","markdown",[54,57,60,63,66],{"question":55,"answer":56},"What should an animation brief include?","A thorough animation brief covers: the trigger (what initiates the animation), storyboard (frame-by-frame description of the motion), timing (duration in milliseconds), easing curves (ease-in-out, spring, custom), states (start, active, end), performance requirements (frame rate, GPU usage), accessibility (reduced-motion alternative), and technical specs (implementation platform, file format, size limits).",{"question":58,"answer":59},"How do I describe motion in writing?","Use precise verbs: 'slides in from the right' not 'appears,' 'scales up from 0% to 100%' not 'grows,' 'fades from 0 to 1 opacity over 200ms with ease-out' not 'fades in.' Describe each property being animated separately: position, scale, opacity, rotation. Reference easing curves by name (ease-in-out, cubic-bezier values) and duration in milliseconds. The more specific your language, the fewer revisions needed.",{"question":61,"answer":62},"What are good animation timing guidelines?","Micro-interactions (button hover, toggle): 100-200ms. Transitions (page changes, panels): 200-400ms. Entrances (elements appearing): 200-300ms. Exits (elements leaving): 150-250ms. Complex sequences (onboarding, explainers): 500ms-30s. Faster is almost always better for UI animations — users should never feel like they are waiting for an animation to complete. If it feels slow, it is slow.",{"question":64,"answer":65},"How do I handle animation accessibility?","Always respect the prefers-reduced-motion media query. Provide a reduced-motion alternative that conveys the same information without animation — instant state changes, crossfades, or static alternatives. Essential animations (loading indicators) can remain but should be simplified. Avoid large-scale motion, rapid flashing, and parallax effects for users who have opted into reduced motion settings.",{"question":67,"answer":68},"What easing curves should I use?","For UI elements entering: ease-out (fast start, gentle stop). For UI elements leaving: ease-in (gentle start, fast end). For property changes: ease-in-out (smooth both ends). For playful, physical motion: spring curves with bounce. Avoid linear easing for UI animations — it feels mechanical and unnatural. Material Design and Apple HIG both publish recommended easing curves that feel natural and polished.",[70,71,72,73,74],"illustration-brief-generator","creative-brief-design-generator","design-brief-generator","user-flow-generator","design-system-token-generator",[76,79],{"title":77,"content":78},"Motion Design: Adding Life to Digital Products","Well-crafted animation transforms static interfaces into living, breathing experiences. Motion communicates hierarchy (what is important draws attention), provides feedback (confirming that actions were successful), maintains context (showing where elements come from and go), and creates delight (rewarding user actions with satisfying responses). A detailed animation brief ensures these benefits are realized intentionally rather than accidentally.",{"title":80,"content":81},"From Brief to Implementation: Shipping Motion Design","The gap between an animation concept and a shipped implementation is where many motion designs fail. Bridge this gap by specifying implementation-ready details: exact CSS properties and values, easing curve cubic-bezier parameters, duration in milliseconds, and trigger conditions. Include performance constraints (GPU-composited properties only: transform and opacity) and reduced-motion alternatives. Developers should be able to implement directly from your brief."]