5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T80e,

Text- Image Reveal is a scroll-based Framer Motion component that creates an immersive editorial layout by splitting each line of text into left and right segments while revealing an image between them. As the user scrolls, each line animates independently using scroll progress tracking, gradually expanding the image width from 0 to its full size. This produces a smooth “unfolding” effect that feels both organic and visually engaging.

The animation is carefully tuned to ensure performance and fluidity across devices. Each line reacts based on its position in the viewport, allowing multiple reveal moments as the user moves through the section.

Key Features

Scroll-driven reveal animation per text line
Dynamic image expansion between split text
Spring-smoothed motion for natural transitions
Fully customizable typography (size, spacing, tracking)
Adjustable image dimensions and corner radius
Multi-slide support for storytelling sequences
Clean, minimal layout structure for easy integration
Performance-optimized transforms using GPU acceleration hints
Responsive Behavior.

Customization

Edit slides directly to define text and images per line
Adjust imageWidth and imageHeight to control reveal scale
Modify lineFontSize and letterSpacing for typographic style
Control spacing between lines using lineSpacing and lineGap
Change backgroundColor, textColor, and hintColor for theme matching
Fine-tune animation feel via spring configuration (stiffness, damping)

Best Used For

Creative agency landing pages
Portfolio storytelling sections
Editorial or magazine-style websites
Brand narrative introductions
Product or campaign story reveals
High-end interactive web experiences

5a:[["$","$L5d",null,{"post":{"id":"019f2882-b89e-70e8-8e8b-081dd63620b3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5bdecc7b-64dc-4333-a053-3459c3b0f6b1","name":"Kelvin Mata","slug":"kelvin-mata","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"m17s7aRnwjeUmypA4UcX","resolved":true,"title":"TextImage Reveal","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Text- Image Reveal is a scroll-based Framer Motion component that creates an immersive editorial layout by splitting each line of text into left and right segments while revealing an image between them. As the user scrolls, each line animates independently using scroll progress tracking, gradually expanding the image width from 0 to its full size. This produces a smooth “unfolding” effect that feels both organic and visually engaging."}]},{"type":"paragraph","content":[{"type":"text","text":"The animation is carefully tuned to ensure performance and fluidity across devices. Each line reacts based on its position in the viewport, allowing multiple reveal moments as the user moves through the section."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven reveal animation per text line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic image expansion between split text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring-smoothed motion for natural transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable typography (size, spacing, tracking)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable image dimensions and corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-slide support for storytelling sequences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean, minimal layout structure for easy integration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance-optimized transforms using GPU acceleration hints"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Behavior. "}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edit slides directly to define text and images per line"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust imageWidth and imageHeight to control reveal scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modify lineFontSize and letterSpacing for typographic style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Control spacing between lines using lineSpacing and lineGap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Change backgroundColor, textColor, and hintColor for theme matching"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune animation feel via spring configuration (stiffness, damping)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Best Used For"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio storytelling sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial or magazine-style websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand narrative introductions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product or campaign story reveals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-end interactive web experiences"}]}]}]}]},"introduction":"Scroll-driven cinematic text-image","slug":"textimage-reveal","author":{"framerUserId":"5bdecc7b-64dc-4333-a053-3459c3b0f6b1","name":"Kelvin Mata","slug":"kelvin-mata","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5bdecc7b-64dc-4333-a053-3459c3b0f6b1/iyfxe699","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1902,"height":846}}],"post":null,"createdAt":"2026-07-03T15:04:43.363Z","updatedAt":"2026-09-01T06:52:57.325Z","publishedAt":"2026-07-03T15:04:43.361Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://caring-encounter-483283.framer.app/","price":"8","paymentUrl":"https://bowstonestudios.lemonsqueezy.com/checkout/buy/5f2a3e68-d76d-49a8-aa3c-c55627da7df5","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"7psRjtWcVsNm3Yw0qFUg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-03T15:04:43.422Z","updatedAt":"2026-07-03T15:04:43.422Z","reported":false}}],"$L5f"]

Suggested for you