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.
design.alfie.io. Copy the snippet for the scene you want and paste it into your
page — in HubSpot, that's a Custom HTML module. 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>
Every prop listed in a component's data-attribute reference can be changed directly on the
mount div — no rebuild, no code changes. Attribute names are the kebab-case version of the
prop name (campaignTitle → data-campaign-title), and numbers and
booleans are parsed automatically. For example, to rename the campaign and run the animation
at double speed:
<div data-alfie-vetted-matches
data-campaign-title="Alfie's first campaign"
data-speed="2"></div>
<script type="module" src="https://design.alfie.io/alfie-vetted-matches.js"></script>
Multiline props — table rows, keyword lists, email bodies — use a literal
\n between lines, with | separating the fields of a row:
<div data-alfie-vetted-matches
data-partners="Acme Corp | acme.com | Jo Doe | 97 | SaaS | US | 1200\nGlobex | globex.io | Sam Lee | 84 | Retail | UK | 800"></div>
<script type="module" src="https://design.alfie.io/alfie-vetted-matches.js"></script>Here's the first example live — same component as above, renamed to Alfie's first campaign and playing at 2× speed: