Choose the integration surface
A simple character can live in an embed, while a richer integration may need a code component that exposes specific properties and event connections. Choose based on the required behavior and the project’s existing architecture, not just the fastest first preview.
Consult Framer’s developer documentation for the supported code and component environment. Keep the animation in a clearly bounded component so layout changes do not require rebuilding the state machine.
Give the component an intentional size
Define how the mascot fits the surrounding stack or section. A canvas needs a stable box and a drawing surface sized for that box. Do not assume that a component’s design-canvas dimensions will match every published breakpoint.
Use containment that preserves the character’s proportions and leave enough room for the widest gesture. Test the fallback image in the same wrapper so loading the animation does not alter the layout. Avoid fixed overlays unless there is a clear reason for that placement.
Expose a small, meaningful set of controls
Useful component properties might include the file URL, character variant and whether a greeting button is shown. Internal rig details do not all need to become design controls. Keep state-machine and input names documented for the implementation owner.
If a designer changes a component property, decide whether it updates an input or requires recreating the runtime. Frequent reinitialization can reset the character and create unnecessary allocations. Clean up the old instance whenever a genuine replacement occurs.
Separate design preview from product events
A preview button can demonstrate a success reaction, but a published checkout or signup should trigger it only after the relevant system confirms completion. Framer’s surrounding page can provide the layout while another service owns the actual operation.
Document the event connection at that boundary. If the embed is isolated in a frame, parent-page interactions may require an explicit communication design. Do not assume a CTA outside the embed can directly access its canvas or runtime.
Verify the published page and motion controls
Check the final published URL on touch and pointer devices. Confirm file loading, responsive sizing, navigation cleanup and behavior after returning to the page. An animation that works in a design preview still needs production verification.
Honor reduced motion with a static character and offer a pause control for persistent movement. Share whether you need a simple hero embed or a reusable component with advanced states; the correct delivery scope depends on that distinction.