Velocity Lens Image

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…

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.

scroll-driven arc, grain and point