---
title: "Velocity Lens Image — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Angelo Engelbrecht · Effects. Description Velocity Lens Image bends the centre of an image in the direction of page-scroll velocity while granular refraction…"
canonical: "https://framer.elliotli.dev/component/velocity-lens-image"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Velocity Lens Image

# Velocity Lens Image

scroll-driven arc, grain and point

[View on Framer](https://framer.com/marketplace/components/velocity-lens-image/?via=elliot-li)

![Velocity Lens Image preview image 1](https://framer.elliotli.dev/og/component/velocity-lens-image/95b92befaf1233c8/1600x1114.jpg)

## Summary

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

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

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #10824

## Details

- **Author**: Angelo Engelbrecht
- **Price**: $12.00
- **Published**: 2026-08-31
- **Updated**: 2026-09-01
- **Added**: 2026-08-31
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows