---
title: "InlineVisualWord — Free Framer component · Best of Framer"
description: "Free Framer component · by Kmax Design · Text. Animate words with images, inline."
canonical: "https://framer.elliotli.dev/component/inlinevisualword"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/InlineVisualWord

# InlineVisualWord

Animate words with images, inline.

[View on Framer](https://framer.com/marketplace/components/inlinevisualword/?via=elliot-li)

![InlineVisualWord preview image 1](https://framer.elliotli.dev/og/component/inlinevisualword/23f76af9a7294759/1600x1200.jpg)

## Summary

Animate words with images, inline.

## Description

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

1.  Drop Inline Visual Words onto your canvas
    
2.  Add your text
    
3.  Define animated words and images
    
4.  Choose an animation style
    
5.  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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4951

## Details

- **Author**: Kmax Design
- **Published**: 2026-02-18
- **Updated**: 2026-02-25
- **Added**: 2026-02-13
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing