4c:I[267044,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/41gwzxjlh6wda.js","/creators-assets/_next/static/immutable/chunks/0tb62zkq3ytzl.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/0gsy0nazl2cht.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/0y1e6y4tai9kl.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/1gasll1b30-2c.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/15ey03cfkkg-y.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/29vwz5igguxfe.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/0xifckmqg-iju.js"],"S"] 4d:T834,

Scroll faster and the sentence bends. Stop, and it snaps straight again.

The section pins to the screen and turns your vertical scroll into one long line of type travelling sideways. How hard you scroll is what curves it: the line whips into an S while you move and settles flat the moment you let go. Other curved text components draw a fixed arc and loop it. This one has no arc of its own until you touch the wheel.

Pictures live inside the sentence. Any piece of the line can be an image or an icon instead of words, and it rides the same curve, rotating with the letters around it. Leave one empty and you get a coloured square, handy as a spacer or a full stop.

Speed is a number you set, not a side effect. One control, in sideways pixels per pixel scrolled. A longer sentence never runs faster, it just asks for a taller section, and a badge on the canvas says exactly how much scroll it needs. Or switch on Fit Section and the line is timed to finish with the section.

No breakpoint variants. Type, pictures and speed scale from the width of the container, not the viewport, so a phone gets the same composition as a desktop and every screen asks for the same amount of scroll. It behaves the same inside a narrow column.

What you can change: the sentence piece by piece, each with its own colour. Font, text colour, background. Image size, roundness, fill, spacing, nudge and crop. Direction, speed, smoothing, how far it bends, how easily it bends, and which way the curve goes.

Good for hero statements, manifesto sections, showreel intros, service lists and anywhere a headline should feel physical.

One animation loop writes transforms straight to the DOM and only touches the letters on screen, so it never re renders React while you scroll. It respects prefers-reduced-motion.

Note: the canvas cannot scroll, so there you see a still frame. Canvas View slides it along the sentence, Canvas Height sets how tall it is. Hit Preview to see it run.

4e:T610,

Your list bends as you scroll. Rows fan back along an arc, the one on the highlight line turns solid, and its image pops in beside it.

Most list components react to hover, which means they do nothing on a phone. Arc Index is driven by scroll position, so the same interaction works on desktop and on touch without a second variant.

Set the speed once and forget the maths. Scroll Per Row fixes how far you scroll to move from one row to the next, and the section works out its own height from it, so adding rows makes the section longer instead of making it run faster. Scroll Lag sets how far the list trails behind you, Curve Depth and Curve Sharpness set how hard the rows bend, and the image pops on every change with its own scale and timing.

Features • Set the scroll speed once. The section sizes itself from your rows, so the pace never changes when the list grows • Up to 24 rows, each with its own text, image and link • Click or tab a row and it scrolls itself into the highlight. The highlighted row opens its link, so the list is keyboard navigable • Shrink Text To Fit reduces the size until the longest row fits, so nothing gets cut off on narrow screens • A mobile breakpoint measured on the section itself, not the screen, so it also behaves inside a narrow column • Plain language controls with a description on every one • Static renderer aware: no animation loops on the canvas or in exports

Good for project indexes, client lists, chapter navigation, archive pages and case study menus.

4f:T814,

The photos and the active word are one row, not two stacks pinned to the sides.

Hover a service and the gallery rebuilds around that word: the images shift to open exactly the room the new word needs. Since every word is a different width, the photos travel horizontally as well as vertically, each frame leaving a moment after the one before it, so the row moves like a chain instead of a block. While they travel, every frame crossfades to a photo from the new category.

On phones it becomes a picker wheel. Below the breakpoint the menu turns into a wheel you spin with your thumb, images anchored to the edges of the screen. It does not pin the section or take over the page scroll: it is a one screen block that behaves like any other. Only the middle band answers a vertical drag, so the rest of the screen keeps scrolling, and a tap brings any word to the centre.

No breakpoint variants needed. Everything scales from the measured width of the container, not the viewport, so it works the same inside a narrow column as it does full bleed.

What you can change: any number of items, each with its own images, and categories can have different photo counts. Font, size, line height, text and background colour. Image size, gap, radius, and how much of the side images bleed off the edge. Speed, chain delay and chain direction, crossfade length, sideways drift on pointer move. Layout: Auto, Row or Wheel, with your own switching width.

Good for service menus, agency and studio index pages, portfolio categories, project lists and capability sections.

One frame loop writes the transforms, so it composites on the GPU and never re renders React while you interact. It respects prefers-reduced-motion and renders a still, settled frame on the canvas and in exports.

Note: the Framer canvas has no hover or gestures, so the component sits still there. Use the Preview item control to pick which item shows open, and hit Preview to try it for real.

50:T7f3,

Typography that comes apart as you scroll — and puts itself back together.

Parting Words turns a paragraph into scroll-reactive typography. As each line passes a set height on screen it lifts away: letters rise, part outward from the centre, and fade out exactly as they come to rest. Scroll back and the lines return, cascading one after another and fading back in.

Why it stays readable

Most scatter effects throw letters to random positions, which turns words into noise. This one expands every letter in proportion to its distance from the centre, so characters can never overtake one another. Each letter keeps its side and its order, and words separate as whole blocks instead of scrambling — your copy stays legible far deeper into the animation.

Whole visual lines animate as a single unit, so you never see a half-dissolved word or an opacity sweep crawling across the text. Lines that wrap are handled exactly like lines you typed.

What's included

· The code component, delivered as a Framer component link · 25 property controls — no code editing required · Full documentation covering every setting

Features

· Breaks apart scrolling down, rebuilds scrolling back up · Order-preserving spread — words part, letters never scramble · Letters travel upward only, away from text still being read · Whole-line animation, including wrapped lines · Type scales from the container width, so it works inside narrow columns too · Accessible: the real text stays exposed to screen readers, and reduced-motion visitors see it fully assembled · Canvas Preview slider so you can style it without scrolling · Single file, no dependencies, no external requests

Requirements

A Framer project on any paid plan (code components aren't available on the free plan). Works on any page — no sticky wrapper, no fixed heights, no tall parent container required.

4b:["$","$L4c",null,{"value":{"fallback":{"$inf$activity-creator-926afd9a-67dc-459d-9308-eb0ae050930e-all:/unified/creator/926afd9a-67dc-459d-9308-eb0ae050930e/activity/":[{"data":[{"id":"01a0c14a-b42c-75c2-84dd-36d03f2a9fe6","type":"component.created","target":{"type":"component","id":"xPOfC8vg7TqKfwyudjcO","preview":"Dynamic Bending Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a0c146-5a75-729a-ad00-e3a1eb2faf96.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","slug":"nicolas-tellez","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-21T00:08:13.612Z","latestAt":"2026-09-21T00:08:13.612Z"},{"id":"01a079d5-c0b3-7091-86ca-f422e13b1ddc","type":"component.created","target":{"type":"component","id":"9OQmwdu2yy4JUZQ7la5t","preview":"Arc Index Scroll","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a079d7-05c4-74ba-8a20-5cfd750e21e5.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","slug":"nicolas-tellez","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T03:07:26.771Z","latestAt":"2026-09-07T03:07:26.771Z"},{"id":"01a072bb-94b3-767f-8c68-384c12a7cf15","type":"component.created","target":{"type":"component","id":"hCNBHkeKAr2ncmDxQEwc","preview":"Chain Menu Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a072b3-5970-76a5-8fd8-eeada499a992.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","slug":"nicolas-tellez","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-05T18:01:31.059Z","latestAt":"2026-09-05T18:01:31.059Z"},{"id":"01a030e2-cdb4-701f-9529-cc6586167a4d","type":"component.created","target":{"type":"component","id":"zlwttf09JR1pDd4WAY2x","preview":"Parting Words","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a030e1-fd52-764a-a341-e901c3c07409.png","targetDeleted":false,"owned":false,"feedItemType":null,"actions":null},"context":null,"actors":[{"id":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","slug":"nicolas-tellez","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-23T23:09:25.300Z","latestAt":"2026-08-23T23:09:25.300Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:926afd9a-67dc-459d-9308-eb0ae050930e:/unified/posts/?creator=926afd9a-67dc-459d-9308-eb0ae050930e&with=reposts":[{"data":[{"id":"01a0c14a-b1e6-70ab-8c5b-b27967d780ac","title":null,"body":"

New: Bending Scroll Text.

Curved text components draw an arc and loop it. This one has no arc of its own: the line is straight until you scroll, and how hard you scroll is what bends it. Let go and it settles flat.

The section pins while the sentence travels sideways, images and icons can sit inside the sentence and ride the same curve, and speed is a number you set instead of something that changes every time you edit the copy.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: "},{"type":"text","text":"Bending Scroll Text","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Curved text components draw an arc and loop it. This one has no arc of its own: the line is straight until you scroll, and how hard you scroll is what bends it. Let go and it settles flat."}]},{"type":"paragraph","content":[{"type":"text","text":"The section pins while the sentence travels sideways, images and icons can sit inside the sentence and ride the same curve, and speed is a number you set instead of something that changes every time you edit the copy."}]}]},"author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[],"resources":[{"id":"xPOfC8vg7TqKfwyudjcO","resolved":true,"title":"Dynamic Bending Text","body":"$4d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll faster and the sentence bends. Stop, and it snaps straight again.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The section pins to the screen and turns your vertical scroll into one long line of type travelling sideways. How hard you scroll is what curves it: the line whips into an S while you move and settles flat the moment you let go. Other curved text components draw a fixed arc and loop it. This one has no arc of its own until you touch the wheel."}]},{"type":"paragraph","content":[{"type":"text","text":"Pictures live inside the sentence.","marks":[{"type":"bold"}]},{"type":"text","text":" Any piece of the line can be an image or an icon instead of words, and it rides the same curve, rotating with the letters around it. Leave one empty and you get a coloured square, handy as a spacer or a full stop."}]},{"type":"paragraph","content":[{"type":"text","text":"Speed is a number you set, not a side effect.","marks":[{"type":"bold"}]},{"type":"text","text":" One control, in sideways pixels per pixel scrolled. A longer sentence never runs faster, it just asks for a taller section, and a badge on the canvas says exactly how much scroll it needs. Or switch on Fit Section and the line is timed to finish with the section."}]},{"type":"paragraph","content":[{"type":"text","text":"No breakpoint variants.","marks":[{"type":"bold"}]},{"type":"text","text":" Type, pictures and speed scale from the width of the container, not the viewport, so a phone gets the same composition as a desktop and every screen asks for the same amount of scroll. It behaves the same inside a narrow column."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can change:","marks":[{"type":"bold"}]},{"type":"text","text":" the sentence piece by piece, each with its own colour. Font, text colour, background. Image size, roundness, fill, spacing, nudge and crop. Direction, speed, smoothing, how far it bends, how easily it bends, and which way the curve goes."}]},{"type":"paragraph","content":[{"type":"text","text":"Good for hero statements, manifesto sections, showreel intros, service lists and anywhere a headline should feel physical."}]},{"type":"paragraph","content":[{"type":"text","text":"One animation loop writes transforms straight to the DOM and only touches the letters on screen, so it never re renders React while you scroll. It respects prefers-reduced-motion."}]},{"type":"paragraph","content":[{"type":"text","text":"Note: the canvas cannot scroll, so there you see a still frame. Canvas View slides it along the sentence, Canvas Height sets how tall it is. Hit Preview to see it run."}]}]},"introduction":"Sideways text that bends on scroll","slug":"dynamic-bending-text","author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a0c146-5a75-729a-ad00-e3a1eb2faf96.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":1965}}],"post":null,"createdAt":"2026-09-21T00:08:12.391Z","updatedAt":"2026-09-21T00:16:16.981Z","publishedAt":"2026-09-21T00:08:12.388Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://bendingscrolltext.framer.website/","price":"5","paymentUrl":"https://nicusefullshit.lemonsqueezy.com/checkout/buy/d5102c99-8201-4e2d-b8c3-7eb5dc50c162","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"nAgaIuPkAQP9MVgYlzzb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T00:08:13.030Z","updatedAt":"2026-09-21T00:08:13.030Z","type":"post"},{"id":"01a079d5-be91-75f8-b129-b56c32da17a7","title":null,"body":"

Just published Arc Index. A pinned list where scroll bends the rows along an arc and pops the image of whichever one hits the highlight line. Scroll-driven instead of hover-driven, so it works the same on a phone. 24 rows, each with an image and a link, and clicking a row scrolls it into the highlight.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just published Arc Index. A pinned list where scroll bends the rows along an arc and pops the image of whichever one hits the highlight line. Scroll-driven instead of hover-driven, so it works the same on a phone. 24 rows, each with an image and a link, and clicking a row scrolls it into the highlight."}]}]},"author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9OQmwdu2yy4JUZQ7la5t","resolved":true,"title":"Arc Index Scroll","body":"$4e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Your list bends as you scroll. Rows fan back along an arc, the one on the highlight line turns solid, and its image pops in beside it."}]},{"type":"paragraph","content":[{"type":"text","text":"Most list components react to hover, which means they do nothing on a phone. Arc Index is driven by scroll position, so the same interaction works on desktop and on touch without a second variant."}]},{"type":"paragraph","content":[{"type":"text","text":"Set the speed once and forget the maths. Scroll Per Row fixes how far you scroll to move from one row to the next, and the section works out its own height from it, so adding rows makes the section longer instead of making it run faster. Scroll Lag sets how far the list trails behind you, Curve Depth and Curve Sharpness set how hard the rows bend, and the image pops on every change with its own scale and timing."}]},{"type":"paragraph","content":[{"type":"text","text":"Features • Set the scroll speed once. The section sizes itself from your rows, so the pace never changes when the list grows • Up to 24 rows, each with its own text, image and link • Click or tab a row and it scrolls itself into the highlight. The highlighted row opens its link, so the list is keyboard navigable • Shrink Text To Fit reduces the size until the longest row fits, so nothing gets cut off on narrow screens • A mobile breakpoint measured on the section itself, not the screen, so it also behaves inside a narrow column • Plain language controls with a description on every one • Static renderer aware: no animation loops on the canvas or in exports"}]},{"type":"paragraph","content":[{"type":"text","text":"Good for project indexes, client lists, chapter navigation, archive pages and case study menus."}]}]},"introduction":"Scroll-driven curved index list","slug":"arc-index-scroll","author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a079d7-05c4-74ba-8a20-5cfd750e21e5.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":2037}}],"post":null,"createdAt":"2026-09-07T03:07:25.677Z","updatedAt":"2026-09-07T03:08:52.181Z","publishedAt":"2026-09-07T03:07:25.674Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://arcindex.framer.website/","price":"5","paymentUrl":"https://nicusefullshit.lemonsqueezy.com/checkout/buy/76c3cfa1-af48-445e-95a6-bb5df1645251","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"rPHg8clzIgPXhp7sdD5j","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T03:07:26.225Z","updatedAt":"2026-09-07T03:07:26.225Z","type":"post"},{"id":"01a072bb-92a2-7114-b0df-0872ef6e9a1a","title":null,"body":"

Chain Menu Gallery is live. Hover a service and a row of photos opens around the word; move between services and the whole row follows, one photo after the other, cross-fading as it goes. On phones it turns into a picker wheel you spin with your thumb. No sticky wrapper, no scroll hijacking.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Chain Menu Gallery is live. Hover a service and a row of photos opens around the word; move between services and the whole row follows, one photo after the other, cross-fading as it goes. On phones it turns into a picker wheel you spin with your thumb. No sticky wrapper, no scroll hijacking."}]}]},"author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hCNBHkeKAr2ncmDxQEwc","resolved":true,"title":"Chain Menu Gallery","body":"$4f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The photos and the active word are one row, not two stacks pinned to the sides.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hover a service and the gallery rebuilds around that word: the images shift to open exactly the room the new word needs. Since every word is a different width, the photos travel horizontally as well as vertically, each frame leaving a moment after the one before it, so the row moves like a chain instead of a block. While they travel, every frame crossfades to a photo from the new category."}]},{"type":"paragraph","content":[{"type":"text","text":"On phones it becomes a picker wheel.","marks":[{"type":"bold"}]},{"type":"text","text":" Below the breakpoint the menu turns into a wheel you spin with your thumb, images anchored to the edges of the screen. It does not pin the section or take over the page scroll: it is a one screen block that behaves like any other. Only the middle band answers a vertical drag, so the rest of the screen keeps scrolling, and a tap brings any word to the centre."}]},{"type":"paragraph","content":[{"type":"text","text":"No breakpoint variants needed.","marks":[{"type":"bold"}]},{"type":"text","text":" Everything scales from the measured width of the container, not the viewport, so it works the same inside a narrow column as it does full bleed."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can change:","marks":[{"type":"bold"}]},{"type":"text","text":" any number of items, each with its own images, and categories can have different photo counts. Font, size, line height, text and background colour. Image size, gap, radius, and how much of the side images bleed off the edge. Speed, chain delay and chain direction, crossfade length, sideways drift on pointer move. Layout: Auto, Row or Wheel, with your own switching width."}]},{"type":"paragraph","content":[{"type":"text","text":"Good for service menus, agency and studio index pages, portfolio categories, project lists and capability sections."}]},{"type":"paragraph","content":[{"type":"text","text":"One frame loop writes the transforms, so it composites on the GPU and never re renders React while you interact. It respects prefers-reduced-motion and renders a still, settled frame on the canvas and in exports."}]},{"type":"paragraph","content":[{"type":"text","text":"Note: the Framer canvas has no hover or gestures, so the component sits still there. Use the Preview item control to pick which item shows open, and hit Preview to try it for real."}]}]},"introduction":"Hover menu with a chain of photos","slug":"chain-menu-gallery","author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a072b3-5970-76a5-8fd8-eeada499a992.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":1966}}],"post":null,"createdAt":"2026-09-05T18:01:29.980Z","updatedAt":"2026-09-06T15:56:06.825Z","publishedAt":"2026-09-05T18:01:29.974Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://maroon-badge-183309.framer.app/","price":"5","paymentUrl":"https://nicusefullshit.lemonsqueezy.com/checkout/buy/78d4879d-90cf-42b9-81ed-efb8d5440e0d","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"rzz18VxynjCVsPNdpzoF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-05T18:01:30.530Z","updatedAt":"2026-09-05T18:01:30.530Z","type":"post"},{"id":"01a030e2-cb97-73f9-ae4f-03816f6727f3","title":null,"body":"

Just released Parting Words 🍃

Scroll-reactive text that comes apart line by line — and puts itself back together on the way up.

Most scatter effects throw letters to random positions and the words turn to mush. This one spreads each letter outward from the centre, so letters never cross and words separate as whole blocks. Your copy stays readable the whole way through.

No sticky wrapper, no fixed heights. Drop it on the page and set two heights.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just released "},{"type":"text","text":"Parting Words","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"leaves","emoji":"🍃"}}]},{"type":"paragraph","content":[{"type":"text","text":"Scroll-reactive text that comes apart line by line — and puts itself back together on the way up."}]},{"type":"paragraph","content":[{"type":"text","text":"Most scatter effects throw letters to random positions and the words turn to mush. This one spreads each letter outward from the centre, so letters never cross and words separate as whole blocks. Your copy stays readable the whole way through."}]},{"type":"paragraph","content":[{"type":"text","text":"No sticky wrapper, no fixed heights. Drop it on the page and set two heights."}]}]},"author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zlwttf09JR1pDd4WAY2x","resolved":true,"title":"Parting Words","body":"$50","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography that comes apart as you scroll — and puts itself back together.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Parting Words turns a paragraph into scroll-reactive typography. As each line passes a set height on screen it lifts away: letters rise, part outward from the centre, and fade out exactly as they come to rest. Scroll back and the lines return, cascading one after another and fading back in."}]},{"type":"paragraph","content":[{"type":"text","text":"Why it stays readable","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Most scatter effects throw letters to random positions, which turns words into noise. This one expands every letter in proportion to its distance from the centre, so characters can never overtake one another. Each letter keeps its side and its order, and words separate as whole blocks instead of scrambling — your copy stays legible far deeper into the animation."}]},{"type":"paragraph","content":[{"type":"text","text":"Whole visual lines animate as a single unit, so you never see a half-dissolved word or an opacity sweep crawling across the text. Lines that wrap are handled exactly like lines you typed."}]},{"type":"paragraph","content":[{"type":"text","text":"What's included","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"· The code component, delivered as a Framer component link · 25 property controls — no code editing required · Full documentation covering every setting"}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"· Breaks apart scrolling down, rebuilds scrolling back up · Order-preserving spread — words part, letters never scramble · Letters travel upward only, away from text still being read · Whole-line animation, including wrapped lines · Type scales from the container width, so it works inside narrow columns too · Accessible: the real text stays exposed to screen readers, and reduced-motion visitors see it fully assembled · Canvas Preview slider so you can style it without scrolling · Single file, no dependencies, no external requests"}]},{"type":"paragraph","content":[{"type":"text","text":"Requirements","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A Framer project on any paid plan (code components aren't available on the free plan). Works on any page — no sticky wrapper, no fixed heights, no tall parent container required."}]},{"type":"paragraph"}]},"introduction":"Scroll Text Effect for Framer","slug":"parting-words","author":{"framerUserId":"926afd9a-67dc-459d-9308-eb0ae050930e","name":"Nic","slug":"nicolas-tellez","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/6u4v0f3g","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/926afd9a-67dc-459d-9308-eb0ae050930e/01a030e1-fd52-764a-a341-e901c3c07409.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-23T23:09:24.187Z","updatedAt":"2026-09-05T17:38:34.374Z","publishedAt":"2026-08-23T23:09:24.183Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://partingwords.framer.website/","price":"5","paymentUrl":"https://nicusefullshit.lemonsqueezy.com/checkout/buy/9e303577-0aa7-4138-89dc-0ae1068527a6","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"pc6WVffz1VFBEzD7JyX8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-23T23:09:24.759Z","updatedAt":"2026-08-23T23:09:24.759Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L51"}]