cyberneticlibrary
← library

Add interactive web animations

web-motion-libraryskillsetup L2★0
Sheshiyer/skill-clusters ↗
What it does

Select and implement interactive web animations

Best for

Landing page hero sections and image grids with cursor-reactive or morphing background effects

Inputs
  • · Animation pattern name (Hover Motion, Morphing Shapes, Hero Section)
  • · React/Tailwind component names from Magic UI library
Outputs
  • · React/Tailwind/Framer Motion component code
  • · CSS animations
  • · SVG morphing shapes
Requires
  • · React
  • · Tailwind CSS
  • · Framer Motion
  • · Magic UI component library
Preconditions

React project set up; Tailwind + Framer Motion installed

Failure modes

Animation jank on low-end devices; missing font imports (Rubik); Tailwind classes not applied

Trust signals
  • · 50+ pre-built Magic UI components documented
  • · Sourced from design agencies (Codrops, Viktor Oddy)
  • · Specific typography guidance (Rubik, line-height, letter-spacing)