Splay — Reactive Card Motion

One self-contained snippet, no dependencies. Paste it into a Code Embed element in Webflow, an HTML block in Framer or WordPress, or straight into any page.

Images stay native Webflow assets (or a CMS list), and settings live in a custom attribute you can change in the Designer.

Site settings → Custom code → Footer code: paste the script tag once.
Add a Div Block and give it a size (e.g. width 100%, height 600px).
Put Image elements inside — or a Collection List with an image field. Splay uses them in order.
Div → Settings → Custom attributes: name data-splay, value below.

1 · Footer code

2 · Value for data-splay

It runs in Preview and on the published site — the Designer canvas doesn't execute custom scripts. To ship the tool's own images instead, use the Code Embed tab.

For hand-written sites: load the script once, then add as many data-splay containers as you like. Self-hosting? Download splay.js and change the src.

JS API: Splay.mount(el, options) → .set() .open() .close() .toggle() .destroy()