About InlineVisualWord
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.
