Material Lens

Material Lens
Material Lens

About Material Lens

Show what is under the render.

Material Lens puts a soft lens under the cursor. Inside it, visitors see a second pass of the same image — wireframe, clay, x-ray, sketch, or a before/after.

What it does

- Base image plus up to two reveal layers; click (or press Enter) to switch

- Lens mode with feather, ring, glow and optional magnify

- Wipe mode: a before/after divider that follows the pointer

- Idle Roam: the lens drifts on its own when nobody is hovering, so it works in thumbnails and on phones

- Touch drag and keyboard arrows supported

- Labels with font control

- Works out of the box with a built-in demo (beauty / wireframe / clay sphere)

Good for

3D and product portfolios, architecture visualisation, retouching before/after, case studies.

Made by knokknokD — more components on my profile.

Good to know:

- 정확한 비교를 위해 같은 구도의 정렬된 이미지를 제공해야 한다.

- 포함된 wireframe·clay 스타일 이미지는 AI 예시로 실제 메시 토폴로지 출력이 아니며 컴포넌트가 렌더 패스를 생성하지 않는다.

Included: Framer code component (TSX and install URL), setup, license and support notes, and sample media where applicable.

From knokknokD

Token Retreat Field
ComparePocket
Click Tour
VariantCanvas

Related Components

GravityPills
Motion Parallax Pro
Gravity Cubes
Storytelling Collage