5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:T6bb,

Description

Velocity Lens Image bends the centre of an image in the direction of page-scroll velocity while granular refraction washes across the frame, then clears as motion settles. Moving a pointer or touch over the image creates a local focal region surrounded by progressively stronger grain.

The source-faithful mechanics are delivered through a clean six-row Framer API with responsive fitting, performance presets, reduced-motion behavior and a standard-image fallback.

Features

Responsive image with accessible alt text and Cover, Contain or Stretch fitting.
Direction-aware sine-profile mesh bend driven by native page-scroll velocity.
Pixel-coordinate simplex grain that appears during motion and clears at rest.
Pointer/touch focal field with editable strength, size and smoothing.
Independent Scroll Effect and Pointer Focus controls.
Grouped Image Setup and Performance presets for a clean Property panel.
Component-local native scroll measurement without Lenis or scroll hijacking.
Offscreen pausing and settle-to-idle GPU rendering.
Reduced-motion, static Canvas and non-WebGL fallback behavior.
One TSX file with no Three.js, GSAP or runtime npm dependency.

Setup

Paste the Component URL into a Framer project.
Upload an image, add alt text and set fit/focal position under Image Setup.
Tune Scroll Effect, Pointer Focus and Performance.
Open Preview and test page scrolling plus pointer movement; Canvas/export intentionally shows a stable image.

59:[["$","$L5c",null,{"post":{"id":"01a0575b-2545-72a5-bb8a-219246427b41","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"242463b7-88fd-4d9e-aa36-95050ef77502","name":"Angelo Engelbrecht","slug":"angelo-engelbrecht","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/1jqq33by","followed":false,"followsYou":false},"media":[],"resources":[{"id":"NHiLet1ipqTjo4Pz4ciy","resolved":true,"title":"Velocity Lens Image","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Description"}]},{"type":"paragraph","content":[{"type":"text","text":"Velocity Lens Image bends the centre of an image in the direction of page-scroll velocity while granular refraction washes across the frame, then clears as motion settles. Moving a pointer or touch over the image creates a local focal region surrounded by progressively stronger grain."}]},{"type":"paragraph","content":[{"type":"text","text":"The source-faithful mechanics are delivered through a clean six-row Framer API with responsive fitting, performance presets, reduced-motion behavior and a standard-image fallback."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive image with accessible alt text and Cover, Contain or Stretch fitting."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Direction-aware sine-profile mesh bend driven by native page-scroll velocity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pixel-coordinate simplex grain that appears during motion and clears at rest."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pointer/touch focal field with editable strength, size and smoothing."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent Scroll Effect and Pointer Focus controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grouped Image Setup and Performance presets for a clean Property panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Component-local native scroll measurement without Lenis or scroll hijacking."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Offscreen pausing and settle-to-idle GPU rendering."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion, static Canvas and non-WebGL fallback behavior."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One TSX file with no Three.js, GSAP or runtime npm dependency."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setup"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste the Component URL into a Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload an image, add alt text and set fit/focal position under Image Setup."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune Scroll Effect, Pointer Focus and Performance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open Preview and test page scrolling plus pointer movement; Canvas/export intentionally shows a stable image."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"scroll-driven arc, grain and point","slug":"velocity-lens-image","author":{"framerUserId":"242463b7-88fd-4d9e-aa36-95050ef77502","name":"Angelo Engelbrecht","slug":"angelo-engelbrecht","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/1jqq33by","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/01a0575a-fa03-71cf-b1de-bbf22101c669.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1076,"height":749}}],"post":null,"createdAt":"2026-08-31T10:26:25.704Z","updatedAt":"2026-09-01T08:15:56.942Z","publishedAt":"2026-08-31T10:26:25.702Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://best-fact-729234.framer.app/page-10","price":"12","paymentUrl":"https://arcengel.lemonsqueezy.com/checkout/buy/8ea17a3d-5295-4922-a2b2-21bc3a00399b","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"O3tg2GQHWDjx4nVG8P3A","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-31T10:26:26.245Z","updatedAt":"2026-08-31T10:26:26.245Z","reported":false}}],"$L5e"]

Suggested for you