InlineVisualWord

Animate words with images, inline.

Inline Visual Words is a word-level animation component that lets you seamlessly replace selected words with animated visuals — without breaking layout, spacing, or typography. It’s lightweight, responsive, and built to work perfectly with Framer’s typography system and layout engine. How it works You provide a full text string Define one or more words to animate Each selected word smoothly switches between text and an image The rest of the text remains completely untouched and inline All animations run without affecting line height, spacing, or surrounding content. Smart behavior Multiple words can be animated in a single line Each animated word can have its own image and alignment If no animated words are provided, the component behaves like normal text Typography is always inherited from Framer’s text controls This ensures the component works instantly without complex setup. What you get Inline word-to-image animation Multiple animation styles (Fade, Scale, Flip, Slide) Support for multiple animated words Per-word image alignment control Smooth, non-layout-breaking transitions Content & layout Text — Full text content Animated Words — Define which words animate Text Align — Left, center, or right alignment Image Align — Control image position per word Everything stays inline and responsive by default. Animations Fade — Subtle blur + vertical fade Scale — Soft zoom in/out Flip — 3D-style rotation Slide — Horizontal motion Animations are selectable directly from props. Typography Fully compatible with Framer typography Font family Font size Font weight Line height No typography overrides or duplication. Default values Inline Visual Words ships with sensible defaults that work instantly: Neutral animation timing Clean fade animation No forced colors on animated words Balanced motion easing You can use it as-is or customize it to match your design system. How to use Drop Inline Visual Words onto your canvas Add your text Define animated words and images Choose an animation style Adjust timing or alignment if needed That’s it — no extra setup required. Best used for Hero headlines Feature callouts Marketing copy Landing pages SaaS and startup websites Inline Visual Words adds personality and motion to text — without overpowering your design.

Animate words with images, inline.