Arrow Dynamics – Framer Library to build Interactive Animations
Arrow Dynamics – Framer Library to build Interactive Animations
Quick and easy way to build interactive animations and patterns inside Framer. Arrow Dynamics is a code component library created using p5.js for seamless and precise pointer interactions and effects to bring your Framer websites alive.
![](data:image/svg+xml,<svg display="block" id="3005971000" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 12.6 0 L 15.054 0 L 9.694 5.93 L 16 14 L 11.062 14 L 7.195 9.106 L 2.77 14 L 0.315 14 L 6.049 7.657 L 0 0 L 5.062 0 L 8.558 4.474 Z" fill="rgb(255, 255, 255)" height="14px" id="NiNVGZAXZ" transform="translate(0 1)" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" id="1938821266" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 0 4 C 0 1.791 1.791 0 4 0 L 12 0 C 14.209 0 16 1.791 16 4 L 16 12 C 16 14.209 14.209 16 12 16 L 4 16 C 1.791 16 0 14.209 0 12 Z M 5.334 12.686 L 5.334 6.613 L 3.405 6.613 L 3.405 12.686 Z M 4.369 5.784 C 5.042 5.784 5.461 5.318 5.461 4.735 C 5.448 4.139 5.042 3.686 4.382 3.686 C 3.722 3.686 3.291 4.139 3.291 4.735 C 3.291 5.318 3.709 5.784 4.357 5.784 Z M 6.401 12.686 C 6.401 12.686 6.401 12.686 6.401 12.686 L 6.401 12.686 Z M 8.331 12.686 L 8.331 9.295 C 8.331 9.113 8.343 8.932 8.394 8.802 C 8.534 8.44 8.851 8.064 9.384 8.064 C 10.082 8.064 10.361 8.621 10.361 9.437 L 10.361 12.686 L 12.291 12.686 L 12.291 9.204 C 12.291 7.339 11.339 6.471 10.069 6.471 C 9.046 6.471 8.587 7.059 8.331 7.473 L 8.331 6.613 L 6.401 6.613 C 6.427 7.181 6.402 12.65 6.401 12.686 Z" fill="rgb(255, 255, 255)" height="16px" id="tECp9_fFZ" width="16px"/></svg>)
![](data:image/svg+xml,<svg display="block" id="1713834761" role="presentation" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M 13.669 2.325 C 15.173 3.824 16.001 5.816 16 7.934 C 15.998 12.306 12.424 15.862 8.034 15.862 L 8.03 15.862 C 6.697 15.862 5.387 15.529 4.223 14.898 L 0 16 L 1.13 11.891 C 0.433 10.689 0.066 9.325 0.067 7.928 C 0.068 3.556 3.642 0 8.034 0 C 10.165 0.001 12.165 0.826 13.669 2.325 Z M 8.034 14.523 C 11.683 14.523 14.653 11.567 14.655 7.933 C 14.656 6.173 13.968 4.517 12.718 3.272 C 11.467 2.026 9.805 1.34 8.036 1.339 C 4.384 1.339 1.413 4.295 1.412 7.928 C 1.411 9.173 1.761 10.386 2.424 11.435 L 2.581 11.684 L 1.913 14.116 L 4.419 13.462 L 4.661 13.605 C 5.678 14.205 6.843 14.523 8.031 14.523 L 8.034 14.523 Z M 11.665 9.589 C 11.864 9.688 11.997 9.738 12.047 9.821 C 12.096 9.903 12.096 10.3 11.931 10.763 C 11.765 11.225 10.97 11.648 10.587 11.705 C 10.244 11.756 9.81 11.777 9.334 11.626 C 9.044 11.535 8.673 11.413 8.199 11.209 C 6.202 10.35 4.898 8.349 4.798 8.217 C 4.698 8.085 3.985 7.142 3.985 6.168 C 3.985 5.193 4.499 4.714 4.682 4.515 C 4.865 4.317 5.08 4.267 5.213 4.267 C 5.346 4.267 5.478 4.268 5.595 4.274 C 5.716 4.281 5.881 4.228 6.042 4.614 C 6.208 5.011 6.607 5.986 6.656 6.085 C 6.706 6.184 6.739 6.3 6.673 6.432 C 6.606 6.564 6.573 6.647 6.474 6.763 C 6.374 6.878 6.264 7.021 6.175 7.11 C 6.076 7.208 5.972 7.315 6.088 7.514 C 6.204 7.712 6.603 8.361 7.195 8.886 C 7.956 9.561 8.597 9.77 8.796 9.869 C 8.995 9.968 9.111 9.952 9.227 9.82 C 9.343 9.688 9.725 9.242 9.858 9.043 C 9.99 8.845 10.123 8.878 10.305 8.944 C 10.488 9.01 11.467 9.489 11.666 9.588 Z" fill="rgb(255, 255, 255)" height="16px" id="TU0NyWTsz" width="16px"/></svg>)