Type Reveal

An image frame that opens inside a line of type as the block crosses the viewport, so the picture reads as a word rather than as a figure beside one.

About this tool

Each block holds a headline with a slot cut into it. As the block travels toward the centre of the viewport the slot widens and an image fills it, then closes again on the way out. The type around it shifts and fades with the same progress, so the picture behaves like a word in the sentence instead of an illustration next to it. Scroll drives it; with no scroll available it advances on its own.

In collections: Text Animations & Kinetic Typography

Guide: Text Reveal Effects: Keep the Message Understandable Without Motion Rotating Headline Text: Write a Sentence That Still Works When It Stops HTML Marquee Is Deprecated: How to Build a Modern Marquee

Scroll · HTML All tools

Assets

Slot

Aspect

Image radius px

Gap px

Word skew deg

Type

Size px

Weight

Tracking em

Line height

Motion

State

Live Paused

Reveal travel %

Smoothing

Body fade

Stage

Viewport height px

Corner radius px