Pick a tool
Browse the catalog and open the one that matches the section you are building. Each opens on a working composition, so you are adjusting something that already moves rather than starting from an empty canvas.
New · Tools
Interactive components you edit live and export as code
Tools is a set of browser editors for the animated pieces that usually cost a day of fiddling: carousels, marquees, parallax columns, focus stacks. You open one, drop in your own imagery, and shape the motion with real controls: direction, spacing, corner radius, step duration, parallax depth, the easing curve itself. The preview is the component, running at full speed, not a video of it.
When it looks right, you export. A self-contained HTML file, a Svelte component, React JSX, or a copy you paste straight into Figma as editable layers. No runtime to install, nothing calling back to us, and no gap between what you approved on screen and what lands in your repository.
01 · How it works
Four steps, no setup
There is nothing to install and no project to configure. Every editor builds its own control panel from the tool it renders, so the controls you see are exactly the parameters that component actually has.
Load your content
Swap in your own imagery and copy. The composition rebuilds around it immediately, which is usually where a stock demo stops being useful and a real layout decision starts.
Shape the motion
Direction, tilt, card width, gap, corner radius, offsets, edge fade, step duration, parallax depth, and the easing curve, either from a preset or by dragging your own cubic-bezier.
Export it
Choose HTML, Svelte or React and download the file, or copy the composition to your clipboard and paste it into Figma. The export is generated from the exact state on screen.
02 · Where it goes
One composition, four destinations
The HTML document is the source of truth. The framework targets are derived from it rather than hand-written a second time, which is why a Svelte or React export can never quietly drift from the preview you signed off.
HTML
One file with markup, styles and the animation source together. Open it in a browser to check it, drop it into a static site, or paste the section into whatever CMS or page builder you already use. Nothing else has to be present for it to run.
Svelte
A single .svelte file with the markup, scoped styles and lifecycle already wired, named after
the tool. Drop it in your components directory and import it. There is no accompanying package to add.
React
A .jsx component with attributes translated to JSX conventions and inline styles converted to
style objects. It mounts and cleans up on its own, so it behaves in a Next.js app the same way it behaved
in the editor.
Figma
Figma reads HTML from the clipboard, so "Copy for Figma" flattens the live computed styles onto every node and writes it there. Paste into a file and the composition arrives as real, editable layers, useful when the deck has to show the motion piece in context.
03 · What it is for
The work this actually removes
Shipping a hero section that moves. A looping carousel or a parallax column is rarely hard in principle and reliably slow in practice: the wrap is off by a frame, the easing feels mechanical, the gap collapses at 768 pixels. Here those are controls, and you settle them by looking rather than by rebuilding.
Pitching motion before it exists. Tune the component, copy it into Figma, and the deck shows the real thing in the real layout instead of a description of it. The version the client approves is the version you export.
Giving an AI agent something concrete. Prompting for animation tends to produce plausible code with the wrong feel. Exporting a working component and handing that file to Cursor or v0 changes the task from inventing motion to adapting a system that already behaves: the same argument our vibecoding guide makes about templates, applied to the parts that move.
Keeping a library coherent. Every export from the same tool shares its structure and class conventions, so a set of sections built this way stays consistent instead of drifting into eight different implementations of the same idea.
04 · The library
What is available today
New tools are added the same way the rest of the library grows. Each one is a single editor with its own control set, and each exports to all four destinations.
Motion Column
A looping vertical or horizontal card carousel where the centre card holds focus and its neighbours are trimmed by the frame they travel toward.
Motion Row
A continuous row of imagery with per-card depth, built for hero strips and logo walls that should never visibly restart.
Motion Ticker
A seamless marquee for text or imagery, with direction, speed and edge fading you can tune against your own content.
Motion Poster
A single hero frame that reacts to pointer movement: tilt, scale and layered depth without a heavy 3D dependency.
Motion Focus
A stack of frames where one item resolves into focus while the rest recede, useful for feature tours and step-by-step sections.
Motion Relay
A hand-off sequence where each frame passes attention to the next on a shared timeline instead of independent transitions.
Motion Stack
Cards that collapse and expand as a deck, for pricing, testimonials or anything that reads better stacked than listed.
Parallax Totem
A scroll-driven column of imagery with independent layer speeds, for landing sections that should feel like depth rather than movement.
05 · Access
Free to use, membership to export
Every editor is open. Open a tool without an account, load your imagery, change the direction, drag the easing curve, watch it run: all of it, for as long as you like. We would rather you find out whether the component is right before deciding anything.
What a membership buys is the file you take with you. Exporting to HTML, Svelte or React and copying to Figma are member actions, and they are included in the same subscription that covers the template and component library. Nothing about the editor changes when you subscribe; the download stops asking.
Tools FAQ
-
No. Every editor is open to anyone who opens the page: you can load your own imagery, change the motion, adjust the easing curve and watch the result run at full speed. What a membership buys is the file you take with you: exporting is where the gate sits.
-
The HTML target is a single self-contained document: markup, styles and the animation source in one file you can open in a browser or paste into any page. The Svelte and React targets are generated from that same document, so a component can never drift from the HTML preview you approved.
-
Figma reads HTML from the clipboard. "Copy for Figma" flattens the computed styles of the live component onto every node and writes it to your clipboard, so you can paste the composition into a Figma file as real layers and keep designing from there.
-
No. There is no runtime to install and nothing that calls back to us. Some tools export as dependency-free CSS and markup; the ones that need a real timeline include the animation source verbatim, which is the same source the preview runs.
-
Yes. Exports are yours to ship in personal and commercial projects under the standard HorizonX licence, the same terms that cover the rest of the library.
-
A template is a finished file you adapt by editing code. A tool is the generator behind it: you make the decisions visually (imagery, direction, spacing, duration, easing) and the file is written to match, in the framework you asked for.
Now live
Stop rebuilding the same carousel.
Configure it once, in the browser, against your own imagery, then take the code, the component or the Figma layers and get on with the rest of the page.