PagieraInteractions, /without scripts
Connect events, branches and actions in a node graph to open panels, set variables, navigate or morph one layer into another.
A click branches on the panel's visibility, then shows or hides it.
How it works04
- 01
Pick an event
Start from page load, click, hover, scroll into view, input change or a timer.
- 02
Add the flow
Branch, sequence, delay or run once; data wires feed conditions and values.
- 03
Choose actions
Show, hide, toggle, navigate, set variables, copy, animate or morph.
- 04
Preview
Test in the protected page preview, then save and publish.
What you can do06
- Scope
Per-layer graphs
Alt + double-click a layer to open a split view with only its actions.
- State
Variables
Named variables, optionally kept in the visitor's browser between visits.
- Morph
Morph into layer
Transition one layer into another; surrounding content resizes smoothly.
- Motion
Named animations
Show, hide and toggle play custom animations forward or backward.
- Safety
Bounded runtime
A small interpreter runs each flow; no arbitrary JavaScript reaches visitors.
- Links
Safe navigation
Navigation accepts HTTP(S), site paths, fragments, mail and phone links.
Built-in limits04
- 300nodes per graph
- 600links per graph
- 50variables
- 2,000steps per run
Graphs never replace server authorization; a hidden panel does not protect its data.
Action Workflow
Questions
No. Every flow is built from nodes, and the runtime interprets them instead of executing code.
Turn on Keep for a variable to store it in the visitor's browser for that page.
No. It is a layout transition between two layers; use the Motion Editor for keyframes.
Try it in your own app
Install the package and open the studio on a protected route.
bun add pagiera