Embed shapes & transitions
Seven different placements for every form, plus the named animated behaviors that make them feel polished. Click any shape card to see it working live; click any transition to replay it.
7 embed shapes
Open any shape on /live/embed-shapes to see it actually rendering — same form, every shape, all live.
Inline iframe
Form embedded directly in the page flow. The most common pattern — drop it on a 'Donate' or 'Apply' page.
Use when: Dedicated donation/intake pages, content-flow placements.
See it liveSide widget
Compact card pinned in a sidebar — common for blog posts and content pages.
Use when: Article sidebars, footer columns, after-article CTAs.
See it liveClick-to-modal
Button triggers an overlay dialog. Most common pattern for 'Donate' CTAs in nav bars.
Use when: Nav-bar CTAs, hero call-to-actions.
See it liveScroll-triggered popup
Appears when the visitor reaches a configured scroll depth. Less intrusive than a load-time modal.
Use when: Long-form content, blog posts, mission pages.
See it liveExit-intent modal
Triggers when the cursor leaves the top of the viewport — proxy for 'about to close the tab'.
Use when: High-converting landing pages, year-end appeals, GivingTuesday.
See it liveFloating action button
Always-available 'Quick Give' affordance pinned to the bottom-right corner.
Use when: Site-wide footer CTAs, persistent campaign drives.
See it liveTop banner with inline expand
Top-of-page strip with a CTA that expands the form inline below. Dismissable for 7 days.
Use when: Active campaigns, urgency-driven pushes, match-day announcements.
See it liveTransitions & effects
Every animated behavior on the embeds — named, narrated, and replayable. Click any "Replay" button to see the effect fire.
Flavor-swap fade
When the visitor swaps form patterns on /live/form-flavors, the iframe fades out, the new src loads, then it fades back in. Hides the network blip; feels like one product.
Modal slide-up
ModalEmbed dialogs slide up 16px and fade in over 200ms — keeps the donate CTA feeling intentional, not jarring.
Scroll-popup fade-in
Scroll-triggered popup fades in with a soft backdrop wash; never appears suddenly so it doesn't startle the reader.
Exit-intent fade-up
Exit-intent modal slides up 24px and fades in. Faster than the regular modal — last-chance pattern.
FAB hover-grow
Floating action button scales 1.0 → 1.1 on hover. Subtle but conveys 'this is interactive' without being noisy.
Banner slide-down
Top banner slides down from -100% on first visit. On expand, the inline form area slide-downs from 0 height to its full height.
See the shapes actually working
Every shape rendering live, cross-origin, embedded into a real marketing page. Click through each shape and try interacting.
Open /live/embed-shapes