TypeShift Section

TypeShift Section turns one media moment and a few words into a focused editorial sequence. Its split-screen keeps the visual and message together while oversized elastic type reshapes as visitors scroll. Use it for studio stories, craft processes, portfolio introductions, launches, and campaign statements.

Why it works

Media establishes atmosphere while elastic type gives short copy hierarchy and movement. A transition between two phrases creates a visual beat instead of a static headline beside an image.

What you can change

Edit the image or video, poster, two phrases, typeface, colors, fit, focus, spacing, panel heights, scroll travel, and header offset from Framer's property panel. The second phrase is optional, and Manual mode provides a still state.

How it fits your page

At 700px component width and above, media and type split the width evenly. Below 700px, media flows above the type panel while page scrolling drives the transition. Set Width to Fill and Height to Fit Content, keep the parent unclipped, and match Header offset to any fixed navigation.

Video and accessibility

An image can serve as the poster while video loads or cannot play. MP4 video is muted with no player controls. Reduced-motion settings show the poster and complete text without the pinned effect. Use licensed media and meaningful image alt text.

What to expect

This is one Framer Code Component with property controls, not a website template, native text-layer pack, stock-video library, or CMS slider. A lightweight default image completes the first insertion; replace it with your own image or MP4. Character support depends on the selected typeface.

Support: hello@periphi.com