@xpert-ai/plugin-motion 0.1.0

package/dist/assets/upstream/app/data/recipes.js

@@ -0,0 +1,1065 @@
+/* motion-anything · library data
+ * The app's Motion Library renders from this list. Adding an entry here puts a new
+ * card on the shelf. (Roadmap: `motion build` will generate this from the real
+ * recipes/<surface>/<id>/recipe.motion.yaml manifests so content and app stay in sync.)
+ *
+ * cat     = MOTION-SPEC category (mapped to a friendly label in the app)
+ * kind    = which tiny live demo the card plays (see app.js renderDemo/animateDemo)
+ * status  = 'ready' (real recipe folder, exportable) | 'soon' (roadmap)
+ * preview = path to the real recipe preview (null until the recipe folder exists)
+ */
+window.MA_RECIPES = [
+  { id:'fx-typewriter-multi', name:'Typewriter Multi', cat:'text-kinetic', surfaces:['video'], target:['text'], runtime:['js'], export:['skill','html'],
+    desc:"Multi-line typewriter — types lines in sequence.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-typewriter-multi/preview.html' },
+  { id:'shiny-text', name:'Shiny Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css"], export:['skill','motion-json','html'],
+    desc:"Shiny Text — dependency-free, reduced-motion safe.", tags:["shine","shimmer","premium","label"], kind:'ui', status:'ready', preview:'recipes/web/shiny-text/preview.html' },
+  { id:'star-border', name:'Star Border', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["button","card"], runtime:["css"], export:['skill','motion-json','html'],
+    desc:"Star Border — dependency-free, reduced-motion safe.", tags:["border","gradient","cta","glow"], kind:'css-anim', status:'ready', preview:'recipes/web/star-border/preview.html' },
+  { id:'glare-hover', name:'Glare Hover', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","image"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Glare Hover — dependency-free, reduced-motion safe.", tags:["glare","sheen","hover","premium"], kind:'ui', status:'ready', preview:'recipes/web/glare-hover/preview.html' },
+  { id:'glitch-text', name:'Glitch Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css"], export:['skill','motion-json','html'],
+    desc:"Glitch Text — dependency-free, reduced-motion safe.", tags:["glitch","rgb","cyberpunk","techy"], kind:'ui', status:'ready', preview:'recipes/web/glitch-text/preview.html' },
+  { id:'fade-content', name:'Fade Content', cat:'scroll-reveal', surfaces:['web','interaction'], canvas:['web'], target:["section","card","text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Fade Content — dependency-free, reduced-motion safe.", tags:["fade","reveal","on-view","scroll"], kind:'ui', status:'ready', preview:'recipes/web/fade-content/preview.html' },
+  { id:'click-spark', name:'Click Spark', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button"], runtime:["js"], export:['skill','motion-json','html'],
+    desc:"Click Spark — dependency-free, reduced-motion safe.", tags:["spark","click","burst","tap"], kind:'ui', status:'ready', preview:'recipes/web/click-spark/preview.html' },
+  { id:'rotating-text', name:'Rotating Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Rotating Text — dependency-free, reduced-motion safe.", tags:["rotating","cycle","words"], kind:'ui', status:'ready', preview:'recipes/web/rotating-text/preview.html' },
+  { id:'true-focus', name:'True Focus', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"True Focus — dependency-free, reduced-motion safe.", tags:["focus","blur","attention"], kind:'ui', status:'ready', preview:'recipes/web/true-focus/preview.html' },
+  { id:'electric-border', name:'Electric Border', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["card","button"], runtime:["css"], export:['skill','motion-json','html'],
+    desc:"Electric Border — dependency-free, reduced-motion safe.", tags:["electric","border","energy"], kind:'css-anim', status:'ready', preview:'recipes/web/electric-border/preview.html' },
+  { id:'gradual-blur', name:'Gradual Blur', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["section","list"], runtime:["css"], export:['skill','motion-json','html'],
+    desc:"Gradual Blur — dependency-free, reduced-motion safe.", tags:["blur","gradient","mask","edge"], kind:'css-anim', status:'ready', preview:'recipes/web/gradual-blur/preview.html' },
+  { id:'blur-text', name:'Blur Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Blur Text — dependency-free, reduced-motion safe.", tags:["blur","focus","entrance","headline"], kind:'ui', status:'ready', preview:'recipes/web/blur-text/preview.html' },
+  { id:'decrypted-text', name:'Decrypted Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Decrypted Text — dependency-free, reduced-motion safe.", tags:["decrypt","scramble","decode","techy"], kind:'ui', status:'ready', preview:'recipes/web/decrypted-text/preview.html' },
+  { id:'falling-text', name:'Falling Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Falling Text — dependency-free, reduced-motion safe.", tags:["fall","drop","gravity","entrance"], kind:'ui', status:'ready', preview:'recipes/web/falling-text/preview.html' },
+  { id:'shuffle-text', name:'Shuffle Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Shuffle Text — dependency-free, reduced-motion safe.", tags:["shuffle","scramble","reveal"], kind:'ui', status:'ready', preview:'recipes/web/shuffle-text/preview.html' },
+  { id:'scroll-float', name:'Scroll Float', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Scroll Float — dependency-free, reduced-motion safe.", tags:["scroll","per-word","float","reveal"], kind:'ui', status:'ready', preview:'recipes/web/scroll-float/preview.html' },
+  { id:'circular-text', name:'Circular Text', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Circular Text — dependency-free, reduced-motion safe.", tags:["circular","ring","badge","seal"], kind:'css-anim', status:'ready', preview:'recipes/web/circular-text/preview.html' },
+  { id:'magnet-lines', name:'Magnet Lines', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Magnet Lines — dependency-free, reduced-motion safe.", tags:["magnet","pointer","field"], kind:'ui', status:'ready', preview:'recipes/web/magnet-lines/preview.html' },
+  { id:'pixel-transition', name:'Pixel Transition', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","image"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Pixel Transition — dependency-free, reduced-motion safe.", tags:["pixel","transition","retro","reveal"], kind:'ui', status:'ready', preview:'recipes/web/pixel-transition/preview.html' },
+  { id:'glass-icons', name:'Glass Icons', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["button","icon"], runtime:["css"], export:['skill','motion-json','html'],
+    desc:"Glass Icons — dependency-free, reduced-motion safe.", tags:["glass","glassmorphism","tactile"], kind:'ui', status:'ready', preview:'recipes/web/glass-icons/preview.html' },
+  { id:'pixel-card', name:'Pixel Card', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Pixel Card — dependency-free, reduced-motion safe.", tags:["pixel","shimmer","retro"], kind:'ui', status:'ready', preview:'recipes/web/pixel-card/preview.html' },
+  { id:'blob-cursor', name:'Blob Cursor', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:["js"], export:['skill','motion-json','html'],
+    desc:"Blob Cursor — dependency-free, reduced-motion safe.", tags:["blob","gooey","cursor","pointer"], kind:'ui', status:'ready', preview:'recipes/web/blob-cursor/preview.html' },
+  { id:'crosshair', name:'Crosshair Cursor', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:["js"], export:['skill','motion-json','html'],
+    desc:"Crosshair Cursor — dependency-free, reduced-motion safe.", tags:["crosshair","targeting","cursor"], kind:'ui', status:'ready', preview:'recipes/web/crosshair/preview.html' },
+  { id:'target-cursor', name:'Target Cursor', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["button","section"], runtime:["js"], export:['skill','motion-json','html'],
+    desc:"Target Cursor — dependency-free, reduced-motion safe.", tags:["target","ring","cursor"], kind:'ui', status:'ready', preview:'recipes/web/target-cursor/preview.html' },
+  { id:'elastic-slider', name:'Elastic Slider', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["section"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Elastic Slider — dependency-free, reduced-motion safe.", tags:["slider","springy","input"], kind:'ui', status:'ready', preview:'recipes/web/elastic-slider/preview.html' },
+  { id:'counter', name:'Counter Roll', cat:'emphasis', surfaces:['web','interaction'], canvas:['web'], target:["number"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Counter Roll — dependency-free, reduced-motion safe.", tags:["counter","odometer","number","roll"], kind:'ui', status:'ready', preview:'recipes/web/counter/preview.html' },
+  { id:'image-trail', name:'Image Trail', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["image","section"], runtime:["js"], export:['skill','motion-json','html'],
+    desc:"Image Trail — dependency-free, reduced-motion safe.", tags:["image","trail","cursor","gallery"], kind:'ui', status:'ready', preview:'recipes/web/image-trail/preview.html' },
+  { id:'dock', name:'Magnify Dock', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["list","button"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Magnify Dock — dependency-free, reduced-motion safe.", tags:["dock","magnify","macos","launcher"], kind:'ui', status:'ready', preview:'recipes/web/dock/preview.html' },
+  { id:'gooey-nav', name:'Gooey Nav', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["list","button"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Gooey Nav — dependency-free, reduced-motion safe.", tags:["gooey","nav","liquid","tabs"], kind:'ui', status:'ready', preview:'recipes/web/gooey-nav/preview.html' },
+  { id:'stepper', name:'Stepper', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["list","section"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Stepper — dependency-free, reduced-motion safe.", tags:["stepper","progress","steps"], kind:'ui', status:'ready', preview:'recipes/web/stepper/preview.html' },
+  { id:'bounce-cards', name:'Bounce Cards', cat:'entrance', surfaces:['web','interaction'], canvas:['web'], target:["card"], runtime:["css","js"], export:['skill','motion-json','html'],
+    desc:"Bounce Cards — dependency-free, reduced-motion safe.", tags:["bounce","fan","cards","spring"], kind:'ui', status:'ready', preview:'recipes/web/bounce-cards/preview.html' },
+  { id:'aurora', name:'Aurora', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"A living aurora gradient mesh — GPU fragment shader in dependency-free WebGL2.", tags:['shader','webgl','aurora','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/aurora/preview.html' },
+  { id:'iridescence', name:'Iridescence', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"A flowing iridescent silk field — GPU fragment shader in dependency-free WebGL.", tags:['shader','webgl','iridescence','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/iridescence/preview.html' },
+  { id:'liquid-chrome', name:'Liquid Chrome', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Liquid Chrome — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','liquid-chrome','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/liquid-chrome/preview.html' },
+  { id:'plasma', name:'Plasma', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Plasma — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','plasma','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/plasma/preview.html' },
+  { id:'threads', name:'Threads', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Threads — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','threads','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/threads/preview.html' },
+  { id:'dark-veil', name:'Dark Veil', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Dark Veil — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','dark-veil','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/dark-veil/preview.html' },
+  { id:'ripple-grid', name:'Ripple Grid', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Ripple Grid — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','ripple-grid','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/ripple-grid/preview.html' },
+  { id:'prism', name:'Prism', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Prism — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','prism','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/prism/preview.html' },
+  { id:'balatro', name:'Balatro', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Balatro — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','balatro','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/balatro/preview.html' },
+  { id:'grainient', name:'Grainient', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Grainient — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','grainient','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/grainient/preview.html' },
+  { id:'plasma-wave', name:'Plasma Wave', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Plasma Wave — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','plasma-wave','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/plasma-wave/preview.html' },
+  { id:'faulty-terminal', name:'Faulty Terminal', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Faulty Terminal — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','faulty-terminal','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/faulty-terminal/preview.html' },
+  { id:'ferrofluid', name:'Ferrofluid', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Ferrofluid — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','ferrofluid','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/ferrofluid/preview.html' },
+  { id:'galaxy', name:'Galaxy', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Galaxy — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','galaxy','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/galaxy/preview.html' },
+  { id:'gradient-blinds', name:'Gradient Blinds', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Gradient Blinds — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','gradient-blinds','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/gradient-blinds/preview.html' },
+  { id:'light-rays', name:'Light Rays', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Light Rays — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','light-rays','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/light-rays/preview.html' },
+  { id:'lightfall', name:'Lightfall', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Lightfall — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','lightfall','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/lightfall/preview.html' },
+  { id:'line-waves', name:'Line Waves', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Line Waves — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','line-waves','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/line-waves/preview.html' },
+  { id:'orb', name:'Orb', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Orb — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','orb','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/orb/preview.html' },
+  { id:'prismatic-burst', name:'Prismatic Burst', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Prismatic Burst — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','prismatic-burst','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/prismatic-burst/preview.html' },
+  { id:'radar', name:'Radar', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Radar — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','radar','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/radar/preview.html' },
+  { id:'side-rays', name:'Side Rays', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Side Rays — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','side-rays','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/side-rays/preview.html' },
+  { id:'soft-aurora', name:'Soft Aurora', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Soft Aurora — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','soft-aurora','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/soft-aurora/preview.html' },
+  { id:'strands', name:'Strands', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Strands — a distinctive GPU shader background, dependency-free WebGL.", tags:['shader','webgl','strands','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/strands/preview.html' },
+  { id:'lightning', name:'Lightning', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Lightning — a raking electric bolt with glow, faithful GPU shader (dependency-free WebGL).", tags:['shader','webgl','lightning','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/lightning/preview.html' },
+  { id:'silk', name:'Silk', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Silk — flowing silky fabric waves, faithful GPU shader (dependency-free WebGL).", tags:['shader','webgl','silk','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/silk/preview.html' },
+  { id:'pixel-snow', name:'Pixel Snow', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Pixel Snow — pixelated snowfall with depth fade, faithful GPU shader (dependency-free WebGL).", tags:['shader','webgl','pixel-snow','snow','background'], kind:'fx', status:'ready', preview:'recipes/web/pixel-snow/preview.html' },
+  { id:'pixel-blast', name:'Pixel Blast', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Pixel Blast — a drifting pixel pattern that ripples out from clicks, faithful GPU shader (dependency-free WebGL).", tags:['shader','webgl','pixel-blast','interactive','background'], kind:'fx', status:'ready', preview:'recipes/web/pixel-blast/preview.html' },
+  { id:'dither', name:'Dither', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Dither — a retro Bayer-dithered noise wave, faithful GPU shader (dependency-free WebGL).", tags:['shader','webgl','dither','retro','background'], kind:'fx', status:'ready', preview:'recipes/web/dither/preview.html' },
+  { id:'noise', name:'Noise', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Noise — a film-grain overlay refreshed every few frames (canvas 2D, dependency-free).", tags:['canvas','noise','grain','overlay','texture'], kind:'fx', status:'ready', preview:'recipes/web/noise/preview.html' },
+  { id:'dot-grid', name:'Dot Grid', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:['background','section','cursor'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Dot Grid — dots light up near the pointer, get shoved by fast moves, blast on click, spring back elastically (canvas 2D, dependency-free).", tags:['canvas','dots','interactive','click','cursor'], kind:'fx', status:'ready', preview:'recipes/web/dot-grid/preview.html' },
+  { id:'waves', name:'Waves', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Waves — a perlin-warped line field with a pointer wake (canvas 2D, dependency-free).", tags:['canvas','lines','perlin','waves','background'], kind:'fx', status:'ready', preview:'recipes/web/waves/preview.html' },
+  { id:'dot-field', name:'Dot Field', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Dot Field — a gradient dot lattice that bulges away from the pointer with a soft glow (canvas 2D, dependency-free).", tags:['canvas','dots','interactive','cursor','background'], kind:'fx', status:'ready', preview:'recipes/web/dot-field/preview.html' },
+  { id:'particles', name:'Particles', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['background','section'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Particles — a floating 3D particle cloud with slow scene wobble (raw WebGL points, dependency-free).", tags:['webgl','particles','3d','background','hero'], kind:'fx', status:'ready', preview:'recipes/web/particles/preview.html' },
+  { id:'splash-cursor', name:'Splash Cursor', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:['background','section','cursor'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:"Splash Cursor — pointer movement splats swirling glowing dye (full multi-pass WebGL fluid simulation, dependency-free).", tags:['webgl','fluid','cursor','interactive','wow'], kind:'fx', status:'ready', preview:'recipes/web/splash-cursor/preview.html' },
+  { id:'lottie-favorite', name:'Lottie · Favorite', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['skill','lottie','motion-json','html'],
+    desc:"A heart/favorite icon that animates on toggle — Lottie JSON, portable across web & app.", kind:'lottie', status:'ready', upstream:'spemer/lottie-animations-json',
+    preview:'recipes/lottie/lottie-favorite/preview.html' },
+  { id:'lottie-fab', name:'Lottie · FAB', cat:'feedback-delight', surfaces:['app','web','interaction'], canvas:['app','web'], target:['button'], runtime:['lottie'], export:['skill','lottie','motion-json','html'],
+    desc:"A floating action button that morphs open — Lottie JSON.", kind:'lottie', status:'ready', upstream:'spemer/lottie-animations-json',
+    preview:'recipes/lottie/lottie-fab/preview.html' },
+  { id:'lottie-tab', name:'Lottie · Tab', cat:'page-transition', surfaces:['app','interaction'], canvas:['app'], target:['button'], runtime:['lottie'], export:['skill','lottie','motion-json','html'],
+    desc:"An animated bottom-tab indicator — Lottie JSON.", kind:'lottie', status:'ready', upstream:'spemer/lottie-animations-json',
+    preview:'recipes/lottie/lottie-tab/preview.html' },
+  { id:'lottie-pagination', name:'Lottie · Pagination', cat:'feedback-delight', surfaces:['app','web','interaction'], canvas:['app','web'], target:['icon'], runtime:['lottie'], export:['skill','lottie','motion-json','html'],
+    desc:"An animated pagination dots indicator — Lottie JSON.", kind:'lottie', status:'ready', upstream:'spemer/lottie-animations-json',
+    preview:'recipes/lottie/lottie-pagination/preview.html' },
+  { id:'kinetic-headline', name:'Kinetic Headline', cat:'text-kinetic',     surfaces:['web','video'],
+    target:['text'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'Words stagger in, one after another — for a hero line.',       kind:'kinetic', status:'ready',
+    preview:'recipes/web/kinetic-headline/preview.html' },
+  { id:'page-fade',        name:'Page Fade',        cat:'page-transition',  surfaces:['web'],
+    target:['section'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'A soft fade-through between pages or sections.',               kind:'cross',   status:'soon',
+    preview:null },
+  { id:'crossfade-glide',  name:'Crossfade Glide',  cat:'video-transition', surfaces:['video'],
+    target:['transition'], runtime:['js'], export:['skill','motion-json','html'],
+    desc:'Silky shot-to-shot transition for launch films.',             kind:'cross',   status:'soon',
+    preview:null },
+  { id:'anim-bounce', name:'Animate · Bounce', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounce/preview.html' },
+  { id:'anim-flash', name:'Animate · Flash', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Flash — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-flash/preview.html' },
+  { id:'anim-headshake', name:'Animate · Head Shake', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Head Shake — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-headshake/preview.html' },
+  { id:'anim-heartbeat', name:'Animate · Heart Beat', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Heart Beat — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-heartbeat/preview.html' },
+  { id:'anim-jello', name:'Animate · Jello', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Jello — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-jello/preview.html' },
+  { id:'anim-pulse', name:'Animate · Pulse', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Pulse — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-pulse/preview.html' },
+  { id:'anim-rubberband', name:'Animate · Rubber Band', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rubber Band — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rubberband/preview.html' },
+  { id:'anim-shake', name:'Animate · Shake', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Shake — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-shake/preview.html' },
+  { id:'anim-shakex', name:'Animate · Shake X', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Shake X — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-shakex/preview.html' },
+  { id:'anim-shakey', name:'Animate · Shake Y', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Shake Y — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-shakey/preview.html' },
+  { id:'anim-swing', name:'Animate · Swing', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Swing — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-swing/preview.html' },
+  { id:'anim-tada', name:'Animate · Tada', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Tada — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-tada/preview.html' },
+  { id:'anim-wobble', name:'Animate · Wobble', cat:'emphasis', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Wobble — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-wobble/preview.html' },
+  { id:'anim-backindown', name:'Animate · Back In Down', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back In Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backindown/preview.html' },
+  { id:'anim-backinleft', name:'Animate · Back In Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back In Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backinleft/preview.html' },
+  { id:'anim-backinright', name:'Animate · Back In Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back In Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backinright/preview.html' },
+  { id:'anim-backinup', name:'Animate · Back In Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back In Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backinup/preview.html' },
+  { id:'anim-bouncein', name:'Animate · Bounce In', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce In — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bouncein/preview.html' },
+  { id:'anim-bounceindown', name:'Animate · Bounce In Down', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce In Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceindown/preview.html' },
+  { id:'anim-bounceinleft', name:'Animate · Bounce In Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce In Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceinleft/preview.html' },
+  { id:'anim-bounceinright', name:'Animate · Bounce In Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce In Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceinright/preview.html' },
+  { id:'anim-bounceinup', name:'Animate · Bounce In Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce In Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceinup/preview.html' },
+  { id:'anim-fadein', name:'Animate · Fade In', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadein/preview.html' },
+  { id:'anim-fadeinbottomleft', name:'Animate · Fade In Bottom Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Bottom Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinbottomleft/preview.html' },
+  { id:'anim-fadeinbottomright', name:'Animate · Fade In Bottom Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Bottom Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinbottomright/preview.html' },
+  { id:'anim-fadeindown', name:'Animate · Fade In Down', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeindown/preview.html' },
+  { id:'anim-fadeindownbig', name:'Animate · Fade In Down Big', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Down Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeindownbig/preview.html' },
+  { id:'anim-fadeinleft', name:'Animate · Fade In Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinleft/preview.html' },
+  { id:'anim-fadeinleftbig', name:'Animate · Fade In Left Big', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Left Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinleftbig/preview.html' },
+  { id:'anim-fadeinright', name:'Animate · Fade In Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinright/preview.html' },
+  { id:'anim-fadeinrightbig', name:'Animate · Fade In Right Big', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Right Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinrightbig/preview.html' },
+  { id:'anim-fadeintopleft', name:'Animate · Fade In Top Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Top Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeintopleft/preview.html' },
+  { id:'anim-fadeintopright', name:'Animate · Fade In Top Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Top Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeintopright/preview.html' },
+  { id:'anim-fadeinup', name:'Animate · Fade In Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinup/preview.html' },
+  { id:'anim-fadeinupbig', name:'Animate · Fade In Up Big', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade In Up Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeinupbig/preview.html' },
+  { id:'anim-flip', name:'Animate · Flip', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Flip — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-flip/preview.html' },
+  { id:'anim-flipinx', name:'Animate · Flip In X', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Flip In X — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-flipinx/preview.html' },
+  { id:'anim-flipiny', name:'Animate · Flip In Y', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Flip In Y — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-flipiny/preview.html' },
+  { id:'anim-lightspeedinleft', name:'Animate · Light Speed In Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Light Speed In Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-lightspeedinleft/preview.html' },
+  { id:'anim-lightspeedinright', name:'Animate · Light Speed In Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Light Speed In Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-lightspeedinright/preview.html' },
+  { id:'anim-rotatein', name:'Animate · Rotate In', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate In — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotatein/preview.html' },
+  { id:'anim-rotateindownleft', name:'Animate · Rotate In Down Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate In Down Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateindownleft/preview.html' },
+  { id:'anim-rotateindownright', name:'Animate · Rotate In Down Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate In Down Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateindownright/preview.html' },
+  { id:'anim-rotateinupleft', name:'Animate · Rotate In Up Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate In Up Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateinupleft/preview.html' },
+  { id:'anim-rotateinupright', name:'Animate · Rotate In Up Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate In Up Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateinupright/preview.html' },
+  { id:'anim-slideindown', name:'Animate · Slide In Down', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide In Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideindown/preview.html' },
+  { id:'anim-slideinleft', name:'Animate · Slide In Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide In Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideinleft/preview.html' },
+  { id:'anim-slideinright', name:'Animate · Slide In Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide In Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideinright/preview.html' },
+  { id:'anim-slideinup', name:'Animate · Slide In Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide In Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideinup/preview.html' },
+  { id:'anim-jackinthebox', name:'Animate · Jack In The Box', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Jack In The Box — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-jackinthebox/preview.html' },
+  { id:'anim-rollin', name:'Animate · Roll In', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Roll In — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rollin/preview.html' },
+  { id:'anim-zoomin', name:'Animate · Zoom In', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom In — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomin/preview.html' },
+  { id:'anim-zoomindown', name:'Animate · Zoom In Down', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom In Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomindown/preview.html' },
+  { id:'anim-zoominleft', name:'Animate · Zoom In Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom In Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoominleft/preview.html' },
+  { id:'anim-zoominright', name:'Animate · Zoom In Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom In Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoominright/preview.html' },
+  { id:'anim-zoominup', name:'Animate · Zoom In Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom In Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoominup/preview.html' },
+  { id:'anim-backoutdown', name:'Animate · Back Out Down', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back Out Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backoutdown/preview.html' },
+  { id:'anim-backoutleft', name:'Animate · Back Out Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back Out Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backoutleft/preview.html' },
+  { id:'anim-backoutright', name:'Animate · Back Out Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back Out Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backoutright/preview.html' },
+  { id:'anim-backoutup', name:'Animate · Back Out Up', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Back Out Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-backoutup/preview.html' },
+  { id:'anim-bounceout', name:'Animate · Bounce Out', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce Out — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceout/preview.html' },
+  { id:'anim-bounceoutdown', name:'Animate · Bounce Out Down', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce Out Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceoutdown/preview.html' },
+  { id:'anim-bounceoutleft', name:'Animate · Bounce Out Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce Out Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceoutleft/preview.html' },
+  { id:'anim-bounceoutright', name:'Animate · Bounce Out Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce Out Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceoutright/preview.html' },
+  { id:'anim-bounceoutup', name:'Animate · Bounce Out Up', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Bounce Out Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-bounceoutup/preview.html' },
+  { id:'anim-fadeout', name:'Animate · Fade Out', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeout/preview.html' },
+  { id:'anim-fadeoutbottomleft', name:'Animate · Fade Out Bottom Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Bottom Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutbottomleft/preview.html' },
+  { id:'anim-fadeoutbottomright', name:'Animate · Fade Out Bottom Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Bottom Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutbottomright/preview.html' },
+  { id:'anim-fadeoutdown', name:'Animate · Fade Out Down', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutdown/preview.html' },
+  { id:'anim-fadeoutdownbig', name:'Animate · Fade Out Down Big', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Down Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutdownbig/preview.html' },
+  { id:'anim-fadeoutleft', name:'Animate · Fade Out Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutleft/preview.html' },
+  { id:'anim-fadeoutleftbig', name:'Animate · Fade Out Left Big', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Left Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutleftbig/preview.html' },
+  { id:'anim-fadeoutright', name:'Animate · Fade Out Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutright/preview.html' },
+  { id:'anim-fadeoutrightbig', name:'Animate · Fade Out Right Big', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Right Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutrightbig/preview.html' },
+  { id:'anim-fadeouttopleft', name:'Animate · Fade Out Top Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Top Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeouttopleft/preview.html' },
+  { id:'anim-fadeouttopright', name:'Animate · Fade Out Top Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Top Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeouttopright/preview.html' },
+  { id:'anim-fadeoutup', name:'Animate · Fade Out Up', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutup/preview.html' },
+  { id:'anim-fadeoutupbig', name:'Animate · Fade Out Up Big', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Out Up Big — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-fadeoutupbig/preview.html' },
+  { id:'anim-rotateout', name:'Animate · Rotate Out', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate Out — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateout/preview.html' },
+  { id:'anim-rotateoutdownleft', name:'Animate · Rotate Out Down Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate Out Down Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateoutdownleft/preview.html' },
+  { id:'anim-rotateoutdownright', name:'Animate · Rotate Out Down Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate Out Down Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateoutdownright/preview.html' },
+  { id:'anim-rotateoutupleft', name:'Animate · Rotate Out Up Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate Out Up Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateoutupleft/preview.html' },
+  { id:'anim-rotateoutupright', name:'Animate · Rotate Out Up Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate Out Up Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rotateoutupright/preview.html' },
+  { id:'anim-slideoutdown', name:'Animate · Slide Out Down', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide Out Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideoutdown/preview.html' },
+  { id:'anim-slideoutleft', name:'Animate · Slide Out Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide Out Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideoutleft/preview.html' },
+  { id:'anim-slideoutright', name:'Animate · Slide Out Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide Out Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideoutright/preview.html' },
+  { id:'anim-slideoutup', name:'Animate · Slide Out Up', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Slide Out Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-slideoutup/preview.html' },
+  { id:'anim-hinge', name:'Animate · Hinge', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Hinge — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-hinge/preview.html' },
+  { id:'anim-rollout', name:'Animate · Roll Out', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Roll Out — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-rollout/preview.html' },
+  { id:'anim-zoomout', name:'Animate · Zoom Out', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom Out — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomout/preview.html' },
+  { id:'anim-zoomoutdown', name:'Animate · Zoom Out Down', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom Out Down — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomoutdown/preview.html' },
+  { id:'anim-zoomoutleft', name:'Animate · Zoom Out Left', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom Out Left — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomoutleft/preview.html' },
+  { id:'anim-zoomoutright', name:'Animate · Zoom Out Right', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom Out Right — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomoutright/preview.html' },
+  { id:'anim-zoomoutup', name:'Animate · Zoom Out Up', cat:'exit', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text'], runtime:['css'], export:['skill','html'],
+    desc:"Zoom Out Up — ready-made CSS keyframe animation (Animate.css).", kind:'css-anim', status:'ready', upstream:'animate.css',
+    preview:'recipes/css/anim-zoomoutup/preview.html' },
+  { id:'xyz-fade-up', name:'XYZ · Fade Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Up — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-fade-up/preview.html' },
+  { id:'xyz-fade-down', name:'XYZ · Fade Down', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Down — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-fade-down/preview.html' },
+  { id:'xyz-fade-left', name:'XYZ · Fade Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Left — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-fade-left/preview.html' },
+  { id:'xyz-fade-right', name:'XYZ · Fade Right', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Right — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-fade-right/preview.html' },
+  { id:'xyz-fade-small', name:'XYZ · Fade Small', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Small — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-fade-small/preview.html' },
+  { id:'xyz-fade-big', name:'XYZ · Fade Big', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Fade Big — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-fade-big/preview.html' },
+  { id:'xyz-flip-up', name:'XYZ · Flip Up', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Flip Up — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-flip-up/preview.html' },
+  { id:'xyz-flip-left', name:'XYZ · Flip Left', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Flip Left — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-flip-left/preview.html' },
+  { id:'xyz-rotate', name:'XYZ · Rotate In', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Rotate In — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-rotate/preview.html' },
+  { id:'xyz-rise-big', name:'XYZ · Rise Big', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','text','card'], runtime:['css'], export:['skill','html'],
+    desc:"Rise Big — composable AnimXYZ entrance (xyz attribute).", kind:'css-anim', status:'ready', upstream:'animxyz',
+    preview:'recipes/animxyz/xyz-rise-big/preview.html' },
+  { id:'ref-ua-activity', name:'Activity', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Activity — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/activity/activity.json', status:'ready' },
+  { id:'ref-ua-airplay', name:'Airplay', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Airplay — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/airplay/airplay.json', status:'ready' },
+  { id:'ref-ua-alertcircle', name:'Alert Circle', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Alert Circle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/alertCircle/alertCircle.json', status:'ready' },
+  { id:'ref-ua-alertoctagon', name:'Alert Octagon', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Alert Octagon — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/alertOctagon/alertOctagon.json', status:'ready' },
+  { id:'ref-ua-alerttriangle', name:'Alert Triangle', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Alert Triangle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/alertTriangle/alertTriangle.json', status:'ready' },
+  { id:'ref-ua-archive', name:'Archive', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Archive — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/archive/archive.json', status:'ready' },
+  { id:'ref-ua-arrowdown', name:'Arrow Down', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Arrow Down — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/arrowDown/arrowDown.json', status:'ready' },
+  { id:'ref-ua-arrowdowncircle', name:'Arrow Down Circle', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Arrow Down Circle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/arrowDownCircle/arrowDownCircle.json', status:'ready' },
+  { id:'ref-ua-arrowleftcircle', name:'Arrow Left Circle', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Arrow Left Circle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/arrowLeftCircle/arrowLeftCircle.json', status:'ready' },
+  { id:'ref-ua-arrowrightcircle', name:'Arrow Right Circle', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Arrow Right Circle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/arrowRightCircle/arrowRightCircle.json', status:'ready' },
+  { id:'ref-ua-arrowup', name:'Arrow Up', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Arrow Up — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/arrowUp/arrowUp.json', status:'ready' },
+  { id:'ref-ua-arrowupcircle', name:'Arrow Up Circle', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Arrow Up Circle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/arrowUpCircle/arrowUpCircle.json', status:'ready' },
+  { id:'ref-ua-behance', name:'Behance', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Behance — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/behance/behance.json', status:'ready' },
+  { id:'ref-ua-bookmark', name:'Bookmark', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Bookmark — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/bookmark/bookmark.json', status:'ready' },
+  { id:'ref-ua-calendar', name:'Calendar', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Calendar — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/calendar/calendar.json', status:'ready' },
+  { id:'ref-ua-checkbox', name:'Check Box', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Check Box — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/checkBox/checkBox.json', status:'ready' },
+  { id:'ref-ua-checkmark', name:'Checkmark', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Checkmark — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/checkmark/checkmark.json', status:'ready' },
+  { id:'ref-ua-codepen', name:'Codepen', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Codepen — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/codepen/codepen.json', status:'ready' },
+  { id:'ref-ua-copy', name:'Copy', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Copy — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/copy/copy.json', status:'ready' },
+  { id:'ref-ua-download', name:'Download', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Download — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/download/download.json', status:'ready' },
+  { id:'ref-ua-dribbble', name:'Dribbble', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Dribbble — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/dribbble/dribbble.json', status:'ready' },
+  { id:'ref-ua-edit', name:'Edit', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Edit — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/edit/edit.json', status:'ready' },
+  { id:'ref-ua-error', name:'Error', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Error — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/error/error.json', status:'ready' },
+  { id:'ref-ua-explore', name:'Explore', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Explore — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/explore/explore.json', status:'ready' },
+  { id:'ref-ua-facebook', name:'Facebook', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Facebook — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/facebook/facebook.json', status:'ready' },
+  { id:'ref-ua-folder', name:'Folder', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Folder — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/folder/folder.json', status:'ready' },
+  { id:'ref-ua-github', name:'Github', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Github — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/github/github.json', status:'ready' },
+  { id:'ref-ua-heart', name:'Heart', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Heart — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/heart/heart.json', status:'ready' },
+  { id:'ref-ua-help', name:'Help', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Help — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/help/help.json', status:'ready' },
+  { id:'ref-ua-home', name:'Home', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Home — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/home/home.json', status:'ready' },
+  { id:'ref-ua-infinity', name:'Infinity', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Infinity — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/infinity/infinity.json', status:'ready' },
+  { id:'ref-ua-info', name:'Info', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Info — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/info/info.json', status:'ready' },
+  { id:'ref-ua-instagram', name:'Instagram', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Instagram — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/instagram/instagram.json', status:'ready' },
+  { id:'ref-ua-linkedin', name:'Linkedin', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Linkedin — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/linkedin/linkedin.json', status:'ready' },
+  { id:'ref-ua-loading', name:'Loading', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Loading — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/loading/loading.json', status:'ready' },
+  { id:'ref-ua-loading2', name:'Loading2', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Loading2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/loading2/loading2.json', status:'ready' },
+  { id:'ref-ua-loading3', name:'Loading3', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Loading3 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/loading3/loading3.json', status:'ready' },
+  { id:'ref-ua-lock', name:'Lock', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Lock — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/lock/lock.json', status:'ready' },
+  { id:'ref-ua-mail', name:'Mail', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Mail — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/mail/mail.json', status:'ready' },
+  { id:'ref-ua-maximizeminimize', name:'Maximize Minimize', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Maximize Minimize — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/maximizeMinimize/maximizeMinimize.json', status:'ready' },
+  { id:'ref-ua-maximizeminimize2', name:'Maximize Minimize2', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Maximize Minimize2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/maximizeMinimize2/maximizeMinimize2.json', status:'ready' },
+  { id:'ref-ua-menu', name:'Menu', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Menu — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/menu/menu.json', status:'ready' },
+  { id:'ref-ua-menu2', name:'Menu2', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Menu2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/menu2/menu2.json', status:'ready' },
+  { id:'ref-ua-menu3', name:'Menu3', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Menu3 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/menu3/menu3.json', status:'ready' },
+  { id:'ref-ua-menu4', name:'Menu4', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Menu4 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/menu4/menu4.json', status:'ready' },
+  { id:'ref-ua-microphone', name:'Microphone', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Microphone — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/microphone/microphone.json', status:'ready' },
+  { id:'ref-ua-microphone2', name:'Microphone2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Microphone2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/microphone2/microphone2.json', status:'ready' },
+  { id:'ref-ua-notification', name:'Notification', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Notification — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/notification/notification.json', status:'ready' },
+  { id:'ref-ua-notification2', name:'Notification2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Notification2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/notification2/notification2.json', status:'ready' },
+  { id:'ref-ua-playpause', name:'Play Pause', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Play Pause — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/playPause/playPause.json', status:'ready' },
+  { id:'ref-ua-playpausecircle', name:'Play Pause Circle', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Play Pause Circle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/playPauseCircle/playPauseCircle.json', status:'ready' },
+  { id:'ref-ua-plustox', name:'Plus To X', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Plus To X — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/plusToX/plusToX.json', status:'ready' },
+  { id:'ref-ua-pocket', name:'Pocket', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Pocket — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/pocket/pocket.json', status:'ready' },
+  { id:'ref-ua-radiobutton', name:'Radio Button', cat:'loading', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Radio Button — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/radioButton/radioButton.json', status:'ready' },
+  { id:'ref-ua-scrolldown', name:'Scroll Down', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Scroll Down — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/scrollDown/scrollDown.json', status:'ready' },
+  { id:'ref-ua-searchtox', name:'Search To X', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Search To X — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/searchToX/searchToX.json', status:'ready' },
+  { id:'ref-ua-settings', name:'Settings', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Settings — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/settings/settings.json', status:'ready' },
+  { id:'ref-ua-settings2', name:'Settings2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Settings2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/settings2/settings2.json', status:'ready' },
+  { id:'ref-ua-share', name:'Share', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Share — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/share/share.json', status:'ready' },
+  { id:'ref-ua-skipback', name:'Skip Back', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Skip Back — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/skipBack/skipBack.json', status:'ready' },
+  { id:'ref-ua-skipforward', name:'Skip Forward', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Skip Forward — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/skipForward/skipForward.json', status:'ready' },
+  { id:'ref-ua-star', name:'Star', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Star — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/star/star.json', status:'ready' },
+  { id:'ref-ua-thumbup', name:'Thumb Up', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Thumb Up — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/thumbUp/thumbUp.json', status:'ready' },
+  { id:'ref-ua-toggle', name:'Toggle', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Toggle — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/toggle/toggle.json', status:'ready' },
+  { id:'ref-ua-trash', name:'Trash', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Trash — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/trash/trash.json', status:'ready' },
+  { id:'ref-ua-trash2', name:'Trash2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Trash2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/trash2/trash2.json', status:'ready' },
+  { id:'ref-ua-twitter', name:'Twitter', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Twitter — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/twitter/twitter.json', status:'ready' },
+  { id:'ref-ua-userminus', name:'User Minus', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"User Minus — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/userMinus/userMinus.json', status:'ready' },
+  { id:'ref-ua-userplus', name:'User Plus', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"User Plus — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/userPlus/userPlus.json', status:'ready' },
+  { id:'ref-ua-userx', name:'User X', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"User X — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/userX/userX.json', status:'ready' },
+  { id:'ref-ua-video', name:'Video', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Video — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/video/video.json', status:'ready' },
+  { id:'ref-ua-video2', name:'Video2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Video2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/video2/video2.json', status:'ready' },
+  { id:'ref-ua-visibility', name:'Visibility', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Visibility — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/visibility/visibility.json', status:'ready' },
+  { id:'ref-ua-visibility2', name:'Visibility2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Visibility2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/visibility2/visibility2.json', status:'ready' },
+  { id:'ref-ua-volume', name:'Volume', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Volume — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/volume/volume.json', status:'ready' },
+  { id:'ref-ua-youtube', name:'Youtube', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Youtube — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/youtube/youtube.json', status:'ready' },
+  { id:'ref-ua-youtube2', name:'Youtube2', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Youtube2 — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/youtube2/youtube2.json', status:'ready' },
+  { id:'ref-ua-zoomin', name:'Zoom In', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Zoom In — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/zoomIn/zoomIn.json', status:'ready' },
+  { id:'ref-ua-zoomout', name:'Zoom Out', cat:'feedback-delight', surfaces:['web','app','interaction'], canvas:['web','app'], target:['icon'], runtime:['lottie'], export:['lottie'],
+    desc:"Zoom Out — animated icon (useAnimations).", kind:'lottie-ref', ref:true, source:'useAnimations', license:'CC-BY · 禁止再分发源文件', licenseStatus:'needs-attribution',
+    upstream:'https://react.useanimations.com/', jsonUrl:'https://raw.githubusercontent.com/useAnimations/react-useanimations/master/src/lib/zoomOut/zoomOut.json', status:'ready' },
+  { id:'ref-magnetic-cursor', name:'Magnetic Cursor Pull', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:['button','icon'], runtime:['js','gsap'], export:['skill','html'],
+    desc:"Elements lean toward the cursor with easing — the signature agency-site micro-interaction.", tags:['magnetic','cursor','hover','gsap','agency'], kind:'magnet', ref:true, source:'GSAP', license:'GSAP standard (free)', upstream:'https://gsap.com/community/forums/topic/magnetic-buttons/', status:'ready' },
+  { id:'tilt-3d', name:'3D Tilt', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:['card','image'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A card tilts in 3D toward the pointer with a soft glare — tactile depth. Dependency-free.", tags:['tilt','3d','parallax','pointer','glare','depth'], kind:'lift', status:'ready',
+    preview:'recipes/web/tilt-3d/preview.html', upstream:'https://micku7zu.github.io/vanilla-tilt.js/' },
+  { id:'ripple-press', name:'Ripple Press', cat:'feedback-delight', surfaces:['web','interaction','app'], canvas:['web','app'], target:['button'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A ripple blooms from the exact tap/click point — clear, honest press feedback. Dependency-free.", tags:['ripple','material','press','tap','feedback'], kind:'pulse', status:'ready',
+    preview:'recipes/web/ripple-press/preview.html', upstream:'https://m3.material.io/foundations/interaction/states/state-layers' },
+  { id:'ref-elastic-button', name:'Elastic Squash Button', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:['button'], runtime:['motion-one','js'], export:['skill','html'],
+    desc:"Button squashes & stretches on press with a spring — playful but crisp.", tags:['spring','squash','elastic','press','motion'], kind:'toggle', ref:true, source:'Motion (motion.dev)', license:'MIT', upstream:'https://motion.dev/docs/animate', status:'ready' },
+  { id:'spotlight-card', name:'Spotlight Card', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:['card','section'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A soft radial spotlight follows the cursor across a card, lifting its border. Dependency-free.", tags:['spotlight','glow','hover','cursor','card','premium'], kind:'ui', status:'ready',
+    preview:'recipes/web/spotlight-card/preview.html', upstream:'https://ui.aceternity.com/components/card-spotlight' },
+  { id:'shine-border', name:'Shine Border', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['card','button','section'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:"A soft light travels continuously around an element's border — quiet, premium. Pure CSS.", tags:['border','shine','gradient','ambient','premium'], kind:'css-anim', status:'ready',
+    preview:'recipes/web/shine-border/preview.html', upstream:'https://magicui.design/docs/components/shine-border' },
+  { id:'shimmer-button', name:'Shimmer Button', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:['button'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:"A soft band of light sweeps across a CTA (slower at rest, faster on hover). Pure CSS, dependency-free.", tags:['shimmer','cta','button','sheen','premium'], kind:'css-anim', status:'ready',
+    preview:'recipes/web/shimmer-button/preview.html', upstream:'https://magicui.design/docs/components/shimmer-button' },
+  { id:'border-beam', name:'Border Beam', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:['card','button','section'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:"A small bright comet of light travels the border — a lively accent. Pure CSS, dependency-free.", tags:['beam','border','comet','orbit','ambient'], kind:'css-anim', status:'ready',
+    preview:'recipes/web/border-beam/preview.html', upstream:'https://magicui.design/docs/components/border-beam' },
+  { id:'like-burst',       name:'Like Burst',       cat:'feedback-delight', surfaces:['web','interaction'],
+    target:['button','icon'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'Celebratory particle burst on tap — for likes & reactions.',  kind:'like',    status:'ready',
+    preview:'recipes/web/like-burst/preview.html' },
+  { id:'fade-in-up',       name:'Fade In Up',       cat:'entrance',         surfaces:['web'],
+    target:['text','section'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'A clean rise + fade for elements appearing on the page.',      kind:'reveal',  status:'ready',
+    preview:'recipes/web/fade-in-up/preview.html' },
+  { id:'scroll-reveal',    name:'Scroll Reveal',    cat:'scroll-reveal',    surfaces:['web'],
+    target:['section','image'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'Content rises into view as you scroll. Elegant, restrained.', kind:'reveal',  status:'ready',
+    preview:'recipes/web/scroll-reveal/preview.html' },
+  { id:'card-lift-hover',  name:'Card Lift',        cat:'hover-press',      surfaces:['web','interaction'],
+    target:['card'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:'A card that lifts toward you on hover. Crisp and tactile.',    kind:'lift',    status:'ready',
+    preview:'recipes/web/card-lift-hover/preview.html' },
+  { id:'magnetic-button',  name:'Magnetic Button',  cat:'hover-press',      surfaces:['web','interaction'],
+    target:['button'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'A button that leans toward the cursor. Alive, not noisy.',    kind:'magnet',  status:'ready',
+    preview:'recipes/web/magnetic-button/preview.html' },
+  { id:'count-up',         name:'Count Up',         cat:'emphasis',         surfaces:['web'],
+    target:['number'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'Numbers that animate up — for stats & metrics.',              kind:'count',   status:'ready',
+    preview:'recipes/web/count-up/preview.html' },
+  { id:'loading-shimmer',  name:'Loading Shimmer',  cat:'loading',          surfaces:['web','interaction'],
+    target:['section','image','card'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:'Skeleton placeholders with a soft sweeping shimmer.',         kind:'shimmer', status:'ready',
+    preview:'recipes/web/loading-shimmer/preview.html' },
+  { id:'attention-pulse',  name:'Attention Pulse',  cat:'attention',        surfaces:['web','interaction'],
+    target:['button','icon'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:'A soft expanding ring that draws the eye to one element.',     kind:'pulse',   status:'ready',
+    preview:'recipes/web/attention-pulse/preview.html' },
+  { id:'stagger-list',     name:'Stagger List',     cat:'entrance',         surfaces:['web'],
+    target:['list'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'List items rise + fade in one after another.',                 kind:'stagger', status:'ready',
+    preview:'recipes/web/stagger-list/preview.html' },
+  { id:'toggle-spring',    name:'Toggle Spring',    cat:'feedback-delight', surfaces:['web','interaction'],
+    target:['button'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:'A switch whose knob springs across on toggle.',                kind:'toggle',  status:'ready',
+    preview:'recipes/web/toggle-spring/preview.html' },
+  { id:'fx-particle-burst', name:'Particle Burst', cat:'feedback-delight', surfaces:['video'], target:['section'], runtime:['js'], export:['skill','html'],
+    desc:"A bright particle burst from the center — a celebratory accent.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-particle-burst/preview.html' },
+  { id:'fx-confetti', name:'Confetti Cannon', cat:'feedback-delight', surfaces:['video'], target:['section'], runtime:['js'], export:['skill','html'],
+    desc:"Confetti fires across the frame — for wins and reveals.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-confetti/preview.html' },
+  { id:'fx-firework', name:'Firework', cat:'feedback-delight', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Fireworks launch and burst — a festive hero moment.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-firework/preview.html' },
+  { id:'fx-starfield', name:'Starfield', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"A slow drifting starfield — a calm cosmic backdrop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-starfield/preview.html' },
+  { id:'fx-matrix-rain', name:'Matrix Rain', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Falling code glyphs — a techy backdrop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-matrix-rain/preview.html' },
+  { id:'fx-knowledge-graph', name:'Knowledge Graph', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Linked nodes drifting — a data / AI backdrop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-knowledge-graph/preview.html' },
+  { id:'fx-neural-net', name:'Neural Net', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"A pulsing neural network — an AI backdrop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-neural-net/preview.html' },
+  { id:'fx-constellation', name:'Constellation', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Connected points like a constellation — quiet motion.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-constellation/preview.html' },
+  { id:'fx-orbit-ring', name:'Orbit Ring', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Particles orbiting rings — an elegant loop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-orbit-ring/preview.html' },
+  { id:'fx-galaxy-swirl', name:'Galaxy Swirl', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"A swirling galaxy of particles.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-galaxy-swirl/preview.html' },
+  { id:'fx-word-cascade', name:'Word Cascade', cat:'text-kinetic', surfaces:['video'], target:['text'], runtime:['js'], export:['skill','html'],
+    desc:"Words cascade into place — a kinetic title.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-word-cascade/preview.html' },
+  { id:'fx-letter-explode', name:'Letter Explode', cat:'text-kinetic', surfaces:['video'], target:['text'], runtime:['js'], export:['skill','html'],
+    desc:"Letters fly in from everywhere and settle into the word.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-letter-explode/preview.html' },
+  { id:'fx-chain-react', name:'Chain Reaction', cat:'feedback-delight', surfaces:['video'], target:['section'], runtime:['js'], export:['skill','html'],
+    desc:"A chain reaction of bursts ripples across the frame.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-chain-react/preview.html' },
+  { id:'fx-magnetic-field', name:'Magnetic Field', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Field lines bending around poles — a hypnotic backdrop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-magnetic-field/preview.html' },
+  { id:'fx-data-stream', name:'Data Stream', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Streaming data lines — a flowing techy backdrop.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-data-stream/preview.html' },
+  { id:'fx-gradient-blob', name:'Gradient Blob', cat:'ambient', surfaces:['video'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"Soft drifting gradient blobs — a warm ambient glow.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-gradient-blob/preview.html' },
+  { id:'fx-sparkle-trail', name:'Sparkle Trail', cat:'feedback-delight', surfaces:['video'], target:['section'], runtime:['js'], export:['skill','html'],
+    desc:"A trail of sparkles — a light, delightful accent.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-sparkle-trail/preview.html' },
+  { id:'fx-shockwave', name:'Shockwave', cat:'feedback-delight', surfaces:['video'], target:['section'], runtime:['js'], export:['skill','html'],
+    desc:"An expanding shockwave ripple — an impactful beat.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-shockwave/preview.html' },
+  { id:'fx-counter-explosion', name:'Counter Explosion', cat:'emphasis', surfaces:['video'], target:['number'], runtime:['js'], export:['skill','html'],
+    desc:"A number counts up then bursts — for a big stat.", kind:'fx', status:'ready', upstream:'open-design',
+    preview:'recipes/slides/fx-counter-explosion/preview.html' },
+  { id:'button-press', name:'Button Press', cat:'feedback-delight', surfaces:['app','interaction'], target:['button'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A button that springs down on press and pops back — tactile tap feedback.", kind:'ui', status:'ready',
+    preview:'recipes/app/button-press/preview.html' },
+  { id:'ripple', name:'Ripple', cat:'feedback-delight', surfaces:['app','interaction'], target:['button'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A Material-style ripple spreads from the point of contact.", kind:'ui', status:'ready',
+    preview:'recipes/app/ripple/preview.html' },
+  { id:'tab-bar-slide', name:'Tab Bar Slide', cat:'page-transition', surfaces:['app','interaction'], target:['button'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A bottom tab bar whose active pill slides between tabs.", kind:'ui', status:'ready',
+    preview:'recipes/app/tab-bar-slide/preview.html' },
+  { id:'toast-pop', name:'Toast Pop', cat:'feedback-delight', surfaces:['app','interaction'], target:['section'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A toast slides up from the bottom, holds, then fades away.", kind:'ui', status:'ready',
+    preview:'recipes/app/toast-pop/preview.html' },
+  { id:'bottom-sheet', name:'Bottom Sheet', cat:'page-transition', surfaces:['app','interaction'], target:['section'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A bottom sheet slides up over a dimmed backdrop, then dismisses.", kind:'ui', status:'ready',
+    preview:'recipes/app/bottom-sheet/preview.html' },
+  { id:'checkbox-pop', name:'Checkbox Pop', cat:'feedback-delight', surfaces:['app','interaction'], target:['icon'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"A checkbox that pops and draws its check on toggle.", kind:'ui', status:'ready',
+    preview:'recipes/app/checkbox-pop/preview.html' },
+  { id:'ref-animated-toggle', name:'Springy Theme Toggle', cat:'feedback-delight', surfaces:['web','interaction','app'], canvas:['web','app'], target:['button'], runtime:['js','motion-one'], export:['skill','html'],
+    desc:"Dark/light toggle whose knob springs across with a morph.", tags:['toggle','theme','spring','morph'], kind:'toggle', ref:true, source:'Emil Kowalski', license:'Reference', upstream:'https://animations.dev/', status:'ready' },
+  { id:'ref-drag-reorder', name:'Drag-to-Reorder List', cat:'feedback-delight', surfaces:['web','interaction','app'], canvas:['web','app'], target:['list'], runtime:['framer-motion','js'], export:['skill','html'],
+    desc:"List items reflow with spring physics as you drag one to a new spot.", tags:['drag','reorder','list','spring','framer'], kind:'stagger', ref:true, source:'Motion (Framer Motion)', license:'MIT', upstream:'https://motion.dev/docs/react-reorder', status:'ready' },
+  { id:'ref-auto-animate', name:'Auto-Animate Layout', cat:'feedback-delight', surfaces:['web','interaction','app'], canvas:['web','app'], target:['list','section'], runtime:['js'], export:['skill','html'],
+    desc:"Add/remove/move any element and it transitions automatically — one line.", tags:['layout','auto','formkit','list','add-remove'], kind:'stagger', ref:true, source:'AutoAnimate (FormKit)', license:'MIT', upstream:'https://auto-animate.formkit.com/', status:'ready' },
+  { id:'ref-rough-notation', name:'Hand-Drawn Annotation', cat:'attention', surfaces:['web','interaction'], canvas:['web'], target:['text'], runtime:['js'], export:['skill','html'],
+    desc:"Underline, circle or highlight text with an animated hand-drawn stroke.", tags:['annotation','underline','highlight','sketch','attention'], kind:'kinetic', ref:true, source:'Rough Notation', license:'MIT', upstream:'https://roughnotation.com/', status:'ready' },
+  { id:'ref-number-flow', name:'Animated Number Flow', cat:'emphasis', surfaces:['web','interaction','app'], canvas:['web','app'], target:['number'], runtime:['js'], export:['skill','html'],
+    desc:"Digits roll & slide as a value changes — for live stats and prices.", tags:['number','counter','roll','stats','numberflow'], kind:'count', ref:true, source:'NumberFlow', license:'MIT', upstream:'https://number-flow.barvian.me/', status:'ready' },
+  { id:'ref-lenis-smooth', name:'Smooth Scroll (Lenis)', cat:'ambient', surfaces:['web'], canvas:['web'], target:['section','background'], runtime:['js'], export:['skill','html'],
+    desc:"Buttery inertial scrolling — the base layer under most award-site motion.", tags:['smooth','scroll','inertia','lenis','darkroom'], kind:'reveal', ref:true, source:'Lenis', license:'MIT', upstream:'https://lenis.darkroom.engineering/', status:'ready' },
+  { id:'ref-scrolltrigger-pin', name:'Pinned Scroll Scene', cat:'scroll-reveal', surfaces:['web'], canvas:['web'], target:['section'], runtime:['gsap','js'], export:['skill','html'],
+    desc:"Pin a section and choreograph elements to scroll progress — scrollytelling.", tags:['scrolltrigger','pin','gsap','scrollytelling'], kind:'reveal', ref:true, source:'GSAP ScrollTrigger', license:'GSAP standard (free)', upstream:'https://gsap.com/docs/v3/Plugins/ScrollTrigger/', status:'ready' },
+  { id:'ref-css-scroll-anim', name:'CSS Scroll-Driven Reveal', cat:'scroll-reveal', surfaces:['web'], canvas:['web'], target:['section','image'], runtime:['css'], export:['skill','html'],
+    desc:"Native scroll-timeline reveals — no JS, GPU-cheap, progressively enhanced.", tags:['scroll-timeline','native','css','animation-timeline'], kind:'reveal', ref:true, source:'scroll-driven-animations.style', license:'CC / open', upstream:'https://scroll-driven-animations.style/', status:'ready' },
+  { id:'ref-aos', name:'Animate On Scroll (AOS)', cat:'scroll-reveal', surfaces:['web'], canvas:['web'], target:['section','card','image'], runtime:['js','css'], export:['skill','html'],
+    desc:"Drop-in data-attribute reveals as elements enter the viewport.", tags:['aos','scroll','reveal','data-attr'], kind:'stagger', ref:true, source:'AOS', license:'MIT', upstream:'https://michalsnik.github.io/aos/', status:'ready' },
+  { id:'ref-rellax-parallax', name:'Layered Parallax', cat:'ambient', surfaces:['web'], canvas:['web'], target:['background','image','section'], runtime:['js'], export:['skill','html'],
+    desc:"Foreground and background drift at different speeds — depth on scroll.", tags:['parallax','depth','scroll','rellax'], kind:'reveal', ref:true, source:'Rellax', license:'MIT', upstream:'https://dixonandmoe.com/rellax/', status:'ready' },
+  { id:'ref-horizontal-scroll', name:'Horizontal Scroll Gallery', cat:'scroll-reveal', surfaces:['web'], canvas:['web'], target:['section','list'], runtime:['gsap','js'], export:['skill','html'],
+    desc:"Vertical scroll drives a horizontal reel of panels — portfolio staple.", tags:['horizontal','gallery','scroll','gsap'], kind:'reveal', ref:true, source:'GSAP', license:'GSAP standard (free)', upstream:'https://gsap.com/docs/v3/Plugins/ScrollTrigger/', status:'ready' },
+  { id:'ref-locomotive', name:'Locomotive Scroll FX', cat:'ambient', surfaces:['web'], canvas:['web'], target:['section','background'], runtime:['js'], export:['skill','html'],
+    desc:"Smooth scroll + parallax + in-view classes — the Codrops-era toolkit.", tags:['locomotive','smooth','parallax','in-view'], kind:'reveal', ref:true, source:'Locomotive Scroll', license:'MIT', upstream:'https://scroll.locomotive.ca/', status:'ready' },
+  { id:'ref-view-transitions', name:'View Transitions API', cat:'page-transition', surfaces:['web','app'], canvas:['web','app'], target:['transition','section'], runtime:['js','css'], export:['skill','html'],
+    desc:"Native cross-document / SPA morph transitions between states — shared-element magic.", tags:['view-transition','spa','morph','native'], kind:'cross', ref:true, source:'web.dev', license:'open', upstream:'https://developer.chrome.com/docs/web-platform/view-transitions/', status:'ready' },
+  { id:'ref-barba', name:'Barba.js Page Transitions', cat:'page-transition', surfaces:['web'], canvas:['web'], target:['transition'], runtime:['js'], export:['skill','html'],
+    desc:"Seamless SPA-style transitions between pages with lifecycle hooks.", tags:['barba','page','transition','spa'], kind:'cross', ref:true, source:'Barba.js', license:'MIT', upstream:'https://barba.js.org/', status:'ready' },
+  { id:'ref-flip-shared', name:'FLIP Shared-Element Move', cat:'page-transition', surfaces:['web','app'], canvas:['web','app'], target:['card','transition'], runtime:['gsap','js'], export:['skill','html'],
+    desc:"An element flies from list to detail, keeping identity — FLIP technique.", tags:['flip','shared-element','gsap','layout'], kind:'cross', ref:true, source:'GSAP Flip', license:'GSAP standard (free)', upstream:'https://gsap.com/docs/v3/Plugins/Flip/', status:'ready' },
+  { id:'ref-vaul-drawer', name:'Springy Bottom Sheet', cat:'page-transition', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','transition'], runtime:['framer-motion','js'], export:['skill','html'],
+    desc:"A drawer/bottom-sheet that drags and settles with real spring physics.", tags:['drawer','sheet','drag','spring','vaul'], kind:'cross', ref:true, source:'Vaul (Emil Kowalski)', license:'MIT', upstream:'https://vaul.emilkowal.ski/', status:'ready' },
+  { id:'ref-split-text', name:'Split-Text Reveal', cat:'text-kinetic', surfaces:['web'], canvas:['web'], target:['text'], runtime:['gsap','js'], export:['skill','html'],
+    desc:"Split a headline into chars/words/lines and stagger them in — the hero move.", tags:['splittext','stagger','headline','gsap','kinetic'], kind:'kinetic', ref:true, source:'GSAP SplitText', license:'GSAP standard (free)', upstream:'https://gsap.com/docs/v3/Plugins/SplitText/', status:'ready' },
+  { id:'ref-splitting', name:'Splitting.js Char FX', cat:'text-kinetic', surfaces:['web'], canvas:['web'], target:['text'], runtime:['js','css'], export:['skill','html'],
+    desc:"Split text into indexed spans for per-char CSS choreography.", tags:['splitting','chars','css-vars','kinetic'], kind:'kinetic', ref:true, source:'Splitting.js', license:'MIT', upstream:'https://splitting.js.org/', status:'ready' },
+  { id:'text-scramble', name:'Text Scramble', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:['text'], runtime:['css','js'], export:['skill','motion-json','html'],
+    desc:"Glyphs shuffle then resolve into the final word — a techy decode reveal. Dependency-free.", tags:['scramble','decode','glitch','matrix','kinetic'], kind:'kinetic', status:'ready',
+    preview:'recipes/web/text-scramble/preview.html', upstream:'https://tympanus.net/Development/TextScrambleEffect/' },
+  { id:'ref-typed', name:'Typewriter (Typed.js)', cat:'text-kinetic', surfaces:['web'], canvas:['web'], target:['text'], runtime:['js'], export:['skill','html'],
+    desc:"Types and deletes phrases with a blinking caret — hero taglines.", tags:['typewriter','typed','caret','tagline'], kind:'kinetic', ref:true, source:'Typed.js', license:'MIT', upstream:'https://github.com/mattboldt/typed.js/', status:'ready' },
+  { id:'ref-variable-font', name:'Variable-Font Weight Wave', cat:'text-kinetic', surfaces:['web'], canvas:['web'], target:['text'], runtime:['css','js'], export:['skill','html'],
+    desc:"A weight/width wave travels across a headline via font-variation-settings.", tags:['variable-font','weight','wave','type'], kind:'kinetic', ref:true, source:'web.dev', license:'open', upstream:'https://web.dev/articles/variable-fonts', status:'ready' },
+  { id:'gradient-text', name:'Animated Gradient Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:['text'], runtime:['css'], export:['skill','motion-json','html'],
+    desc:"A slow on-brand gradient drifts through a headline — quiet premium emphasis. Pure CSS.", tags:['gradient','text','headline','ambient','premium'], kind:'kinetic', status:'ready',
+    preview:'recipes/web/gradient-text/preview.html', upstream:'https://magicui.design/docs/components/animated-gradient-text' },
+  { id:'ref-shader-transition', name:'Shader Scene Transition', cat:'video-transition', surfaces:['web','video'], canvas:['web','video'], target:['transition'], runtime:['three','js'], export:['skill','html'],
+    desc:"GL displacement wipes between scenes/images — GLSL transition pack.", tags:['gl-transitions','shader','wipe','displacement','video'], kind:'cross', ref:true, source:'gl-transitions', license:'MIT', upstream:'https://gl-transitions.com/', status:'ready' },
+  { id:'ref-motion-dev', name:'Motion (motion.dev) Library', cat:'entrance', surfaces:['web','app','interaction'], canvas:['web','app'], target:['section','button','card'], runtime:['motion-one','js'], export:['skill','html'],
+    desc:"The modern hybrid engine (ex-Framer Motion): springs, layout, scroll, gestures.", tags:['motion','framer-motion','spring','layout','gesture'], kind:'ui', ref:true, source:'Motion', license:'MIT', upstream:'https://motion.dev/', status:'ready' },
+  { id:'ref-animejs', name:'Anime.js Timeline', cat:'entrance', surfaces:['web','app'], canvas:['web','app'], target:['section','icon','text'], runtime:['js'], export:['skill','html'],
+    desc:"Lightweight timeline engine for SVG/DOM/JS-object animation with staggering.", tags:['anime','timeline','svg','stagger'], kind:'css-anim', ref:true, source:'Anime.js', license:'MIT', upstream:'https://animejs.com/', status:'ready' },
+  { id:'ref-animations-dev', name:'animations.dev Craft Course', cat:'hover-press', surfaces:['web','app','interaction'], canvas:['web','app'], target:['button','card','transition'], runtime:['framer-motion','css'], export:['skill'],
+    desc:"Emil Kowalski's playbook for interface motion that feels right (easing, timing, intent).", tags:['craft','easing','timing','emil','course'], kind:'ui', ref:true, source:'animations.dev', license:'Reference', upstream:'https://animations.dev/', status:'ready' },
+  { id:'ref-joshw-animation', name:'Josh Comeau · CSS Animation', cat:'entrance', surfaces:['web'], canvas:['web'], target:['section','button'], runtime:['css'], export:['skill'],
+    desc:"Deep, tasteful guide to CSS transitions/keyframes with spring-like feel.", tags:['css','transition','keyframes','guide','comeau'], kind:'css-anim', ref:true, source:'joshwcomeau.com', license:'Reference', upstream:'https://www.joshwcomeau.com/animation/css-transitions/', status:'ready' },
+  { id:'ref-lottiefiles', name:'LottieFiles Marketplace', cat:'feedback-delight', surfaces:['web','app','video'], canvas:['web','app'], target:['icon','section'], runtime:['lottie'], export:['lottie','html'],
+    desc:"Huge library of ready JSON animations — drop-in for icons, empty states, loaders.", tags:['lottie','marketplace','icon','loader','json'], kind:'lottie-ref', ref:true, source:'LottieFiles', license:'Per-asset (check each)', upstream:'https://lottiefiles.com/', status:'ready' },
+  { id:'ref-rive', name:'Rive Interactive Runtime', cat:'feedback-delight', surfaces:['web','app'], canvas:['web','app'], target:['icon','section'], runtime:['rive'], export:['html'],
+    desc:"State-machine-driven vector animation that responds to input in real time.", tags:['rive','state-machine','interactive','vector'], kind:'lottie-ref', ref:true, source:'Rive', license:'Rive terms', upstream:'https://rive.app/', status:'ready' },
+  { id:'ref-confetti-tsparticles', name:'Confetti / Emoji Burst', cat:'feedback-delight', surfaces:['web','interaction','app'], canvas:['web','app'], target:['button','section'], runtime:['js'], export:['skill','html'],
+    desc:"A tasteful confetti or emoji burst for a genuine win — one per moment.", tags:['confetti','celebrate','burst','tsparticles'], kind:'fx', ref:true, source:'tsParticles', license:'MIT', upstream:'https://particles.js.org/', status:'ready' },
+  { id:'ref-shader-gradient', name:'Shader Gradient Backdrop', cat:'ambient', surfaces:['web','video'], canvas:['web'], target:['background'], runtime:['three','js'], export:['skill','html'],
+    desc:"A living, GPU-rendered gradient mesh — the Stripe/Linear-era hero backdrop.", tags:['shader','gradient','webgl','background','three'], kind:'fx', ref:true, source:'ShaderGradient', license:'MIT', upstream:'https://www.shadergradient.co/', status:'ready' },
+  { id:'ref-webgl-distortion', name:'WebGL Image Distortion', cat:'ambient', surfaces:['web'], canvas:['web'], target:['image','background'], runtime:['three','js'], export:['skill','html'],
+    desc:"Hover/scroll ripples and displaces imagery via a fragment shader.", tags:['webgl','distortion','displacement','shader','codrops'], kind:'fx', ref:true, source:'Codrops', license:'Codrops (attribution)', upstream:'https://tympanus.net/codrops/', status:'ready' },
+  { id:'ref-particles-bg', name:'Interactive Particle Field', cat:'ambient', surfaces:['web','video'], canvas:['web'], target:['background'], runtime:['js'], export:['skill','html'],
+    desc:"A responsive constellation of particles reacting to the pointer.", tags:['particles','constellation','pointer','background','tsparticles'], kind:'fx', ref:true, source:'tsParticles', license:'MIT', upstream:'https://particles.js.org/', status:'ready' },
+  { id:'ref-metaballs-blob', name:'Fluid Metaball Blob', cat:'ambient', surfaces:['web'], canvas:['web'], target:['background','icon'], runtime:['three','js'], export:['skill','html'],
+    desc:"Gooey, merging blobs drift behind the content — organic ambient motion.", tags:['metaball','blob','fluid','shader','webgl'], kind:'fx', ref:true, source:'OGL', license:'MIT', upstream:'https://github.com/oframe/ogl', status:'ready' },
+  { id:'ref-three-hero', name:'Three.js 3D Hero Object', cat:'ambient', surfaces:['web'], canvas:['web'], target:['section','background'], runtime:['three','js'], export:['skill','html'],
+    desc:"A lit, floating 3D object that reacts to scroll/pointer — R3F hero.", tags:['three','3d','r3f','hero','webgl'], kind:'fx', ref:true, source:'Three.js', license:'MIT', upstream:'https://threejs.org/', status:'ready' },
+  { id:'ref-spline-3d', name:'Spline Interactive 3D', cat:'ambient', surfaces:['web','app'], canvas:['web','app'], target:['section','background'], runtime:['three','js'], export:['skill','html'],
+    desc:"Drop in a designed, interactive 3D scene — no-code 3D for the web.", tags:['spline','3d','interactive','no-code'], kind:'fx', ref:true, source:'Spline', license:'Spline terms', upstream:'https://spline.design/', status:'ready' },
+  { id:'ref-gaussian-splat', name:'Gaussian Splatting Scene', cat:'ambient', surfaces:['web'], canvas:['web'], target:['background','section'], runtime:['three','js'], export:['html'],
+    desc:"Photoreal captured 3D (radiance-field splats) rendered live in the browser.", tags:['gaussian-splatting','radiance-field','photoreal','3d','webgl'], kind:'fx', ref:true, source:'GaussianSplats3D', license:'MIT', upstream:'https://github.com/mkkellogg/GaussianSplats3D', status:'ready' },
+  { id:'ref-curtains', name:'Curtains.js Plane Warp', cat:'ambient', surfaces:['web'], canvas:['web'], target:['image','section'], runtime:['js','three'], export:['skill','html'],
+    desc:"Turn DOM images into WebGL planes you can warp and shade on scroll/hover.", tags:['curtains','webgl','plane','warp','dom-to-gl'], kind:'fx', ref:true, source:'Curtains.js', license:'MIT', upstream:'https://www.curtainsjs.com/', status:'ready' },
+  { id:'rb-evil-eye', name:'Evil Eye', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Evil Eye — animated component.", tags:['react','backgrounds','evil-eye'], kind:'fx', status:'ready', code:'recipes/imported/evil-eye/' },
+  { id:'rb-ascii-text', name:'ASCII Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"ASCII Text — animated component.", tags:['react','text-animations','ascii-text'], kind:'kinetic', status:'ready', code:'recipes/imported/ascii-text/' },
+  { id:'rb-curved-loop', name:'Curved Loop', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Curved Loop — animated component.", tags:['react','text-animations','curved-loop'], kind:'kinetic', status:'ready', code:'recipes/imported/curved-loop/' },
+  { id:'rb-fuzzy-text', name:'Fuzzy Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Fuzzy Text — animated component.", tags:['react','text-animations','fuzzy-text'], kind:'kinetic', status:'ready', code:'recipes/imported/fuzzy-text/' },
+  { id:'rb-scrambled-text', name:'Scrambled Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Scrambled Text — animated component.", tags:['react','text-animations','scrambled-text'], kind:'kinetic', status:'ready', code:'recipes/imported/scrambled-text/' },
+  { id:'rb-scroll-velocity', name:'Scroll Velocity', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Scroll Velocity — animated component.", tags:['react','text-animations','scroll-velocity'], kind:'kinetic', status:'ready', code:'recipes/imported/scroll-velocity/' },
+  { id:'rb-shuffle', name:'Shuffle', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Shuffle — animated component.", tags:['react','text-animations','shuffle'], kind:'kinetic', status:'ready', code:'recipes/imported/shuffle/' },
+  { id:'rb-split-text', name:'Split Text', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Split Text — animated component.", tags:['react','text-animations','split-text'], kind:'kinetic', status:'ready', code:'recipes/imported/split-text/' },
+  { id:'rb-text-cursor', name:'Text Cursor', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Text Cursor — animated component.", tags:['react','text-animations','text-cursor'], kind:'kinetic', status:'ready', code:'recipes/imported/text-cursor/' },
+  { id:'rb-text-pressure', name:'Text Pressure', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Text Pressure — animated component.", tags:['react','text-animations','text-pressure'], kind:'kinetic', status:'ready', code:'recipes/imported/text-pressure/' },
+  { id:'rb-text-type', name:'Text Type', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Text Type — animated component.", tags:['react','text-animations','text-type'], kind:'kinetic', status:'ready', code:'recipes/imported/text-type/' },
+  { id:'rb-variable-proximity', name:'Variable Proximity', cat:'text-kinetic', surfaces:['web','interaction'], canvas:['web'], target:["text"], runtime:['react'], export:['skill','html'],
+    desc:"Variable Proximity — animated component.", tags:['react','text-animations','variable-proximity'], kind:'kinetic', status:'ready', code:'recipes/imported/variable-proximity/' },
+  { id:'rb-ballpit', name:'Ballpit', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Ballpit — animated component.", tags:['react','backgrounds','ballpit'], kind:'fx', status:'ready', code:'recipes/imported/ballpit/' },
+  { id:'rb-beams', name:'Beams', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Beams — animated component.", tags:['react','backgrounds','beams'], kind:'fx', status:'ready', code:'recipes/imported/beams/' },
+  { id:'rb-color-bends', name:'Color Bends', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Color Bends — animated component.", tags:['react','backgrounds','color-bends'], kind:'fx', status:'ready', code:'recipes/imported/color-bends/' },
+  { id:'rb-floating-lines', name:'Floating Lines', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Floating Lines — animated component.", tags:['react','backgrounds','floating-lines'], kind:'fx', status:'ready', code:'recipes/imported/floating-lines/' },
+  { id:'rb-grid-distortion', name:'Grid Distortion', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Grid Distortion — animated component.", tags:['react','backgrounds','grid-distortion'], kind:'fx', status:'ready', code:'recipes/imported/grid-distortion/' },
+  { id:'rb-grid-motion', name:'Grid Motion', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Grid Motion — animated component.", tags:['react','backgrounds','grid-motion'], kind:'fx', status:'ready', code:'recipes/imported/grid-motion/' },
+  { id:'rb-grid-scan', name:'Grid Scan', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Grid Scan — animated component.", tags:['react','backgrounds','grid-scan'], kind:'fx', status:'ready', code:'recipes/imported/grid-scan/' },
+  { id:'rb-hyperspeed', name:'Hyperspeed', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Hyperspeed — animated component.", tags:['react','backgrounds','hyperspeed'], kind:'fx', status:'ready', code:'recipes/imported/hyperspeed/' },
+  { id:'rb-letter-glitch', name:'Letter Glitch', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Letter Glitch — animated component.", tags:['react','backgrounds','letter-glitch'], kind:'fx', status:'ready', code:'recipes/imported/letter-glitch/' },
+  { id:'rb-light-pillar', name:'Light Pillar', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Light Pillar — animated component.", tags:['react','backgrounds','light-pillar'], kind:'fx', status:'ready', code:'recipes/imported/light-pillar/' },
+  { id:'rb-liquid-ether', name:'Liquid Ether', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Liquid Ether — animated component.", tags:['react','backgrounds','liquid-ether'], kind:'fx', status:'ready', code:'recipes/imported/liquid-ether/' },
+  { id:'rb-shape-grid', name:'Shape Grid', cat:'ambient', surfaces:['web','interaction'], canvas:['web'], target:["background","section"], runtime:['react'], export:['skill','html'],
+    desc:"Shape Grid — animated component.", tags:['react','backgrounds','shape-grid'], kind:'fx', status:'ready', code:'recipes/imported/shape-grid/' },
+  { id:'rb-animated-content', name:'Animated Content', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Animated Content — animated component.", tags:['react','animations','animated-content'], kind:'ui', status:'ready', code:'recipes/imported/animated-content/' },
+  { id:'rb-antigravity', name:'Antigravity', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Antigravity — animated component.", tags:['react','animations','antigravity'], kind:'ui', status:'ready', code:'recipes/imported/antigravity/' },
+  { id:'rb-cubes', name:'Cubes', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Cubes — animated component.", tags:['react','animations','cubes'], kind:'ui', status:'ready', code:'recipes/imported/cubes/' },
+  { id:'rb-ghost-cursor', name:'Ghost Cursor', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Ghost Cursor — animated component.", tags:['react','animations','ghost-cursor'], kind:'ui', status:'ready', code:'recipes/imported/ghost-cursor/' },
+  { id:'rb-laser-flow', name:'Laser Flow', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Laser Flow — animated component.", tags:['react','animations','laser-flow'], kind:'ui', status:'ready', code:'recipes/imported/laser-flow/' },
+  { id:'rb-logo-loop', name:'Logo Loop', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Logo Loop — animated component.", tags:['react','animations','logo-loop'], kind:'ui', status:'ready', code:'recipes/imported/logo-loop/' },
+  { id:'rb-magic-rings', name:'Magic Rings', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Magic Rings — animated component.", tags:['react','animations','magic-rings'], kind:'ui', status:'ready', code:'recipes/imported/magic-rings/' },
+  { id:'rb-magnet', name:'Magnet', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Magnet — animated component.", tags:['react','animations','magnet'], kind:'ui', status:'ready', code:'recipes/imported/magnet/' },
+  { id:'rb-meta-balls', name:'Meta Balls', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Meta Balls — animated component.", tags:['react','animations','meta-balls'], kind:'ui', status:'ready', code:'recipes/imported/meta-balls/' },
+  { id:'rb-metallic-paint', name:'Metallic Paint', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Metallic Paint — animated component.", tags:['react','animations','metallic-paint'], kind:'ui', status:'ready', code:'recipes/imported/metallic-paint/' },
+  { id:'rb-orbit-images', name:'Orbit Images', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Orbit Images — animated component.", tags:['react','animations','orbit-images'], kind:'ui', status:'ready', code:'recipes/imported/orbit-images/' },
+  { id:'rb-pixel-trail', name:'Pixel Trail', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Pixel Trail — animated component.", tags:['react','animations','pixel-trail'], kind:'ui', status:'ready', code:'recipes/imported/pixel-trail/' },
+  { id:'rb-ribbons', name:'Ribbons', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Ribbons — animated component.", tags:['react','animations','ribbons'], kind:'ui', status:'ready', code:'recipes/imported/ribbons/' },
+  { id:'rb-shape-blur', name:'Shape Blur', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Shape Blur — animated component.", tags:['react','animations','shape-blur'], kind:'ui', status:'ready', code:'recipes/imported/shape-blur/' },
+  { id:'rb-sticker-peel', name:'Sticker Peel', cat:'feedback-delight', surfaces:['web','interaction'], canvas:['web'], target:["button","image","icon"], runtime:['react'], export:['skill','html'],
+    desc:"Sticker Peel — animated component.", tags:['react','animations','sticker-peel'], kind:'ui', status:'ready', code:'recipes/imported/sticker-peel/' },
+  { id:'rb-animated-list', name:'Animated List', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Animated List — animated component.", tags:['react','components','animated-list'], kind:'ui', status:'ready', code:'recipes/imported/animated-list/' },
+  { id:'rb-border-glow', name:'Border Glow', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Border Glow — animated component.", tags:['react','components','border-glow'], kind:'ui', status:'ready', code:'recipes/imported/border-glow/' },
+  { id:'rb-bubble-menu', name:'Bubble Menu', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Bubble Menu — animated component.", tags:['react','components','bubble-menu'], kind:'ui', status:'ready', code:'recipes/imported/bubble-menu/' },
+  { id:'rb-card-nav', name:'Card Nav', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Card Nav — animated component.", tags:['react','components','card-nav'], kind:'ui', status:'ready', code:'recipes/imported/card-nav/' },
+  { id:'rb-card-swap', name:'Card Swap', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Card Swap — animated component.", tags:['react','components','card-swap'], kind:'ui', status:'ready', code:'recipes/imported/card-swap/' },
+  { id:'rb-carousel', name:'Carousel', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Carousel — animated component.", tags:['react','components','carousel'], kind:'ui', status:'ready', code:'recipes/imported/carousel/' },
+  { id:'rb-chroma-grid', name:'Chroma Grid', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Chroma Grid — animated component.", tags:['react','components','chroma-grid'], kind:'ui', status:'ready', code:'recipes/imported/chroma-grid/' },
+  { id:'rb-circular-gallery', name:'Circular Gallery', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Circular Gallery — animated component.", tags:['react','components','circular-gallery'], kind:'ui', status:'ready', code:'recipes/imported/circular-gallery/' },
+  { id:'rb-decay-card', name:'Decay Card', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Decay Card — animated component.", tags:['react','components','decay-card'], kind:'ui', status:'ready', code:'recipes/imported/decay-card/' },
+  { id:'rb-dome-gallery', name:'Dome Gallery', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Dome Gallery — animated component.", tags:['react','components','dome-gallery'], kind:'ui', status:'ready', code:'recipes/imported/dome-gallery/' },
+  { id:'rb-flowing-menu', name:'Flowing Menu', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Flowing Menu — animated component.", tags:['react','components','flowing-menu'], kind:'ui', status:'ready', code:'recipes/imported/flowing-menu/' },
+  { id:'rb-fluid-glass', name:'Fluid Glass', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Fluid Glass — animated component.", tags:['react','components','fluid-glass'], kind:'ui', status:'ready', code:'recipes/imported/fluid-glass/' },
+  { id:'rb-flying-posters', name:'Flying Posters', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Flying Posters — animated component.", tags:['react','components','flying-posters'], kind:'ui', status:'ready', code:'recipes/imported/flying-posters/' },
+  { id:'rb-folder', name:'Folder', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Folder — animated component.", tags:['react','components','folder'], kind:'ui', status:'ready', code:'recipes/imported/folder/' },
+  { id:'rb-glass-surface', name:'Glass Surface', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Glass Surface — animated component.", tags:['react','components','glass-surface'], kind:'ui', status:'ready', code:'recipes/imported/glass-surface/' },
+  { id:'rb-infinite-menu', name:'Infinite Menu', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Infinite Menu — animated component.", tags:['react','components','infinite-menu'], kind:'ui', status:'ready', code:'recipes/imported/infinite-menu/' },
+  { id:'rb-lanyard', name:'Lanyard', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Lanyard — animated component.", tags:['react','components','lanyard'], kind:'ui', status:'ready', code:'recipes/imported/lanyard/' },
+  { id:'rb-magic-bento', name:'Magic Bento', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Magic Bento — animated component.", tags:['react','components','magic-bento'], kind:'ui', status:'ready', code:'recipes/imported/magic-bento/' },
+  { id:'rb-masonry', name:'Masonry', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Masonry — animated component.", tags:['react','components','masonry'], kind:'ui', status:'ready', code:'recipes/imported/masonry/' },
+  { id:'rb-model-viewer', name:'Model Viewer', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Model Viewer — animated component.", tags:['react','components','model-viewer'], kind:'ui', status:'ready', code:'recipes/imported/model-viewer/' },
+  { id:'rb-pill-nav', name:'Pill Nav', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Pill Nav — animated component.", tags:['react','components','pill-nav'], kind:'ui', status:'ready', code:'recipes/imported/pill-nav/' },
+  { id:'rb-profile-card', name:'Profile Card', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Profile Card — animated component.", tags:['react','components','profile-card'], kind:'ui', status:'ready', code:'recipes/imported/profile-card/' },
+  { id:'rb-reflective-card', name:'Reflective Card', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Reflective Card — animated component.", tags:['react','components','reflective-card'], kind:'ui', status:'ready', code:'recipes/imported/reflective-card/' },
+  { id:'rb-scroll-stack', name:'Scroll Stack', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Scroll Stack — animated component.", tags:['react','components','scroll-stack'], kind:'ui', status:'ready', code:'recipes/imported/scroll-stack/' },
+  { id:'rb-stack', name:'Stack', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Stack — animated component.", tags:['react','components','stack'], kind:'ui', status:'ready', code:'recipes/imported/stack/' },
+  { id:'rb-staggered-menu', name:'Staggered Menu', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Staggered Menu — animated component.", tags:['react','components','staggered-menu'], kind:'ui', status:'ready', code:'recipes/imported/staggered-menu/' },
+  { id:'rb-tilted-card', name:'Tilted Card', cat:'hover-press', surfaces:['web','interaction'], canvas:['web'], target:["card","list","section"], runtime:['react'], export:['skill','html'],
+    desc:"Tilted Card — animated component.", tags:['react','components','tilted-card'], kind:'ui', status:'ready', code:'recipes/imported/tilted-card/' },
+];