Split Type

Split Type

Byline: Split your type as you scroll.

✦ Turn bold typography into a scroll-driven visual experience.

Create expressive headlines that split into layered slices and stretch apart as you scroll. Control the spacing, slice progression and fade to make the effect as subtle or dramatic as you like. Make it completely your own with flexible controls for layout, styling and motion :)

⚙ What you can customize

Easily adapt every part of the component to match your own brand and style.

Text ✦ Link ✦ Font ✦ Font size ✦ Text color ✦ Background color ✦ Number of slices ✦ Slice falloff ✦ Spread distance ✦ Fade intensity ✦ Core movement

🎯 Perfect for

Hero sections ✦ Contact sections ✦ Portfolio websites ✦ Creative studios ✦ Agency websites ✦ Editorial layouts ✦ Bold headlines ✦ Experimental landing pages

📱 Responsive by default

Built to work smoothly across Desktop, Tablet and Mobile while keeping the typography centered and the effect visually consistent.

🖱 Included interactions

Scroll-driven splitting ✦ Progressive slice movement ✦ Adjustable slice falloff ✦ Distance-based fading ✦ Clickable text link ✦ Reduced-motion support

⭐ Trusted by creators worldwide

Built for Framer and made to be easy to use, customize and integrate into your own projects. No complicated setup — just copy, paste and make it yours.

👀 Live Preview

See the component in action and experience the full scroll interaction before adding it to your project.

Thanks for checking out Split Type! I had a lot of fun experimenting with this typography effect and turning it into a flexible Framer component. Hope you enjoy using it in your own projects :)