Entering an Interactive World...

skewed background pattern
arrow device external button
background shade
arrow dynamics typographic logo

CUSTOM INTERACTIVE

ANIMATION LIBRARY FOR FRAMER

top shade
battery percentage
voltage
signal strength icon
meter icon
reverse icon

HOW IT WORKS

ARTWORK

GREENPRINT

arrow inspiration icon
skull icon
speaker grid
arrow dynamics icon
shadow of hover dial
hover dial

V1

V2

V3

AD 1.1

BY FRAMER.ZIP

solar powered batter image
compass background
worldmap

N

GENESIS

AUTO-STABILIZERS

three point marker line drawing

ARROW GALLERY

DEMOS

↪︎ SHOWING 4 OF 18

CRAZYMETER

TRUCHET LOOP

MORTYVERSE

SNOWFALL

GHOSTS

MADE USING ARROW DYNAMICS

three dot microphone
  • symbols of arrow dynamics variations

Build Interactive 2D Animations & Patterns in Framer

One Framer Code Component 15 Variations Infinite Possibilities

background pattern

Accelerators

play = yes, interact = yes;

area = unconfined, def_speed = 0.1;

multiplier = 10, radius = 150;

Layout Controls

arrow dynamics framer interface of layout controls

Object Controls

arrow dynamics framer interface of layout controls
arrow dynamics framer interface of layout controls

Text, Images, GIFs, URLs

Motion Controls

arrow dynamics framer interface of motion controls
arrow dynamics framer interface of variation switch
  • Accelerators •

    Amplifiers

    Convergers

    Decelerators

    Entropists

    Ferromancers

    Gravitators

    Harmonizers

    Listeners

    Oscillators

    Polarizers

    Resonators

    Stoics

    Vermiformers

    Warriors

One Click
Switch

14 Unique Variations

Special Dynamics

  • Gravity

    Mass

    Force

    Repel

    Distance

    Revert

    Speed

    Direction

    Acceleration

    Scale

  • Distance

    Revert

    Speed

    Direction

    Acceleration

    Scale

    Gravity

    Mass

    Force

    Repel

  • Direction

    Acceleration

    Scale

    Gravity

    Mass

    Force

    Repel

    Distance

    Revert

    Speed

INTERACTIVE VISUALIZATION OF THE COMPONENT

Arrow Dynamics – All Variations

Variations with ° are interactive

Accelerators

°

Accelerates objects within a radius around the pointer arrow

Amplifiers

°

Amplifies objects within a radius around the pointer arrow

Convergers

°

Rotates individual objects to converge towards the pointer arrow

Decelerators

°

Decelerates objects within a radius around the pointer arrow

Entropists

°

Objects increase their entropy under the arrow and lowers when away

Ferromancers

Objects emulate a compass needle movement in zero magnetic field

Gravitators

°

Increases gravity within a radius around the pointer arrow

Harmonizers

Objects loop in Y-axis in a harmonised orientation

Listeners

°

Objects never listens to the pointer arrow

Oscillators

°

Objects oscillate collectively around the pointer arrow

Polarizers

°

Objects change their polarity on click or hover

Resonators

°

Objects resonate collectively around the pointer arrow

Stoics

°

Objects behave however they want

Vermiformers

Objects behave like microorganisms under a microscope

Warriors

Objects march like warriors towards a particular cardinal direction

Get Trial Component

3 Variations, Limited Property Controls

background pattern

Basic

$28

Arrow Dynamics Component + Framer Remixes of Arrow Gallery Demos

Arrow Dynamics Framer Component (All Variations)

Arrow Gallery Demos * → Framer files

Lifetime free updates

Pro

$280

Everything from Basic + Fully editable Framer and Figma files of this Arrow Dynamics website

Arrow Dynamics Framer Component (All Variations)

Arrow Gallery Demos * → Framer + Figma files

Arrow Dynamics full website → Framer + Figma files

Framer.zip code overrides (used in this website)

Lifetime free updates

Use code ARROW → GET 30% OFF

* 3 sites included → Quiver of Arrows, Orbs, Truchet Tiles

One time purchase • 100% Fun • Payments via LemonSqueezy

pricing display box

Pricing

User Manual & FAQs

Reach out to hi@framer.zip for any queries

arrow dynamics user manual envelope
holographic sticker of arrow dynamics

What is Arrow Dynamics

How do I add Arrow Dynamics to my Framer site?

What will I get on purchase?

Can I edit the code?

Can I include the component in Framer Templates / Remixes?

View all FAQs

  • symbols of arrow dynamics variations
framerzip vinyl player
vinyl disc
vinyl player handle

Quiver of Arrows

Interactive animations that make creative use of Arrow Dynamics

vinyl disc

Orbs

Interactive glass orbs built using multiple variations of Arrow Dynamics

vinyl disc

Truchet Tiles

Seamless Truchet patterns built using the Polarizers variation

The Arrow Gallery

Creative uses of Arrow Dynamics Component

More Demos Coming Soon...

Use code ARROW → GET 30% OFF

  • Gravity

    Mass

    Force

    Repel

    Distance

    Revert

    Speed

    Direction

    Acceleration

    Scale

  • Distance

    Revert

    Speed

    Direction

    Acceleration

    Scale

    Gravity

    Mass

    Force

    Repel

  • Direction

    Acceleration

    Scale

    Gravity

    Mass

    Force

    Repel

    Distance

    Revert

    Speed

Special Dynamics

Interactive Components

arrow dynamics framer interface of object controls

Object Controls

Precise & Smooth

Built using p5.js, Optimised for Framer;

Render in 30 / 60 / 120 fps

random gradient image

Lifetime Access

One-time payment for lifetime access to component updates and new variations

Layout Controls

arrow dynamics framer interface of layout controls

Bring Your Framer Sites to Life with Arrow Dynamics

Experience Arrow Dynamics ✕ Framer throughout this site