Search Lens

Animated Backgrounds

About Search Lens

A floating monochrome magnifying glass scans its particle field, gathers matching patterns and confirms each result with a precise focus lock. Featuring Self-contained optical particle field and Scan, gather and lock choreography, this effect supports live adjustments, instant previews, and reusable exports in Limot.

Features

Self-contained optical particle field
Scan, gather and lock choreography
Three alternating particle targets
Black-and-white standalone animation

Use cases

Website heroes and brand landing pages
Product demos and launch pages
Video intros and social media assets

Configuration

Synced with the controls

Appearance

ParameterCode keyCurrent value

Background colorbackgroundColor#000000

Line colorlineColor#ffffff

Scalescale100%

Motion

ParameterCode keyCurrent value

Speedspeed1

Integration

Ready to use in your project

JavaScript

Use the downloaded HTML file directly. It includes the canvas, styles, and animation script.

<!-- search-lens.html -->
Paste into your page to run

React

Add the JSX file to your project and import it as a component. Override settings with props.

import SearchLens from "./SearchLens.jsx";

<SearchLens />

Vue

Add the Vue single-file component to your project, import it, and use it in your template.

import SearchLens from "./SearchLens.vue";

<SearchLens />

Exports include your current settings. React and Vue components also accept the configuration keys below as props.

Customize in real time, copy standalone code, or export MP4, GIF, and PNG with optional transparency.