Fisheye Lens Hover text animation: the word aimotions animated in this style
003ReactiveWebGL

Fisheye Lens Hover

Fisheye lens text effect: a glass bulge follows the cursor over an editorial page, magnifying the big serif word with rainbow-fringed edges. Ideal as an interactive, animated website hero title for editorial and portfolio sites.

Prompt · replace [TEXT]

Tool-agnostic
Lay out an editorial page: [TEXT] huge in a high-contrast didone serif, black on warm off-white book paper with visible fibers, framed by small columns of body text, thin rules and a running header. A round glass lens floats over the page. At rest it drifts slowly across the word at a gentle magnification. On hover it follows the pointer with a soft lag, grows larger and magnifies to about twice the size with a fisheye bulge: strong zoom in the center, compressed edges that stay continuous with the page, and red and blue chromatic fringes near the rim. Give the glass a bright rim highlight, a crescent reflection at the top left, a faint inner shadow and a soft shadow cast on the paper. A press pumps the zoom briefly. Touch drags the lens under the finger.

Visual DNA

  • High-contrast didone serif word on warm book paper with small text columns
  • Fisheye bulge: strong magnification at the center, compressed edges
  • Red and blue chromatic fringes toward the rim of the glass
  • Glass rim highlight, inner shadow and a soft cast shadow on the paper
  • Press pumps the zoom; at rest the lens drifts slowly over the page
Category
Reactive Styles
Demo built with
WebGL
Energy
Calm
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Fisheye Lens Hover look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥