Introduction
WARNING
Vue Ricochet is in alpha release, and is likely to have breaking changes as development progresses.
🥏 Vue Ricochet is a lightweight, modern and flexible Vue 3 plugin for responsive object layouts.
It's open source and completely free to use. It is intended for use in creative programming applications, digital signage solutions, and other applications where you need to position multiple dynamic elements on the screen in a non-standard way.
Why "Ricochet"?
I often found myself describing what I do for work in creative programming as "bouncing things around the screen", so the name Vue Ricochet seemed appropriate.
How It Works
At a surface level, Vue Ricochet wraps groups of DOM elements in a parent container, and then applies absolute positioning to those elements. It takes a shape generator function and any passed parameters, and uses the output to determine where to position elements using inline styles (3D translations on the GPU).
Under the hood, it's a bit more complex. Multiple mutation and resize observers are established to keep track of each element's size and other attributes, and to reposition elements when anything changes. It parses relative positioning parameters to actual pixel values to allow elements to be responsive to container size changes, and uses the gsap library to animate smoothly between layouts.
Usage-wise, it's as simple as "I want these elements laid out in a circle of r radius at x,y position".
Features
Quickly position elements using built-in shapes
Vue Ricochet comes with a handful of shapes to get you started.
While deceptively simple, you can build a lot just by using these shapes and modifying the parameters. You can also stack containers within other containers for nested effects, and modify shapes on-the-fly to transition smoothly between them.
Supports relative values in configuration
Shape parameters, such as position, radius, angles, etc. can be passed using either fixed values (px) or using relative values such as 50%. Vue Ricochet will calculate relative values based on the dimensions of the container.
For an example, a circle might be placed with a center position of {x: "50%", y: "50%"} and a radius of 40%. This will automatically put the circle in the middle of the container, and it's radius will be 40% of the container's width.
Build your own custom shapes
Vue Ricochet supports custom shape functions. A shape function returns a callback to position an element anywhere along the shape. They can also be passed custom configuration parameters to support instancing the same shape in multiple ways.