Seven self-contained animated product scenes, embeddable on any webpage (HubSpot landing
pages included). Each embed is one <script type="module"> plus a mount
<div>. React and the animation runtime live in a shared chunk that the browser
downloads once, no matter how many embeds a page uses — this page loads all seven as proof.
alfie-*.js files
and the shared/ directory) to the same directory on your host — the embeds import
the shared chunk by relative path. The only other network request is the Geist font from jsDelivr.
Every embed scales to the width of its container and respects prefers-reduced-motion.
<div data-alfie-hero></div>
<script type="module" src="https://design.alfie.io/alfie-hero.js"></script>If the mount div is missing, the embed renders itself where its script tag sits. Customize any prop
with a data-* attribute on the mount div (kebab-case; use \n for line breaks
in multiline props):
<div data-alfie-hero data-speed="1.5" data-campaign-title="Evergreen Campaign" data-loop="false"></div>Fit scores animate, the first row clicks, the drawer slides in and auto-scrolls the research. Turns slightly toward you on hover.
<div data-alfie-hero></div>
<script type="module" src="https://design.alfie.io/alfie-hero.js"></script>Rows cascade in, status dots pulse, alert badges pop.
<div data-alfie-campaigns-list></div>
<script type="module" src="https://design.alfie.io/alfie-campaigns-list.js"></script>Fit-score bars draw and count up, New! badges spring in.
<div data-alfie-vetted-matches></div>
<script type="module" src="https://design.alfie.io/alfie-vetted-matches.js"></script>First outreach expands, the email writes itself, follow-ups slide in.
<div data-alfie-sequencing></div>
<script type="module" src="https://design.alfie.io/alfie-sequencing.js"></script>Group-by popover floats in, toggle flips, grouped rows cascade.
<div data-alfie-all-matches></div>
<script type="module" src="https://design.alfie.io/alfie-all-matches.js"></script>Chip self-presses, Alfie replies, the proposed edit draws, Apply glows.
<div data-alfie-outreach-writer></div>
<script type="module" src="https://design.alfie.io/alfie-outreach-writer.js"></script>Drawer auto-scrolls the research: fit counts up, bars fill, authority rings draw.
<div data-alfie-partner-scoop></div>
<script type="module" src="https://design.alfie.io/alfie-partner-scoop.js"></script>This instance sets data-speed="2" and data-campaign-title="Overridden via data attribute":